HTML and CSS RSS HTML and CSS RSS

Using Div Tags with CSS question

Reply

•
•
Join Date: Jun 2008
Posts: 6
Reputation: bryanhiehle is an unknown quantity at this point 
Solved Threads: 0
bryanhiehle bryanhiehle is offline Offline
Newbie Poster

Using Div Tags with CSS question

 
0
  #1
Oct 9th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 93
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 13
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
0
  #2
Oct 10th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 6
Reputation: bryanhiehle is an unknown quantity at this point 
Solved Threads: 0
bryanhiehle bryanhiehle is offline Offline
Newbie Poster
 
0
  #3
Oct 10th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 93
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 13
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
0
  #4
Oct 13th, 2009
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..
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 93
Reputation: Zero13 is an unknown quantity at this point 
Solved Threads: 13
Zero13 Zero13 is offline Offline
Junior Poster in Training
 
0
  #5
Oct 13th, 2009
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.
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
css, html

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



@param acid2 actionlistener ajax asp automation background beta body browser bug c++ calendar cart cgi changeable checkbox code css current design developer development doctype dom dreamweaver editor element explorer firefox form format functiontesting google gridview gui guidancer head hover html ide ie7 ie8 iframe include internet java javadoc javascript jlabel keyword layout marquee microsoft mysql navigationbars news opacity paging parameter perl photoshop php positioning post problem schools security shopping singleton source static studio tag test testautomation training ui unicode url validation vb vbulletin visual visualization w3c web webdesign website wysiwyg xhtml xml
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC