PDA

View Full Version : My 1st CSS-Tableless Layout


jadepearl
07-17-2008, 04:04 PM
Hi,

Am trying to design my website using CSS Layout with DW MX 2004. The website design looks ok in the DW Design View. However, when I preview in browser (firefox & ie), there's no background color, the text are all the same size, etc. I am very bad in explaining... hope you guys understand what I am trying to say.

Here's my html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer">
<div id="header">Header</div>
<div id="nav"> Navigation</div>
<div id="banner">Banner</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>


And here's my css:

body {
text-align: center;
background-color: #000000;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}#header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bolder;
text-transform: capitalize;
color: #666666;
background-color: #FFFF00;
width: 800px;
}
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFF00;
height: 200px;
width: 200px;
float: left;
margin: 0px;
padding: 0px;
}
#banner {
background-color: #33FF00;
height: 200px;
width: 600px;
float: right;
}
#content {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
background-color: #00FFFF;
height: auto;
width: 800px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #CCFFFF;
width: 800px;
}



Can anyone help me?

Thanks so much.
JP

edbr
07-18-2008, 02:23 AM
no it works is the path to your css doc correct. here i added it as a style in the head to debug.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style>
body {
text-align: center;
background-color: #000000;
}
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
#header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bolder;
text-transform: capitalize;
color: #666666;
background-color: #FFFF00;
width: 800px;
}
#nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFF00;
height: 200px;
width: 200px;
float: left;
margin: 0px;
padding: 0px;
}
#banner {
background-color: #33FF00;
height: 200px;
width: 600px;
float: right;
}
#content {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
background-color: #00FFFF;
height: auto;
width: 800px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: #CCFFFF;
width: 800px;
}


</style>
</head>
<body>
<div id="outer">
<div id="header">Header</div>
<div id="nav"> Navigation</div>
<div id="banner">Banner</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

looks different in Ie and ff though add some clear conditions

jadepearl
07-18-2008, 05:04 AM
Hi edbr,

Not to sure what happened...posted my reply but I did not come out. Anyway, wanted to say..have a couple of samples at hand and compared it with mine. It seems that the path to the css doc correct. So, am pretty puzzled.

Is there a better way to centre my layout so that no matter who views it using different computres, my website will be centred?

Thanks so much!

Cary
07-18-2008, 11:57 PM
The path is correct, but it's root relative. DW knows how to handle this with defined sites, but browsers will look in the root of your hard drive rather than the "root" of the local site folder, so they won't find what they're looking for.

jadepearl
07-19-2008, 04:17 AM
Hi Cary,

Thanks for your reply. May I know if there's a way for me to solve this problem?

Thanks so much!:-D

Cary
07-19-2008, 04:36 AM
You can either put the files on a testing server when you want to view the pages with browsers, or you can use file-relative paths instead of root-relative paths.

Your root-relative path is

href="/styles.css"

But if the html and style sheet are in the same folder you could just use

href="styles.css"

If the html is in a folder on the site, then you would tell the browser to look one level up for the style sheet by using "../" at the beginning of the path, so you would have

href="../styles.css"

Or maybe the html is in a folder within another folder, so the browser has to look two levels up to find the style sheet. In that case you would use

href="../../styles.css"

ayok
07-31-2008, 09:44 AM
with dreamweaver, just block/select "/styles.css", right click, choose code hint tools>Browse URL to find the right path to your styles.css

jadepearl
08-10-2008, 08:28 AM
Thanks Cary & ayok! :)