Mind checking this oh so basic layout for me?

stevengreen22 · April 16, 2011

Ello,

Would anyone mind havign a look over this and making sure I'm not cocking it up anywhere or making silly mistakes.

I'm new to the css thing and likely to have made a few errors. It's unfinsihed but wanted to post before leaving work. The content needs to have a slim column, larger text field, picture box and bla bla. but, as it is...ok?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

#wholepage {
width: 100%;
margin-right: auto;
margin-left: auto;
height: 1000px;
background:green;
}
#header {
width: 98%;
height:180px;
margin-left:1%;
background:red;
}
#navcol {
width: 150px;
height:600px;
margin-left:1%;
margin-top:10px;
background:cyan;
}
#content {
width: 98%;
height:650px;
margin-left: 1%;
margin-top:10px;
background:orange;
}
#footer{
width: 98%;
height:80px;
margin-left:1%;
background:red;
}
#topbarleft{
width: 45%;
height:50px;
float:left;
margin-left:5%;
background:blue;
}
#topbarright{
width: 45%;
height:50px;
float:left;
background:lightblue;
}
#logoimage {
height: 100px;
width: 100px;
float: left;
margin-left: 5%;
margin-top: 10px;
    background:yellow;
}
#logoimage2 {
height: 100px;
width: 80%;
float: left;
margin-left: 2%;
margin-top: 10px;
    background:yellow;
}
#adheader {
height:80px;
width:100px;
margin-right:20px;
margin-top:10px;
float:right;
background:blue;
}
#mainnav {
height: 50px;
width:100%;
margin-top:5px;
background:pink;
}

.clearb {
clear:both;
}
.clearl {
clear:left;
}
.clearr {
clear:right;
}

</style>

<body>

<div id="wholepage">
	<div id="header"> 
		<div id="topbarleft" class="clearb">MAIN HOME LINKS ETC</div>
		<div id="topbarright" >LOGIN LINKS ETC</div>

		<div id="logoimage">Logo </div>
			<div id="logoimage2">and other stuff can go here, 
		image etc, this can / may be removed amended depending 
		on whether a side nav is used, size is also to be determined<
				<div id="adheader"class="clearb">AD SPACE???</div>
			</div>
	</div> <!--End of header-->
		<div id="mainnav">Main Navigation bar</div><!--End of main nav-->


	<div id="content" > this is...content
		<div id="navcol"  class="clearb" >Nav Col, Undecided. If used then main nav to be removed </div>

	</div> <!--End of content-->	


	<div id="footer"> Footer!</div><!--End of footer-->




</div><!--End of main page-->


</body>
</html>

I was writing this in notepad so....be gentle/

cssfreakie · April 16, 2011

i haven't got a lot of time, but something i noticed while looking at it:

your missing the:

<html>
<head>
    <title>steven</title>
</head>

Also

 margin-left: auto;
    margin-right: auto;
    width: 100%;

that makes no sense. aligning stuff in the center only works if the width is anything but 100%. It's the same as saying to an elephant that is as wide as the whole cage 'stand in the middle'.

Also the clear's you used are not needed.

stevengreen22 · April 16, 2011

msg recd nad understood about the margins.

also, removed the clears. I must've made a mistake at work, they were put in as the divs were staggered but just removed and they're fine...

glad that was all you picked up on though, on the right path.

Sign In

Mind checking this oh so basic layout for me?

Recommended Posts

stevengreen22

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

stevengreen22

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information