944,044 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Using Div Tags with CSS question
Ad:
Permalink
Oct 9th, 2009
0

Using Div Tags with CSS question

Expand Post »
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:

HTML and CSS Syntax (Toggle Plain Text)
  1.  			/* Enter basic CSS for XHTML PAGE */
  2. body {
  3. 	background: #FFFFFF;
  4. 	margin: 0px
  5. 	0px
  6. 	0px
  7. 	0px;
  8. 	}
  9.  
  10. 			/* Enter ID for XHTML PAGE */
  11. #DC-Header {
  12. 	background-color: #FF5B60;
  13. 	font-family: "Times New Roman", Times, serif;
  14. 	font-size: large;
  15. 	font-style: normal;
  16. 	letter-spacing: 3px;
  17. 	text-align: center; 
  18. 	height: 120px; 
  19. }
  20. #DC-Header-Img {
  21. 	text-align: left;
  22. 	width: auto;
  23. 	height: 120px;
  24. 	border: 0px;
  25. 	border-color: #FFFFFF;
  26. 	vertical-align: middle   
  27. }
  28. #DC-Left-Bar {
  29. 			/* Size and General attributes of the Left Bar */
  30. 	width: 150px;
  31. 	height:700px;
  32. 	position:relative ;
  33. 	left: -5px;  
  34. 	background-color: #ABF2F8; 
  35. 	padding-left: 10px; 
  36. 			/* Border Attributes */
  37. 	border-right: thin;
  38. 	border-right-color: #FF5050;
  39. 	border-right-style: solid ;
  40. 	border-right-width: thin ;  
  41. }
  42. #DC-Body {
  43. 	background-color: #FFFFFF ;
  44. 	position:relative ;
  45. 	width:700px;
  46. 	height:700px;
  47. }
  48.  
  49. 			/* Enter Classes for XHTML PAGE */
  50. .Header-Font {
  51. 	text-align: center;
  52. 	font-family: "Times New Roman", Times, serif ;
  53. 	font-weight: lighter ;
  54. 	font-variant: normal;
  55. 	color: #000000;
  56. 	font-size: x-small ;
  57. 	position:relative;
  58. 	display: block;
  59. }
  60. .Left-Bar-Links {
  61. 					/* Font attributes */
  62. 	vertical-align: top ;
  63. 	text-align: left ;
  64. 	font: menu ;
  65. 	font-family: "Times New Roman", Times, serif ;
  66. 	color: #000000;
  67. 	font-size:medium ;
  68. 	font-weight: normal ;
  69.  
  70. }

HTML and CSS Syntax (Toggle Plain Text)
  1.   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6. <title>Washington D.C. Buissness Profesionals of America 2010</title>
  7. <!-- Insert of CSS Document -->
  8. <link rel="stylesheet" href="StyleSheets/styles.css" type="text/css" />
  9. 		<!-- End of CSS Document -->
  10. </head>
  11.  
  12. <body>
  13.  
  14.  
  15. 		<!-- Insert Header -->
  16. 	<div id="DC-Header">
  17. 		<div id="DC-Header-Img" ><img src="tizagSugar.jpg" alt="Washington D.C. Banner" />
  18. <font class="Header-Font">Washington D.C. BPA 2010</font>
  19.  
  20. 		</div>
  21. 	</div>
  22.  
  23. 		<!-- End of Header -->
  24. 		<!-- Begin of Left Bar -->
  25. 	<div id="DC-Left-Bar">
  26. 	<p class="Left-Bar-Links" ><a href="http://www.whitehouse.gov">Washington D.C.</a>	
  27. 	</p>
  28. 	</div>
  29. 		<!-- End of Left Bar -->
  30. 		<!-- Beging of main body -->
  31. 	<div id="DC-Body" style="left: 158px; top: -698px" >
  32.  
  33. 	sadsad
  34. 	</div>
  35. 		<!--End of main Body -->
  36.  
  37.  
  38. </body>
  39.  
  40. </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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bryanhiehle is offline Offline
7 posts
since Jun 2008
Permalink
Oct 10th, 2009
0
Re: Using Div Tags with CSS question
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.
HTML and CSS Syntax (Toggle Plain Text)
  1. CSS:
  2. #parent {
  3. position: relative; width: 100%; height: 400px }
  4. #child {
  5. position: absolute; top: 50%; left: 50%; width: 200px; height: 200px }
  6.  
  7. HTML:
  8. <div id="parent">
  9.     <div id="child">It relative to its parent element and absolutely position from 50% of top and left.</div>
  10. </div>

Sorry about for my English skill. I hope you will be ok.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Oct 10th, 2009
0
Re: Using Div Tags with CSS question
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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bryanhiehle is offline Offline
7 posts
since Jun 2008
Permalink
Oct 13th, 2009
0
Re: Using Div Tags with CSS question
There is p element in your DC-Left-Bar, The p element has margin. So, you can break the margin property.
HTML and CSS Syntax (Toggle Plain Text)
  1. #DC-Left-Bar p {
  2. margin: 0; }
Good Luck..
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009
Permalink
Oct 13th, 2009
0
Re: Using Div Tags with CSS question
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.
Reputation Points: 120
Solved Threads: 133
Practically a Master Poster
Zero13 is offline Offline
620 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Help creating div for drag and drop
Next Thread in HTML and CSS Forum Timeline: <td nowrap="nowrap" /> is not working in IE8


Tags
css, html



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC