Jump to content

page Layout using DIV


Romy Li

Recommended Posts

I am trying to create a page layout using DIV and CSS. It is a very basic layout containing 5 DIVs, as below :HeaderContainer with 2 DIVs, Menu and Content.FooterThe footer ended up disappeared under the container. How do I make the footer appears immediately after the container ?Thank you all..

Link to comment
Share on other sites

Hi ChrisThanks for the help, I have added the CSS as you mentioned and got the page to be in the shape I want. The layout tested in Mozille Firefox is more or less what I need. But when tested in IE6, the content Div go out to the right. I have enclosed my css and HTML. I hope you can help me again on this.Two problems :1) The Content go further than the specified 620 px.2) The border line of the container shows there is a second border on top of the content Div.Thank you very much. CSS

body	{	color: red;	margin: 0;	padding:0;	font-family: arial, helvetica, sans-serif;	}	/* Navigation div rules & children */	#header {	color: red;	border: 1;	padding: 0;	height: 100px;	width: 750px;	background-color: #fff;	}#header p {	margin: 0em 0% 0em 1%;	font-size: 85%	}	.breadcrumb {	margin-left:140px;	text-color: red;	}#container	{	border: 2;	margin: 0;	max-width: 750px;	margin-top:0px;    background-color: #fff;    border-top: 1px solid #708090;    border-bottom: 1px solid #708090;	}#nav	{	border: 1;	margin: 0;	padding-top:10px;	padding-left:20px;	width: 136px;	w\idth:140px;	margin:0px;    background-color: #fff;	float:left;    }  #content {	border: 0;	margin:0;	max-width: 620px;	margin-top:0;	border-left: 1px solid #708090;    background-color: #fff;	float: left;    }#footer {	color: #fff;	background: #666;	border: 1;	border-top: 1px solid #fff;	margin: 0;	padding: 15px 7px 7px 7px;		width: 750px;		clear: both;	}#footer { \width: 750px; } /* for IE5/Win  */#footer { w\idth: 746px; } /* for good browsers */#footer p {	color: #fff;	font-size: 0.9em;		text-align: center;	}

My testing html

<html><head><title> Plan a Holiday-home page</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content="Romy Li" /><meta name="description" content="This is testing" /><meta name="keywords" content="all sorts" /><link rel="stylesheet" type="text/css" href="styLesheet.css" media="screen" /><style type="text/css" media="screen"></style></head><body><div id="header"><img src="images/banner2.jpg" width="760" height="75" alt="" /><p class="breadcrumb">Home > Contact</p></div><div id="container">  <div id="nav"><!-- #include file="menupage.htm" -->     <div id="content">	<P>  </P>    <P>This is a lois content</P>    <P> </P>    <P> </P>    <P> </P>    <P> </P>    <P> </P>    <P> </P>    <P> </P>    <P> </P>  </div></div><div id="footer">    <p> my footer  </p></div></body></html>

[EDIT] added code box tag to encapsulate code - skemcin

Edited by Skemcin
Link to comment
Share on other sites

CSS CODE

html, body {color: red;font-family: arial, helvetica, sans-serif;height: 100%;margin: 0px;padding:0px;width: 100%;}#container {background-color: #fff;border: 1px solid black;height: 75px;margin: 0px;width: 760px;}#header {background: #fff url(images/banner2.jpg);border-bottom: 1 px solid black;color: red;height: 100px;padding: 0;text-align: left;width: 760px;}#header p {margin: 0px;font-size: 85%;} .breadcrumb {padding-left: 140px;text-align: left;text-color: red;width: 760px;}#nav {background-color: #fff;border: 0px;float: left;margin: 0px;padding-top: 10px;padding-left: 20px;text-align: left;width: 136px;}  #content {background-color: #fff;border: 0px;border-left: 1px solid #708090;float: right;margin: 0px;padding: 5px;text-align: left;width: 620px;}#footer {background: #666;border-top: 1px solid black;clear: both;color: #fff;margin: 0px;padding: 15px 7px 7px 7px;text-align: center;width: 760px; }#footer p {color: #fff;font-size: 0.9em; }

HTML CODE

<html><head> <title> Plan a Holiday-home page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Romy Li" /> <meta name="description" content="This is testing" /> <meta name="keywords" content="all sorts" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <style type="text/css" media="screen"></style></head><body> <center> <div id="container">  <div id="header">  </div>  <div class="breadcrumb">   Home > Contact  </div>  <div id="nav">  </div>  <div id="content">   <P>  </P>   <P>This is a lois content</P>   <P> </P>   <P> </P>   <P> </P>   <P> </P>   <P> </P>   <P> </P>   <P> </P>   <P> </P>  </div>  <div id="footer">   <p>my footer</p>  </div> </div> </center></body></html>

[EDIT] added code box tag to encapsulate code - skemcin

Edited by Skemcin
Link to comment
Share on other sites

Thank you for taking time to help me. I have tested out the new codes. The CSS works very good when I ran it using IE, thank you. However the layout was totally out when tested using firefox. Would you be able to have another look for me ?thanks again

Link to comment
Share on other sites

This should fix the major problems. Let me know if you need more help.CSS

html, body {color: red;font-family: arial, helvetica, sans-serif;height: 100%;margin: 0px;padding:0px;width: 100%;}#container {background-color: #fff;border: 1px solid black;margin: 0px;width: 760px;}#header {background: #fff url(images/banner2.jpg);border-bottom: 1 px solid black;color: red;height: 100px;padding: 0;text-align: left;width: 760px;}#header p {margin: 0px;font-size: 85%;} .breadcrumb {border-bottom: 1px solid black;border-top: 1px solid black;padding-left: 140px;text-align: left;text-color: red;width: 620px !important;width: 760px;}#nav {background-color: #fff;border: 0px;float: left;margin: 0px;padding-left: 20px;text-align: left;width: 136px;} #content {background-color: #fff;border: 0px;border-left: 1px solid #708090;float: right;margin: 0px;padding: 0px 5px 0px 5px;text-align: left;width: 620px;}#footer {background: #666;border-top: 1px solid black;clear: both;color: #fff;margin: 0px;padding: 15px 7px 7px 7px;text-align: center;width: 746px !important; width: 760px; }#footer p {color: #fff;font-size: 0.9em; }

[EDIT] added code box tag to encapsulate code - skemcin

Edited by Skemcin
Link to comment
Share on other sites

Thanks for your quick response. This time the css fixed most of the problem with Firefox. The only thing is that Firefox does not seems to treat Nav and Content as next to each other, but Nav being above Content. So if you put in some text in Nav you will see the Content being pushed down, looking really off. Any ideas ?? Thanks again.

Link to comment
Share on other sites

please start to use the tags when posting in these forums:[ c o d e ]the code you want to share (short)[/ c o d e ][ c o d e b o x ]the code you want to share (long)[/ c o d e b o x ](Of course, remove the spaces)Thanks

Link to comment
Share on other sites

Hi Chris,I have just found out that :If I run the HTML using Firefox from within Dreamweaver 6, I have the problem mentioned in my last post. When I just run the HTML using Firefox, I don't have the problem anymore. Both Firefox and IE are consistent. So I suppose the problem seems to be caused by Dreamweaver 6. Thank for very much for you help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...