stevengreen22 Posted April 16, 2011 Share Posted 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/ Link to comment https://forums.phpfreaks.com/topic/233893-mind-checking-this-oh-so-basic-layout-for-me/ Share on other sites More sharing options...
cssfreakie Posted April 16, 2011 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/233893-mind-checking-this-oh-so-basic-layout-for-me/#findComment-1202405 Share on other sites More sharing options...
stevengreen22 Posted April 16, 2011 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/233893-mind-checking-this-oh-so-basic-layout-for-me/#findComment-1202408 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.