Back to basics: blushes

HTML & CSS
1

Hi

I’ve started on the skeleton for a new page and I am stuck before I start… truly ashamed…

  1. I cannot understand why I can give min-height to #header and #main and #side, and not to #nav and #footer. If I don’t or do not put some text in, it is nowhere to be seen

  2. I ended up with a margin in the #nav even if I gave no margins anywhere and was forced to give a negative margin to get rid of it. Why? And if I narrow the page the empty margin (background) appears again.

  3. I need to make sure that the height of the 2 columns is always the same. In my current pages I have 3 columns and I was given a table setup, which I do not quite understand. What is the simplest css/html solution, please?

My lame attempt is at
http://pintotours.net/TEMP/BLOG/Mine.html

2

The #main #side and #footer are children of the #nav, they are its content. If that’s how you want it, you can increase the “height” of the blue bar where the Options are by adding padding to the ul.
To be honest, it’s best not to set heights explicitly, just let the content + padding set it, that’s far more fluid.

Again, you can use padding to “fill” an empty box.

I think that’s the browser default margin. Just set #nav {margin: 0;} to remove it.

If they need to be the same height, the floats you have are maybe not the best option. Display table may be better. Again, allow the content to define the height rather than setting it.
EDIT
Almost forgot to mention, watch your code Validation, there are a few broken/missing tags in there. The title tag is missing a > and the lis in the footer have no ul parent.

4

Well, I had a try at the table business and got somewhere!

is this all that’s needed?

http://pintotours.net/TEMP/BLOG/Mine.html

5

I don’t see any display table. I’m guessing the two columns are #main and #side, they are still floats.
I was thinking along the lines of:

<div class="table">
    <div id="main" class="cell">
        <p>content</p>
    </div>
    
    <div id="side" class="cell">
            <p>content</p>
    </div>
</div>

And the css;

.table  {
    display: table;
    width: 100%;
}
    
.cell   { display: table-cell;}

#main{
    width:70%;
    background-color:yellow;
}

#side{
    width:30%;
    background-color:green;
}

Note, you can’t set a height for css tables, so you need content. Displaying as table cells, they will always have the same height, as defined by the one with the most content. If they were floats, the heights could differ depending on content.

6

Hi SamA74

Now you got me confused because the columns seem to be working fine.

Did I discover something new?..

Have a look, now. I introduced a #wrapper and it seems ok.

7

There are still some problems with the code.

Also the nav section opens with <div id="nav"> but ends with </nav>
Where you add the “Lorem Ipsum” put your text in <p> tags.
I’m not a fan of using <br> to make space, it’s for breaking lines, use padding or margin to make space.
The good news is, you are on the right track adding the wrapper and display table. But I’m not sure why the text is leaking out the bottom. It could be down to the invalid code, I’m not sure.
Also a little work to make the image responsive.

8

Now, that was silly…[quote=“SamA74, post:7, topic:207131”]
Where you add the “Lorem Ipsum” put your text in <p> tags.I’m not a fan of using <br> to make space, it’s for breaking lines, use padding or margin to make space.
[/quote]

These are just very temporary to give me an idea of what is ahappening.

Is the table all right?

I’m now stuck with the text next to the image. I gave the image a padding-top:50px and the same to the #text, but this will not budge… and now I’ve done something that made it move right against the image. I guess I need to give it a margin or padding, all the way from the left side of the screen, but what will happen at mnarrower widths…?

9

Yes, but I’m still puzzled by the text bleeding into the footer at the bottom, have not worked that out yet.

I’m not sure the layout you are wanting there, but as it stands it is not responsive how you have the image there.

10

Hi

I’ve noticed that but have not got to it yet.

As for the image I think… I know what to do later to make it responsive. It’s getting the text in the right place that’s defeating me!

11

That makes it clearer :grinning:
I was thinking the layout would be a difficult one to make responsive, but that doesn’t look too hard now I see what you want.
It’s the text at the bottom that’s bugging me.

12

Really???

How do I get the text next to the image ion the right place, please?

The text and the blue colour that should not be there!

13

That’s your nav, you have not fixed yet.
Make all your code Valid before going any further! Don’t expect broken code to work.

14

Thanks

In fact, I had amended it but in Notepad+ and not the one I published so that you could see.

That blue problem solved.

Could you help putting the text in its proper place, please?

15

Remember what I said about <p> tags on your body text?

16

The <p> tags are there, and the <h2> and the <h4>

you are probably looking at the rubbish below. I am only referring to the text next to the image

17

Ok, I was looking at a version I have made and adding corrections, adding the p tags fixed the text leak at the bottom.

18

But now, I lost the sidebar and everything’s gone!

What have I done?

That bit above sorted out

But what about placing the text?

EDIT

Well, I managed to position the text, but the moment I start to narrow the screen it dips below the image too soon. I guess the empty space to the left of the image should be used up as the screen narrows.

But how?

19

This took a while, but I have to eat sometimes.
It is a bit more responsive, but will need some tweaks still.
I just added some more css at he end and altered the html a bit.
I’m not sure about how the text wraps with the floated picture, maybe keep them separate columns or put the query sooner.

 body, html {
margin:0;
padding:0;


}



#header{
width:100%;
height:250px;
background-color:brown;
}

#nav{

width:100%;

background-color:#0088FF;
text-align:center;
padding:60px 0;


}
#nav ul {

margin-top:-10px;
list-style:none;
}
#nav li {
display:inline;
padding:0 30px;

}

#nav li a{
    text-decoration:none;
color:white;
padding-bottom:20px;
}





#wrapper{
  display: table;    
    
}

#main{
    display: table-cell;
    width:70%;
    vertical-align: top;
    height:auto;
    
    background-color:white;
}

#side{
    display: table-cell;
    width:30%;
    vertical-align: top;
    height:auto;
    
    background-color:green;
}


#footer {
clear:both;
text-align:center;
background:#cc9;
}
#footer ul {

margin-top:-10px;
list-style:none;
}
#footer li {
display:inline;

}
#footer li a{
    text-decoration:none;
}
.listings   {
    overflow: auto;
    margin-bottom: 5em;
}
.listings section    {
    min-width: 80%;
    float: right;
    padding: 1em;
}
.listings figure    {
    max-width: 80%;
    float: left;
    margin: 5px;
}
.listings figure img   {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 500px) {
    .listings section    {
        float: none;
    }
    .listings figure    {
        max-width: 100%;
        float: none;
    }
}

html

<body>

<div id="header">


</div><!-- close header -->

<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
<li><a href="#">Option 7</a></li>
<li><a href="#">Option 8</a></li>
</ul>

</div><!-- close nav -->

<div id="wrapper">
<div id="main">
    <div class="listings">
        <section>
            <figure>
                <img src="https://placehold.it/375x210" alt="" width="375" height="210">
            </figure>
            <div>
                <h2>Moment Pierre Olivier <br>
                Bourgeois Photography 2014</h2>
                <h4>Rina Chaudhary  7/03/2014  36 Comments</h4>
                <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla n...</p>
            
            </div><!-- close text -->
        </section>
        <section>
            <figure>
                <img src="https://placehold.it/375x210" alt="" width="375" height="210">
            </figure>
            <div>
                <h2>Moment Pierre Olivier <br>
                Bourgeois Photography 2014</h2>
                <h4>Rina Chaudhary  7/03/2014  36 Comments</h4>
                <p>Nunc tincidunt, elit non cursus euismod, lacus augue ornare metus, egestas imperdiet nulla n...</p>
            
            </div><!-- close text -->
        </section>
    </div>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
    Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.
    
    Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    
    Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.
    
    Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
</div>

<div id="side">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- close wrapper -->
<div id="footer">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
</ul>

</div>



</body>
20

Many thanks Sam

In fact the page I am “copying” gets rid of the sidebar quite early, at about 985px, and then moves the text below the images at 767px

http://blogmag-themexpose.blogspot.in/search?updated-max=2013-12-14T09%3A55%3A00-08%3A00&max-results=5

I had gone a bit further with my page and will now have to try an s see what you added to see if I can use it.
http://pintotours.net/TEMP/BLOG/Mine.html

your code is here http://pintotours.net/TEMP/BLOG/sam.html

Well, there’s a week-end ahead!

Thank you again

21

The bit that was tricky was getting that gap you have to the left of the images. You have the big margin for that, but I did not want to use margin, as it does not go away when the page narrows, so I put each bit in a section floated to the right. But then I have to use a “clearfix” to keep the later text off it.

That doesn’t have the gap, which would be much easier to do.
That page has a strange problem, when the pictures go on top, the first letter of the heading gets left on the side.