Member Avatar for bryanhiehle

Hello,
So i need some help. i have currently been working on a website for a competition and i ran into a problem. I am using <div> tags and calling the id from the css. i have seperate id's classes and basic tag set up in CSS. the only problem is that i have ran into a current problem of having only the header div and left div tag appearing right, but not the body div tag. the body div tag sits on the bottom. I am using Microsoft Expression Web2 and tried moving them, but it came with a fixed attribute. i know that in the past the fixed attribute does not work with firefox and causes a mess if not set correctly. Would anyone know any way to help me out?

Here is my code:

/* Enter basic CSS for XHTML PAGE */
body {
	background: #FFFFFF;
	margin: 0px
	0px
	0px
	0px;
	}
	
			/* Enter ID for XHTML PAGE */
#DC-Header {
	background-color: #FF5B60;
	font-family: "Times New Roman", Times, serif;
	font-size: large;
	font-style: normal;
	letter-spacing: 3px;
	text-align: center; 
	height: 120px; 
}
#DC-Header-Img {
	text-align: left;
	width: auto;
	height: 120px;
	border: 0px;
	border-color: #FFFFFF;
	vertical-align: middle   
}
#DC-Left-Bar {
			/* Size and General attributes of the Left Bar */
	width: 150px;
	height:700px;
	position:relative ;
	left: -5px;  
	background-color: #ABF2F8; 
	padding-left: 10px; 
			/* Border Attributes */
	border-right: thin;
	border-right-color: #FF5050;
	border-right-style: solid ;
	border-right-width: thin ;  
}
#DC-Body {
	background-color: #FFFFFF ;
	position:relative ;
	width:700px;
	height:700px;
}

			/* Enter Classes for XHTML PAGE */
.Header-Font {
	text-align: center;
	font-family: "Times New Roman", Times, serif ;
	font-weight: lighter ;
	font-variant: normal;
	color: #000000;
	font-size: x-small ;
	position:relative;
	display: block;
}
.Left-Bar-Links {
					/* Font attributes */
	vertical-align: top ;
	text-align: left ;
	font: menu ;
	font-family: "Times New Roman", Times, serif ;
	color: #000000;
	font-size:medium ;
	font-weight: normal ;

}
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Washington D.C. Buissness Profesionals of America 2010</title>
<!-- Insert of CSS Document -->
<link rel="stylesheet" href="StyleSheets/styles.css" type="text/css" />
		<!-- End of CSS Document -->
</head>

<body>


		<!-- Insert Header -->
	<div id="DC-Header">
		<div id="DC-Header-Img" ><img src="tizagSugar.jpg" alt="Washington D.C. Banner" />
<font class="Header-Font">Washington D.C. BPA 2010</font>

		</div>
	</div>

		<!-- End of Header -->
		<!-- Begin of Left Bar -->
	<div id="DC-Left-Bar">
	<p class="Left-Bar-Links" ><a href="http://www.whitehouse.gov">Washington D.C.</a>	
	</p>
	</div>
		<!-- End of Left Bar -->
		<!-- Beging of main body -->
	<div id="DC-Body" style="left: 158px; top: -698px" >
	
	sadsad
	</div>
		<!--End of main Body -->
	

</body>

</html>

Any help will be greatful. I am currently competing in the Buisness Profesionals of america competition in high school. so this is still a learning process.

  • 2 Contributors
  • 4 Replies
  • 229 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

You can use absolute position property to move where you want. The relative position left the extra white space after it positioned. The absolute position doesn't left the white space and it can move exactly where you want. If it's parent has the position property of relative, it will calculate and position from it's parent. If not, it will calculate and position from the browser.

CSS:
#parent {
position: relative; width: 100%; height: 400px }
#child {
position: absolute; top: 50%; left: 50%; width: 200px; height: 200px }

HTML:
<div id="parent">
    <div id="child">It relative to its parent element and absolutely position from 50% of top and left.</div>
</div>

Sorry about for my English skill. I hope you will be ok.

Member Avatar for bryanhiehle

Thanks. I kind of understand what your saying, but i could never find a real explination. Like the only white space i get is in the DC-Header bottom and the DC-Left-Bar top. and when i tried putting the DC-Body in, it went to the very bottom of the pge

Member Avatar for ko ko

There is p element in your DC-Left-Bar, The p element has margin. So, you can break the margin property.

#DC-Left-Bar p {
margin: 0; }

Good Luck..

Member Avatar for ko ko

Never forget some block elements have their own margin and padding. Also headings and list-items have the default margin and padding. The margin and padding properties are depending on the browser types. So, you must always set the margin and padding values to the same result for all browsers. Sorry for my English skills.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.