Okay I am remaking this post... My previous post was going off the thumbnail, but when I enlarged the picture I can see there are some changes that should be made.
1) you shouldn't be declaring your widths explicitly but rather letting the browser do that according to screen resolution. to prevent the browser from "breaking" the page because of a lack of width, we can assign some min-width values.
2) there is no reason why you need the "empty" div you can do that width margins / padding. If you would like your logo not be on the left then the next best place is to center it on the page, and again we can use some margins and padding, and we can use an image replacement technique to showcase our logo image, however not break the page if the user has images disabled. based off FIR technique
3) mvy... the transitional DOCTYPE was created for when CSS 1 was first coming of light nearly a decade ago. Virtually all browsers have support for CSS1 at the least, so there is no need for this; we should be using HTML4.01 Strict DOCTYPE because of the IE not supporting XHTML.
Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-18859-1">
<title>Title of Page</title>
<style type="text/css">
* { /* clears default margins / padding */
margin: 0;
padding: 0;
}
body {
width: 100%;
min-width: 780px; /* 800x600 resolution friendly */
text-align: center;
background-color: #fff;
}
div#header {
height: 100px;
background-color: inherit;
background-image: url('/path/to/image.gif');
background-repeat: no-repeat;
background-position: top left;
}
div#header h1 {
visibility: invisible;
}
/* Page Styles */
ul#nav {
float: left;
width: 30%;
background-color: #09f /* light blue */
}
ul li {
list-style: none;
}
div#content {
float: right;
width: 65%; /* leaves 5% padding for cosmetics & IE friendly */
}
div#content div#pic {
background: inherit;
}
div#content div#text {
float: left;
width: 65%;
}
div#content p#caption {
float: right;
width: 30%;
}
div#footer {
clear:both;
}
</head>
<body>
<div id="header">
<h1>Site Name</h1>
</div>
<ul id="nav">
<li><a href="/url/to/page.com">Link 1</a></li>
<li><a href="/url/to/page.com">Link 2</a></li>
<li><a href="/url/to/page.com">Link 3</a></li>
<li><a href="/url/to/page.com">Link 4</a></li>
<li><a href="/url/to/page.com">Link 5</a></li>
</ul>
<div id="content">
<div id="pic">
<img src="/url/to/image.gif" alt="alternate description">
</div>
<div id="text">
<p>MAIN TEXT OF THE SITE</p>
</div>
<p id="caption">PICTURE CAPTION</p>
</div>
<div id="footer">
<p>Copyright © Site. All Rights Reserved.</p>
</div>
</body>
</html>
now personally any captions should really be on right below or above the image to not confuse them with regular text, but that is just a matter of opinion
if you have any questions about the layout feel free to ask, but that will give you a scalable page that is accessible in multiple browsers, however is still 800x600 resolution friendly.
i get a question alot of times about the image replacement and i gave you the link to the site it was based from, here is a quick break down
Originally Posted by
me
div#header {
height: 100px;
background-color: inherit;
background-image: url('/path/to/image.gif');
background-repeat: no-repeat;
background-position: top left;
}
div#header h1 {
visibility: invisible;
}
div#header is creating the actual logo image.
div#header h1 is getting rid of the text that you keep there for css, and also having the h1 tag is to give yourself a better page rank in search engines. the logo / company name is the second most important feature of a site behind the content, thus it should be pronounced and given the largest header.
How do I make this layout with CSS?
Reply With Quote
Ta-da! the result!
ink;
Bookmarks