Help with CSS layout

HTML & CSS
1

Hi.

I’m trying to convert this PSD to a CSS layout…and i really think i need some help positioning the menu and the content div… also if anyone has the time, i’d like to know if the way i positioned/overlapped the currently existing divs is the best way to go, or if I should look into a particular technique to achieve the best conversion.

this is how it’s supposed to look (yet without content, etc)

(attachment rae-demo.jpg)

and this is how it look so far.

http://www.rae-mx.com/test/index.html

that red div you see below the content is a supposed menu div, im trying to place it above the white content div…with no luck. any suggestions are extremely appreciated. thanks!

if it’s any easier, i put up a zip with the design as attachment.

2

Hi,

Why have you set the menu container to 768px high when it only needs to be about 240px? It takes up all the space and there is no room for the content.

You should set it to the cortrrect height and then create a content div underneath.

e.g.


#menu-container {
    width: 1024px;
[B]    height: 240px;[/B]
   [B] /*min-height: 768px;*/[/B]
    margin-left: auto;
    margin-right: auto;
[B]    position:relative;[/B]
}
#menu {
    position: relative;
    width: 885px;
    height: 62px;
    top: 162px;
    left: 81px;
}
#menu ul {
    height: 62px;
}
#menu ul li {
    display: inline;
    background: url(http://www.rae-mx.com/test/imagenes/bg-menu-item.png) no-repeat;
    width: 163px;
    height: 62px;
    margin: 0px;
    margin-left: 4px;
    padding: 0px;
    float: left;
    color: #faa851;
    text-align: center;
    padding-top: 15px;
}
[B].content {
    margin:0 0 0 100px;
    width:825px;
}[/B]
p {
    color:#000
}




<div id="container">
    <div id="background">
        <div id="fondo-contenido">
            <div id="foco-enchufe">
                <div id="menu-container">
                    <div id="menu">
                        <ul>
                            <li>Home</li>
                            <li>Mision-Vision</li>
                            <li>Usos</li>
                            <li>Videos</li>
                            <li>Preguntas Frecuentes</li>
                        </ul>
                    </div>
                </div>
                [B]<div class="content">
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                    <p>test</p>
                </div>[/B]
            </div>
        </div>
    </div>
</div>

Note that setting min-height and height to the same value is a waste of time as all you get is height and the min-height is superfluous.

The problem I see with your layout is that you are going to have to put everything in fixed height divs and set overflow so that if the content grows then a scrollbar will appear on the content because your page cannot scale.

If you want a fixed height type of layout the that’s fine but you will have to control the content.

I would prefer to have a fluid height on the content and re-slice all the images so that they can grow. This would mean making a repeating slice for the content that can repeat and grow and then just cap it top and bottom with fixed height elements. This would allow the page to grow or text to be resized without the need for scrollbars but is obviously a lot more work and a bit fiddly with that design.

It all depends on your goals.