Need some help with a CSS layout...

[MikeTheVike]

I've attached a quick diagram of how the site will be laid out. Its pretty basic. The navigation will be a list with jpeg or gif buttons. The div setup is pretty easy except when I factor in the logo graphic that overlaps multiple areas.

A buddy suggested just using horizontal divs for each section and splice up the images. I think there must be a way for me to complete this layout without splicing up all the images. I'm a web design newb, but i do have some html/css knowledge . Any help with how to set up the divs would be appreciated!

And if none of this makes any sense, tell me and I'l ltry to make it more clear.

[MikeTheVike]

A small example would be the SOLD OUT graphic on this website...

http://www.futureofwebapps.com/

[EC]

what I would probably attempt first is to create a container for everything and give that relative position. Then with the logo div, position that absolutely inside the container and give it a negative top and left coordinate. This way you can center the layout with the container and the logo sort of goes along with it. What do you think? Does that help?

[Drazan]

Why not look at the page's css to see how it's done?

View source of original page, find css url, past css url in browser window....walla! all the css is now readable for you to see how that particular effect was done.

Then just compare page to source to see placement of tags vs css.

It's a good way to learn what the books and tutorials don't tell you. Wait.... it was how I learned before there was books and tutorials. heh.

=)
Jade

[Neballer]

What EC said.
Or if you want it centered - have the main container right/left margin set to auto and throw everything in it.

I'd also float the columns right and left respectably

[MikeTheVike]

what I would probably attempt first is to create a container for everything and give that relative position. Then with the logo div, position that absolutely inside the container and give it a negative top and left coordinate. This way you can center the layout with the container and the logo sort of goes along with it. What do you think? Does that help?

So something like this...

<div id="container">
<div id="logo">
</div>
<div id="everythingelse">
</div>
</div>

and then set the "logo" div to absolute and give it negative settings. Would it overlap the container div, or should I make the container div wider? I'm still waiting on approval from the client, then I will be hitting the code. Will probably have mroe questions then. Thanks everyone!

[MikeTheVike]

Why not look at the page's css to see how it's done?

View source of original page, find css url, past css url in browser window....walla! all the css is now readable for you to see how that particular effect was done.

Then just compare page to source to see placement of tags vs css.

It's a good way to learn what the books and tutorials don't tell you. Wait.... it was how I learned before there was books and tutorials. heh.

=)
Jade

I'm going to take a look at their code as well, there's a lot going on in that page, so its kind of confusing. I got a Firefox plugin called FireBug that is going to be really handy when looking at other siters to learn.

[Neballer]

So something like this...

<div id="container">
<div id="logo">
</div>
<div id="everythingelse">
</div>
</div>

and then set the "logo" div to absolute and give it negative settings. Would it overlap the container div, or should I make the container div wider? I'm still waiting on approval from the client, then I will be hitting the code. Will probably have mroe questions then. Thanks everyone!

It will overlap, because it is being positioned absolutely to the "container" div. Settings of zero would make it line up in the top left corner.

[MikeTheVike]

It will overlap, because it is being positioned absolutely to the "container" div. Settings of zero would make it line up in the top left corner.

Thanks for your help! I actually got it working, well in Firefox and Safari its working, but IE6 is a little messed up. The "navigation" div where I placed the "logo" div expands in size in IE. Here is my code along with attachments showing what it looks like in FireFox(good.gif) and in IE(bad.gif), in case you get bored and want to take a look :)

Is there a way to post code on here?


<body>
<div id="container">

<div id="headercontainer">

<div id="login">

</div>

<div id="navigation">
<div id="logo"></div>
</div>

<div id="banner">

</div>
</div>

<div id="content">
<div id="leftcol">

</div>
<div id="rightcol">

</div>
</div>
</div>
</body>


body {
text-align: center

}



#container {
text-align: left;
height: 700px;
width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #990000;
}

#headercontainer {
background-color: #999900;
height: 300px;
width: 700px;
}

#logo {
height: 100px;
width: 100px;
background-color: #FFFF00;
position: relative;
left: -30px;
top: -30px;
display: block;
}


#login {
background-color: #33FFCC;
height: 100px;
width: 700px;
}

#navigation {
height: 50px;
width: 700px;
background-color: #9966FF;
}

#banner {
background-color: #999999;
height: 150px;
width: 700px;
}

#content {

}

#leftcol {
background-color: #CCCCFF;
height: 375px;
width: 300px;
float: left;
}

#rightcol {
background-color: #FF9999;
float: left;
height: 375px;
width: 400px;
}

[Neballer]

last three buttons on the left in the reply box, are code, html and php
<body>
<div id="container">
<div id="headercontainer">
<div id="login"></div>
</div>
</div>
</body>

As you problem goes, I don't have IE6 on my desktop - but try and take out the height:300px in the headercontainer, it's not doing anything in FF - so it might be f-ing it up in IE6