evo33
11-15-2006, 02:28 AM
Hi everyone, first of all I would like to say hi as this is my 1st time here.
Anyway I have run into some trouble with practicing from a website CSS Layouts Without Tables.
I have copied the code and placed my own text into it but when I try to preview this saved page in IE 6 or Mozilla Firefox, all I get is all the layers stacked to the left hand side. Im not sure if this is coded incorrectly or if its due to a problem in the browser, I have lost many nights on this and any help would be much appreciated. It's as if theres absolutley no formatting applied to the page. :confused:
However, the preview mode in Dreamweaver MX (the design view) clearly shows the layers as there supposed to look??
I got the source code from this site:
http://www.htmlgoodies.com/beyond/css/article.php/3642151
3 Column Layout With Header and Footer
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
Now the CSS:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
These first couple of lines in the style sheet specify the font family and size for the document.
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
Here, the page width has been specified as 900 pixels. This wrapper division also has padding of 10 pixels and a border of 1 pixel. The total of these values results in the actual width of the page being 922 pixels.
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
Now I place all of this into dreamweaver and also have attached an external stylesheet for the above css. Ive tried different ways but still the text that is supposed to be arranged on the page is just all aligned to the left???
this is what my code looks like in dreamweaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" />
<title>Joe's Fruit Store</title>
<link href="/styles/joe_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<div align="center"><img src="/images/joes_header.jpg" alt="Joe's Fruit Store" width="482" height="42" /></div>
</div>
</div>
<div id="content">
<div id="content-left">
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>Home</p>
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>Produce</p>
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>History</p>
</div>
<div id="content-main">
<h2>Joe's Fruit Shop</h2>
<p><b>At Joe's we are dedicated to selling the freshest, finest fruit, vegetables and cut flowers. We will deliver anywhere in the metropolitan area for only $10 (including GST).</b></p>
<p><em>We've been in business for the past 20 years in one location and now we've moved into the 21st century by moving on to the World Wide Web, where we can provide services we never dreamed of when Joe first opened the store way back in the 1980s.</em></p>
<hr />
<p><em>Take a look at our special fruit and vegetable baskets. We've collected the freshest, most succulent fruit and vegetables and packaged them in quantities to suit many different sized families. Because we buy in bulk, you get the benefits in low prices and fresher produce. All fruit and vegetables are guaranteed to be be delivered to you less than a day after they go on sale in the produce markets.</em></p>
<p><b>We can provide the baskets in "organic" produce too!</b></p>
<p><em>Ideal for the busy family - takes out all the agonising decisions about menus for the family and how to please everyone! And we can even provide menus to go with the basket!</em></p>
</div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
</body>
</html>
and the above css saved in a external stylesheet:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:130px;
}
#content-main {
margin-left:10px;
width:716px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
It would be great if someone could help me,
thanks. :)
Anyway I have run into some trouble with practicing from a website CSS Layouts Without Tables.
I have copied the code and placed my own text into it but when I try to preview this saved page in IE 6 or Mozilla Firefox, all I get is all the layers stacked to the left hand side. Im not sure if this is coded incorrectly or if its due to a problem in the browser, I have lost many nights on this and any help would be much appreciated. It's as if theres absolutley no formatting applied to the page. :confused:
However, the preview mode in Dreamweaver MX (the design view) clearly shows the layers as there supposed to look??
I got the source code from this site:
http://www.htmlgoodies.com/beyond/css/article.php/3642151
3 Column Layout With Header and Footer
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
Now the CSS:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
These first couple of lines in the style sheet specify the font family and size for the document.
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
Here, the page width has been specified as 900 pixels. This wrapper division also has padding of 10 pixels and a border of 1 pixel. The total of these values results in the actual width of the page being 922 pixels.
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
Now I place all of this into dreamweaver and also have attached an external stylesheet for the above css. Ive tried different ways but still the text that is supposed to be arranged on the page is just all aligned to the left???
this is what my code looks like in dreamweaver:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" />
<title>Joe's Fruit Store</title>
<link href="/styles/joe_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<div align="center"><img src="/images/joes_header.jpg" alt="Joe's Fruit Store" width="482" height="42" /></div>
</div>
</div>
<div id="content">
<div id="content-left">
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>Home</p>
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>Produce</p>
<p><img src="images/berry01_red.gif" alt="Fruit" width="22" height="20" /></p>
<p>History</p>
</div>
<div id="content-main">
<h2>Joe's Fruit Shop</h2>
<p><b>At Joe's we are dedicated to selling the freshest, finest fruit, vegetables and cut flowers. We will deliver anywhere in the metropolitan area for only $10 (including GST).</b></p>
<p><em>We've been in business for the past 20 years in one location and now we've moved into the 21st century by moving on to the World Wide Web, where we can provide services we never dreamed of when Joe first opened the store way back in the 1980s.</em></p>
<hr />
<p><em>Take a look at our special fruit and vegetable baskets. We've collected the freshest, most succulent fruit and vegetables and packaged them in quantities to suit many different sized families. Because we buy in bulk, you get the benefits in low prices and fresher produce. All fruit and vegetables are guaranteed to be be delivered to you less than a day after they go on sale in the produce markets.</em></p>
<p><b>We can provide the baskets in "organic" produce too!</b></p>
<p><em>Ideal for the busy family - takes out all the agonising decisions about menus for the family and how to please everyone! And we can even provide menus to go with the basket!</em></p>
</div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
</body>
</html>
and the above css saved in a external stylesheet:
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:130px;
}
#content-main {
margin-left:10px;
width:716px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
It would be great if someone could help me,
thanks. :)