Jump to content

Fixed Pixel Layout Video


gmall86

Recommended Posts

Hello.I followed the steps to make a Fixed pixel layout as the tutorial describes.

Everything works perfect in IE but in mozzila and Chrome the page goes to the right side of the browser

and not in the middle as supposed.What i ve got to do to fix this??I am using an html4.0 Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Does this have anything to do with it?

Link to comment
Share on other sites

Your doctype is incomplete - the link's missing, and strict is usually the better way to go. Try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But without seeing what you are talking about, it's hard to help. Ideally, post a link to your site, or at the very least, your HTML AND CSS.

Link to comment
Share on other sites

The index:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Fixed Pixel Layout</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">

<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">


<div id="header">
Header Content Goes Here
</div> <!--end #header-->


<div id="sidebar1">
Sidebar1 Content Goes Here
</div> <!--end #sidebar1-->


<div id="sidebar2">
Sidebar2 Content Goes Here
</div> <!--end #sidebar2-->


<div id="content">
Content Goes Here
</div> <!--end #containt-->


<div id="footer">
Footer Containt Goes Here
</div> <!--end #footer-->


</div> <!--end #container-->

</body>


</html>

 

The css:

* {
margin: 0px;
padding: 0px;
}

body {
background-color: #8B814C;
text-align: center;
}

#container {
position: relative;
width: 960px;
margin-bottom: 0px;
margin-left: auto;
margin-righ: auto;
margin-top: 0px;
text-align: left;
background-color: #FFF;	
}

#header {
width: 960px;
height: 100px;
background-color: #CDBE70;
}

#sidebar1 {
width: 180px;
float: left;
background-color: #EEDC82;
}

#content {
width: 600px;
background-color: #FFF;
float: left;
}

#sidebar2 {
width: 180px;
float: right;
background-color: #EEDC82;
}

#footer {
width: 960px;
background-color: #CDBE70;
}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...