Jump to content

Not Aligning Correctly


Kadafi420
 Share

Recommended Posts

I just started learning CSS however I am having a couple problems. Nothing is aligning correctly. Here is my code:HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>Untitled Document</title><link rel="stylesheet" href="style.css" type="text/css" /><link rel="icon" href="/favicon.ico" type="image/x-icon" /></head><body><div class="hdr">  <div id="body">		<div id="hdrbl"></div>		<div id="hdrbm">			<div id="hlogo">My logo here</div>			<div id="hads">Google ads here</div>		</div>		<div id="hdrbr"></div>	</div></div><div class="nav">	<div id="body">		<div id="navl"></div>		<div id="navm">			<div id="nhl1">Text Here</div>			<div id="nhl2">Text Here</div>			<div id="nhl3">Text Here</div>		</div>		<div id="navr"></div>	</div></div><div class="bnc">	<div id="body">		<div id="bnc1"></div>		<div id="bncm"></div>		<div id="bncr"></div>	</div></div><div class="mpb">	<div id="body">		<div id="mpb1"></div>		<div id="mpbm">			<div id="mpbbl">Left Bar</div>			<div id="mpbbr">Middle Page Content</div>  		</div>		<div id="mpbr"></div>	</div></div><div class="btb">	<div id="body">		<div id="btb1"></div>		<div id="btbm"></div>		<div id="btbr"></div>	</div></div><div class="bfb">	<div id="body">		<div id="bfb1"></div>		<div id="bfbm">			<div id="fcopy">Blah Blah copyright here</div>		</div>		<div id="bfbr"></div>	</div></div></body></html>

CSS:

body {	background: #012853;	color: #C1C1C1;	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;	margin: 10px 10px 10px 10px;	padding: 0px;}.hdr #body { /* Overall body for the header */	padding: 0;	height: 104px;}.hdr #hdrbl { /* Header left image */	background-image: url(images/style/img_01.gif);	width: 82px;	height: 104px;	float: left;}.hdr #hdrbm { /* Header middle background */	background-image: url(images/style/img_03.gif);	background-repeat: repeat;	height: 104px;	width: auto;}.hdr #hdrbr { /* Header right image */	background-image: url(images/style/img_02.gif);	width: 86px;	height: 104px;	float: right;}.hdr #hlogo { /* Header logo */	padding: 0;	height: 104px;}.hdr #hads { /* Header right ads */	float: right;}.nav #body {	padding: 0;}.nav #navl {	background-image: url(images/style/img_04.gif);	height: 24px;	width: 25px;	float: left;}.nav #navm {	background-image: url(images/style/img_17.gif);	background-repeat: repeat;	height: 24px;	width: auto;}.nav #navr {	background-image: url(images/style/img_05.gif);	height: 24px;	width: 25px;	float: right;}.nav #hnl1 { /* Header navigation links left */	float: left;}.nav #hnl2 { /* Header navigation links middle */	float: inherit;}.nav #hn13 { /* Header navigation links right */	float: right;}.bnc #body {	padding: 0;}.bnc #nbncl {	background-image: url(images/style/img_06.gif);	height: 25px;	width: 19px;	float: left;}.bnc #bncm {	background-image: url(images/style/img_08.gif);	background-repeat: repeat;	height: 19px;	width: auto;}.bnc #bncr {	background-image: url(images/style/img_07.gif);	height: 19px;	width: 25px;	float: right;}.mpb #body {	padding: 0px;}.mpb #mpbl {	background-image: url(images/style/img_09.gif);	width: 25px;	height: 400px;}.mpb #mpbm {	background-color: #000000;}.mpb #mpbr {	background-image: url(images/style/img_10.gif);	width: 25px;	height: 400px;}.btb #body {	padding: 0px;}.btb #btbl {	background-image: url(images/style/img_11.gif);	width: 25px;	height: 23px;}.btb #btbm {	background-image: url(images/style/img_13.gif);	height: 23px;	width: auto;}.btb #btbr {	background-image: url(images/style/img_10.gif);	width: 25px;	height: 23px;}.bfb #body {	padding: 0px;}.bfb #bfbl {	background-image: url(images/style/img_14.gif);	width: 35px;	height: 36px;}.bfb #bfbm {	background-image: url(images/style/img_13.gif);	height: 36px;	width: auto;}.bfb #bfbr {	background-image: url(images/style/img_10.gif);	width: 31px;	height: 36px;}

Preview:http://dev.bbhosting.org/test1/This is what it should look like:http://dev.bbhosting.org/test2/The second link is all html and out of date, i really want to learn how to properly do this css. Could someone fix what I did or tell me how to fix or show me my mistakes?

Link to comment
Share on other sites

First thing's first: you have two divs with id="body". Ids are unique and should only be used once. Set a class called body, if you want, and use the .body selector. Using the name body isn't that great an idea, because body is a valid CSS selector and you'll get confused. Next, don't use so many divs. There are lots of elements, use them semantically. If you have text you want to style, put it in paragraph <p> tags. The paragraph is a block level element, and will style the same as a div. If you want the paragraphs in a certain div to look a certain way, access them using the proper selectors: say you have a <div id="main"> div where the main content will go, and you want all text in the main section to be maroon color, you select the main text like this: #main p { color: maroon;} If you want one certain paragraph to have special styling, give it an id or a class (class means you can reuse that styling again on the same page). If you want one portion of a paragraph to have different styling, use <span> </span> around it.Give your divs better, fuller names. You may spend a few seconds longer typing them out, but it's easier to remember what they're for.The main reason for using fewer divs is: elements can all be styled without one, so it's unnecessarily complicated and messy and people with accessibility problems (e.g. who are blind or have to navigate using a method clumsier than the mouse/pgdown/pgup buttons, have to work their way through a tedious and meaningless list of divs to get to the content. The closer your content is to the top of the document, and the fewer elements you have to go through to get to it, the better.Edit: oh, and using a transactional doctype means that browsers will display your code very differently...you want to use a strict doctype instead, which will get greater compliance.

Edited by chibineku
Link to comment
Share on other sites

The header layout should be like this, and this layout method can be used for the rest of page areas (with width adjustments)<div class="hdr"> <div id="body"> <div id="hdrbl"> <div id="hlogo">My logo here</div> </div> <div id="hdrbm"></div> <div id="hdrbr"> <div id="hads">Google ads here</div> </div> </div></div>and here is the css coding.hdr {width:100%;}.hdr #body { /* Overall body for the header */ padding: 0; height: 104px; width: 980px}.hdr #hdrbl { /* Header left image */ background-image: url(images/style/img_01.gif); width: 82px; height: 104px; float: left;}.hdr #hdrbm { /* Header middle background */ background-image: url(images/style/img_03.gif); background-repeat: repeat; height: 104px; width: 812px; float: left;}.hdr #hdrbr { /* Header right image */ background-image: url(images/style/img_02.gif); width: 86px; height: 104px; float: right;}.hdr #hlogo { /* Header logo */ padding: 30px; height: 104px;}.hdr #hads { /* Header right ads */ float: right; padding: 30px; height: 104px;}

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
 Share

×
×
  • Create New...