Trying to Design Website using CSS Layout

**jadepearl** · 07-17-2008, 03:12 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:

PHP 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:

PHP Code:




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

**molendijk** · 07-17-2008, 03:29 PM

The following works with me. I just copied your lines and put everything in one page:

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>

<style type="text/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;

}  
</style>

<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>

Arie Molendijk.

**jadepearl** · 07-18-2008, 09:21 AM

Thanks Arie for your reply.

I was just wondering if somehow DW MX 2004 programme could read the stylesheet link or is there other problems which I as a newbie could not detect?

I am following some online tutorials also and somehow, when I try preview in browser (firefox & ie), I get the same results...nothing as what I see in the WUSIWYG. *sigh*

Please help.

Thanks so much!

**Twey** · 07-18-2008, 09:51 AM

It looks as though the path that DreamWeaver sets is wrong.

However, the best advice that can be given here is to stop using a WYSIWYG editor and learn to code your pages yourself -- there's an excellent set of tutorials at http://www.howtocreate.co.uk/. DreamWeaver and other programs like it are incapable of producing quality code unless you turn off all its WYSIWYG features and simply write the page yourself anyway, using it as little more than a text editor.