Jump to content
Stef's Coding Community
Sign in to follow this  
gmall86

Fixed Pixel Layout Video

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?

Share this post


Link to post
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.

Share this post


Link to post
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;
}

Share this post


Link to post
Share on other sites
Its kinda difficult if you use a notepad...

Then switch to a text editor that's actually intended for coding (with syntax highlighting, code completion, etc) -- look at Notepad++ (free), e-text editor, etc.

Share this post


Link to post
Share on other sites

Notepad isn't bad, you just have to get used to checking for mistakes...

 

also, i have Microsoft WebMatrix which is pretty good too - and free...

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...