flexible page code

[mistaya123]

Hi

Couple issues with this link.

1. The #main_body below the horizontal menu is off somewhere on the right, off the screen, in ie7. I don't have the slightest idea why it does not show properly below the menu. (Couldn't check in ie6).

2. I am trying to make this page a flexible one. In the #main_body, the left yellow bar and the right red bar have fixed widths. I want to make the middle one with blue background flexible with the screen size. How do I adjust my code according to it? The current code doesn't make it flxible.

Thank you

[Paul O'B]

Hi,

The list structure is invalid I'm afraid as you can't have anything outside the list tags (like your spans). They must be inside the list tags <li><span></span></li>

The menu could be simplified anyway like this:

/*=========== TOP MENU ===========*/
#top_menu {
    height:48px;
    margin:5px auto;
    background:#ffffff url(http://www.articlecon.com/demo/ed/temp2.1/images/top_menu_left.png) 0 0 no-repeat;
    padding-left:6px;
}
#top_menu div{
    height:48px;
    background:url(http://www.articlecon.com/demo/ed/temp2.1/images/top_menu_right.png) 100% 0 no-repeat;
    padding:0 6px 0 0;
}
#top_menu ul {
    position:relative;
    height:48px;
    width:auto;
    padding:0;
    background:url(http://www.articlecon.com/demo/ed/temp2.1/images/menu_bg.png) 0 0 repeat-x;
    padding:0 0 0 12px;
}
#top_menu ul li {
    float:left;
    list-style:none;
    background:url(http://www.articlecon.com/demo/ed/temp2.1/images/top_menu_divider.png) 100% 0 no-repeat;
    height:48px;
    line-height:48px;
}
#top_menu li a {
    text-decoration:none;
    padding:0 30px;
    color:#000;
    height:48px;
    float:left;
}
#top_menu li.first a {
    background:url(http://www.articlecon.com/demo/ed/temp2.1/images/top_menu_divider.png) 0 0 no-repeat;
}
/*=========== MAIN BODY ============*/

    <!-- ----------- TOP MENU ---------- -->
    <div id="top_menu">
        <div>
            <ul>
                <li class="first"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </div>
    </div>
    <!-- ----------- TOP MENU END ---------- -->

That works in IE now.

You can't wrap p elements in spans either:

<span class="car1">
                            <p><strong>Lorem ipsum</strong></p>
                            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
                            </span>

The span would need to be a div as a span can only contain inline elements.

To make the middle column fluid you would need to change the html so that #middlebar comes after the right column in the html and then remove the float and use these styles.

#main_body {
    position:relative;
    overflow:hidden;
    margin:0 auto;
    min-width:994px;
    clear:both;
}
* html #main_body{height:1%;overflow:visible}

#middlebar {
    overflow:hidden;
    position:relative;
    background:blue;
}
* html #middlebar{height:1%;overflow:visible;}

The whole #middlebar is moved down the html to here:

                                <ul>
                                    <li><a class="black small_font" href="#">Lorem ipsum dolor</a></li>
                                    <li><a class="black small_font" href="#">Lorem ipsum dolor</a></li>
                                </ul>
                            </div>
                        </div>
                        <div id="middlebar">
                            <h2>Lorem Ipsum</h2>

It is not floated any more and the text will just fill the gap left between the left and right columns. The overflow:hidden (and haslayout trips) ensure that it stays as a rectangular box and doesn't wrap under the floats.

The page needs a bit of tidying up butt that's a start

[mistaya123]

Wow! You made it all so simple and clean. I tested it locally and it worked perfectly.

Btw, why have you set overflow:visible? Will it still contain its floats?

[Paul O'B]

The overflow visible was for IE6 just in case it decided to implement the height:1&#37; and hide the overflow.

IE6 will auto clear floats when it is in haslayout mode (hence the height:1% hack) but it doesn't clear floats with overflow:hidden. So for IE6 you neeed to trip haslayout and the easiest way is the height:1% hack (or perhaps more safely using the proprietary zoom:1.0 but it won't validate).

The overflow:visible is just a safety net in case IE6 finds something to base its height:1% on and then your content would be hidden at 1%.

[mistaya123]

Thanx. Would you be so kind as to point out the other mistakes in my code please? If you have time for it, though. I want to learn so that these things don't happen again.

[Paul O'B]

Here's a couple of small things.

The car image you have in this span should be in the background.

    <div id="header">
        <div class="header_text">
            <h1 class="green">Lorem Ipsum Dolor</h1>
            <p class="strong black">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
            <p class="green">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
        <span class="header_car"></span> </div>

The span doesn't sit nicely there either as it runs into a block element and therefore should be a block element itself. However you can apply that image to the header-text div anyway as it has no background.

    <div id="header">
        <div class="header_text">
            <h1 class="green">Lorem Ipsum Dolor</h1>
            <p class="strong black">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
            <p class="green">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
        </div>
 </div>

#header {
    min-width:994px;
    position:relative;
    overflow:hidden;
    clear:both;
    margin:0 auto;
    height:222px;
    background:#2f9f15 url(http://www.articlecon.com/demo/ed/temp2.1/images/header.jpg) 0 0 no-repeat;
    min-width:40%;
}
.header_text {
    position:relative;
    background: url(http://www.articlecon.com/demo/ed/temp2.1/images/header_car.png) 100% 0 no-repeat;
    height:222px;
}

I realise you may be adding other things there but you get the idea

This image is 97k and I just copied it into my paint package and it looks as though you can reduce it down to about 24k without much loss of detail at all. The image looks odd on my screen anyway as the background just finishes. You should make the right side of the image fade into a solid green color and then you can give the header background the same green colour so that the image doesn't just appear to stop dead.

Some of the other images could do with optimising down also.

There's an orphaned inline element here again.

</div>
     <a class="samll_font" href="#">>> SEE ALL</a> </div>

Wrap it in p element.

</div>
<p><a class="samll_font" href="#">>> SEE ALL</a></p>
</div>

Much neater. (and what's a samll_font ?)

Try not to use names like leftbar and rightbar and middlebar (I know I use names like that when I write demos but that's just to make it easy for the demo).

Your middlebar would normally be something like #main or #content and the left and right columns could be could be called ...... #sidebar1 and #sidebar2 or #secondary. In that way it doesn't matter if you decide later on that the left column should nw be on the right and you won't have to change the names. You shouldn't really identify the elements with a name that won't make sense if they are moved somewhere else.

The only exceptions would be #header and #footer as you are unlikely to move the footer into the side column etc.

The round corners are a bit of a pain and make the markup a bit of a mess but whatever you do you still need the same number of hooks but I try not to nest everything and would usually do the top and bottom as separate elements rather than nested just to stop the html form being nested too deep. However there's no real difference.

The reset could be trimmed and unless you envisage using all the elements mentioned you could trim that down.

You have a min-width set but it would be better if the page could go a little smaller as it is 1050px wide from the looks of it. Also perhaps think about a max-width as well to stop it getting too wide.

Hope that helps

[mistaya123]

Thank you very much. I really appreciate it.

I'll take care of the points you have mentioned in my code.

[mistaya123]

Hi

I have another question regarding flexible layout in this link.

The purple bar below the header and to the left of the page, expands nicely with the page and all. I want to take it out about 20px to the left, outside #main_content.

To do this I have to set overflow:visible for #main_content. But by doing this, the purple bar expands all over the #rightbar of the page.

Is there any other way to do this? To take purple bar out left so that it touches the edge of the page?

[mistaya123]

Ok got it. Set the left padding of the #main_body to 0.

[Paul O'B]

Glad you sorted it