Spry Menu Problem

Yes it is overwhelming, but that's my problem not yours, I'm grateful for all the input I have been given, and will do all I can to follow such help, but I learn from playing and breaking things, then building them again, over time it sticks, I'm not a book person, I even tried to do an online site teaching the basics, and I couldn't even get past the 3rd stage lol, but even within this thread I hope I have made a good step forward from what I started with, and that's just repetition and your guidance on key points.

I will probably never be as good as you guys, but I hope to be able to produce a respectable finished product so to speak, once I get these kind of probably basic points to you down, I will actually have enough to put up my new site layout, I can worry about learning further tricks once I get to handle the basics a bit more, but to clarify a few points if I may;

The 960px you say for the width, is that like a universal standard in web pages so to speak ?

The div class="container" title, I take it you call it a container due to having all the other elements in it ? and further div's would have a different title appropriate to their use ? I get that they are used to apply specific attributes within it, rather than doing every entry on it's own.

And the overflow:hidden entry, I have seen it listed in the code options, but other than the obvious, I have no idea what it means to the finished page, what does this code actually mean\do ?

Would I put the banner into the header section, or add a further div to do that ?

Thanks again.

Good evening,

Quote:

Originally Posted by 8210GUY

The 960px you say for the width, is that like a universal standard in web pages so to speak ?

960px is used because it is divisible by 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16... - allowing designers to have a huge variety of different column widths and possible layouts.
Also, a width of 960px fits the majority of screen resolutions "nicely".

Quote:

Originally Posted by 8210GUY

The div class="container" title, I take it you call it a container due to having all the other elements in it ? and further div's would have a different title appropriate to their use ?

Yes, but the name is not set in stone, you could just as easily call it "wrapper" or some other name that makes sense to you.

Quote:

Originally Posted by 8210GUY

And the overflow:hidden entry, I have seen it listed in the code options, but other than the obvious, I have no idea what it means to the finished page, what does this code actually mean\do ?

This ensures that the "container" div recognizes the end of the floating column and accommodates all of its content.
Try removing this declaration to see what it does (it should be quite obvious).
I'd also like to point you towards the Sitepoint CSS reference, where you can read more: http://reference.sitepoint.com/css/overflow

Quote:

Originally Posted by 8210GUY

Would I put the banner into the header section, or add a further div to do that ?

You would do this with a further "header" div, inside the "container" div.
Something like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Layout 3</title> <style> body{ background:gray; } .container{ width:960px; margin:0 auto; background:white; padding:0px; overflow:hidden; } .header { background: #ADB96E; } .header h1{ margin:0px; } .sidebar{ float:left; width:160px; background:#ccc; } .content { margin-left:20px; width:780px; float:left; } .nav{ padding:15px 0 35px 35px; list-style:none; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Your main header now goes here, or maybe an image</h1> </div> <div class="sidebar"> <ul class="nav"> <li><a href="#">Hyperlink 1</a></li> <li><a href="#">Hyperlink 2</a></li> <li><a href="#">Hyperlink 3</a></li> <li><a href="#">Hyperlink 4</a></li> </ul> </div> <div class="content"> <h2>Your sub heading</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p> </div> </div> </body> </html>

Hi, that's what I was guessing about the size, albeit in the most basic concept, just accepting it as a basic universal concept is as much as I need to know at my level, the same with the other bits again, I get the concept which is biggest battle for me usually lol, I will have to try and break the hidden element, then I should get a better understanding there, so I will have a play and see what damage I can do lol.

Many Thanks for this.

Well been a while since trying to get my head round this, and I still can't get the concept of positioning div's, well more precisely placing div's where I want them when another div is in the same area, individual div's are fine, but when I want them side by side I struggle, and I wish I could say that what I have produced is all my own work, it isn't, what I have managed to do is edit the example you did for me, I'm not happy with the menu colour, but figured I'd see what you guys think before worrying about that, so how is this for an attempt ?

Hi there,
Your site is looking good - Well Done!

Quote:

Originally Posted by 8210GUY

I still can't get the concept of positioning div's, well more precisely placing div's where I want them when another div is in the same area, individual div's are fine, but when I want them side by side I struggle

You normally need to use a float for this. Divs are block-level elements and by default will always be placed below each other.
Here's a tutorial I can recommend, which explains this really well: http://css-tricks.com/all-about-floats/

If you have any questions regarding this, just let us know.

HTH

Hi, surely it can't be as simple as just changing a float position ?
I have also seen clearing floats in the options, but have no idea what they do, but the link you gave covers that, so will go through that several times and try to break things again, but up to now I thought you always had to float left to keep the page from going too wide, so that everything was distanced using x pixels from the left, thus controlling the max width, at least that's what I thought until now, but will go through that link and see if it can change my understanding.

Thanks for all the help