Good evening,
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".
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.
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
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><!-- end .header -->
<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><!-- end .sidebar -->
<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><!-- end .content -->
</div><!-- end .container -->
</body>
</html>
Reply With Quote
Bookmarks