HTML and CSS RSS HTML and CSS RSS

CSS Div help needed

Thread Solved

•
•
Join Date: May 2004
Posts: 102
Reputation: kained is an unknown quantity at this point 
Solved Threads: 0
kained kained is offline Offline
Junior Poster

CSS Div help needed

 
0
  #1
Jun 7th, 2008
I have a problem with my CSS somewhere. Basicly if i have too much writing in the content div the wording goes under my purple borders rather then moving the borders down to compensate. What have i done wrong? Fairly sure it will be something very obvious!

css Syntax (Toggle Plain Text) 
  1. body {
  2. 	text-align: center;
  3. 	min-width: 760px;
  4. 	background: #000000;
  5. }
  6.  
  7. div#wrapper {
  8. 		margin: 0 auto;
  9. 		margin-top: 100px;
  10. 		border: 1px solid #47027B;
  11. 		width: 760px;
  12. 		background: #00000 ;
  13. 		background-position: bottom right;
  14. 		background-repeat: no-repeat;
  15.  
  16. }
  17.  
  18. html>body div#wrapper {
  19. 		height: 100%;
  20. 		min-height: 600px;
  21.  
  22.  
  23.  
  24. }
  25.  
  26. div#logo {
  27. 		float: left;
  28. 		height: 410px;
  29. 		position: relative;
  30. 		top: -10px;
  31.  
  32. 		margin-bottom: -10px;
  33.  
  34.  
  35. 			width: 150px;
  36. 		border-right: 1px solid #47027B;
  37. 		border-bottom: 1px solid #47027B;
  38. 		background: #FFFFF url('images/logo.gif');
  39. 		background-position: center;
  40. 		background-repeat: no-repeat;
  41. }
  42.  
  43. html>body div#logo {
  44. 		height: 100%;
  45. 		min-height: 394px;
  46. }
  47. h1 {
  48. 		color: #E0C480;
  49. 		font-size: 18px;
  50. 		font-weight: bolder;
  51. }
  52.  
  53. h2 {
  54. 		color: #E0C480;
  55. 		font-size: 14px;
  56. 		font-weight: bold;
  57. }
  58.  
  59. b {
  60. 		color: #E0C480;
  61. 		font-weight: bolder;
  62. }
  63. p {
  64. 	color:#FFFFFF;
  65. 	font-weight:bold;
  66. 	}
  67.  
  68. div#footer {
  69. 		width: 760px;
  70. 		clear: both;
  71. 		margin: 0 auto;
  72. 		font-family: trebuchet ms,arial,verdana;
  73. 		font-size: 8pt;
  74. 		font-weight: normal;
  75. 		color: #00000;
  76. 		letter-spacing: 1.1pt;
  77. 		padding-top: 20px;
  78. 		text-align: right;
  79. }
  80.  
  81. div#footer A {
  82. 		color: #00000;
  83. 		font-weight: normal;
  84. 		text-decoration: none;
  85. 		text-transform: uppercase;
  86. }
  87.  
  88. div#footer a:hover {
  89. 		text-decoration: underline;
  90. }
  91.  
  92.  
  93. div#content a {
  94. 		color: #ffffff;
  95. 		font-weight: bold;
  96. 		text-decoration: underline;
  97. }
  98.  
  99. div#content a:hover {
  100. 		text-decoration: underline;
  101. }
  102.  
  103.  
  104.  
  105. div#content {
  106. 		text-align: left;
  107. 		padding: 15px 150px 15px 15px;
  108. 		float: right;
  109. 		width: 400px;
  110. 		height: 100%;
  111. 		font-family: trebuchet ms,arial,verdana;
  112. 		font-size: 9pt;
  113. 		font-weight: normal;
  114. 		color: #00000;
  115. }
  116.  
  117. html>body div#content {
  118. 		min-height: 500px;
  119. 		height: 100%;
  120. }
  121.  
  122. div#topbar {
  123. 		height: 75px;
  124. 		font-family: trebuchet ms,arial,verdana;
  125. 		font-size: 8pt;
  126. 		font-weight: normal;
  127. 		text-align: left;
  128. 		padding-left: 25px;
  129. 		padding-top: 10px;
  130. 		color: #FFFFFF;
  131. 		letter-spacing: 1.1pt;
  132. 		border-bottom: 1px solid #47027B;
  133. 		clear: left;
  134. }
  135.  
  136. div#menu {
  137. 		float: right;
  138. 		width: 760px;
  139. }
  140.  
  141. div#menu A {
  142. 		display: block;
  143. 		width: 225px;
  144. 		position: relative;
  145. 		left:0px;
  146. 		top: -10px;
  147. 		z-index: 50;
  148. 		float: left;
  149. 		border: 1px solid #000000;
  150. 		height: 25px;
  151. 		background: #D4D0c8 url('images/arrow.gif'); 
  152. 		background-position: center left;
  153. 		background-repeat: no-repeat;
  154. 		font-family: trebuchet ms,arial,verdana;
  155. 		text-align: center;
  156. 		font-size: 14px;
  157. 		text-decoration: none;
  158. 		padding-right: 10px;
  159. 		padding-top: 3px;
  160. 		font-weight: bold;
  161. 		color: #00000;
  162. 		text-transform: uppercase;
  163. }
  164.  
  165. div#menu a:hover {
  166. 		background: #423433 url('images/arrow.gif');
  167. 		background-position: center left;
  168. 		background-repeat: no-repeat;
  169. 		color: #c7c2cb;
  170. }
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2004
Posts: 102
Reputation: kained is an unknown quantity at this point 
Solved Threads: 0
kained kained is offline Offline
Junior Poster

Re: CSS Div help needed

 
0
  #2
Jun 9th, 2008
ooops forgot to put a link to the page
http://intweb.tech.bcuc.ac.uk/~20318219/deviant/cv.html
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: CSS Div help needed

 
0
  #3
Jun 9th, 2008
which one style use for that div tag
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2004
Posts: 102
Reputation: kained is an unknown quantity at this point 
Solved Threads: 0
kained kained is offline Offline
Junior Poster

Re: CSS Div help needed

 
0
  #4
Jun 9th, 2008
what?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 211
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 18
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: CSS Div help needed

 
0
  #5
Jun 9th, 2008
Hi Kained,

Simple.

Change the content height attribute to:
height: auto;

Should work. If it doesnt. Let me know. Will look into it further

Regards,
Last edited by macneato; Jun 9th, 2008 at 8:02 am. Reason: typo
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2004
Posts: 102
Reputation: kained is an unknown quantity at this point 
Solved Threads: 0
kained kained is offline Offline
Junior Poster

Re: CSS Div help needed

 
0
  #6
Jun 9th, 2008
tried that it didn't work.

I removed all the height and min height tags and the right hand side float in the content div.

HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. 	text-align: center;
  3. 	min-width: 760px;
  4. 	background: #000000;
  5. }
  6.  
  7. div#wrapper {
  8. 		margin: 100px auto 0;
  9. 		border: 1px solid #47027B;
  10. 		width: 760px;
  11. 		background: #00000 ;
  12.  
  13. }
  14.  
  15. html>body div#wrapper {
  16. 				min-height: 600px;
  17.  
  18.  
  19.  
  20. }
  21.  
  22. div#logo {
  23. 		float: left;
  24. 		height: 410px;
  25. 		position: relative;
  26. 		top: -10px;
  27.  
  28. 		margin-bottom: -10px;
  29.  
  30.  
  31. 			width: 150px;
  32. 		border-right: 1px solid #47027B;
  33. 		border-bottom: 1px solid #47027B;
  34. 		background: #FFFFF;
  35. 		background:url('images/logo.gif');
  36. 		background-position: center;
  37. 		background-repeat: no-repeat;
  38. }
  39.  
  40.  
  41. h1 {
  42. 		color: #E0C480;
  43. 		font-size: 18px;
  44. 		font-weight: bolder;
  45. }
  46.  
  47. h2 {
  48. 		color: #E0C480;
  49. 		font-size: 14px;
  50. 		font-weight: bold;
  51. }
  52.  
  53. b {
  54. 		color: #E0C480;
  55. 		font-weight: bolder;
  56. }
  57. p {
  58. 	color:#FFFFFF;
  59. 	font-weight:bold;
  60. 	}
  61.  
  62. div#footer {
  63. 		width: 760px;
  64. 		clear: both;
  65. 		margin: 0 auto;
  66. 		font-family: trebuchet ms,arial,verdana;
  67. 		font-size: 8pt;
  68. 		font-weight: normal;
  69. 		color: #00000;
  70. 		letter-spacing: 1.1pt;
  71. 		padding-top: 20px;
  72. 		text-align: right;
  73. }
  74.  
  75. div#footer A {
  76. 		color: #00000;
  77. 		font-weight: normal;
  78. 		text-decoration: none;
  79. 		text-transform: uppercase;
  80. }
  81.  
  82. div#footer a:hover {
  83. 		text-decoration: underline;
  84. }
  85.  
  86.  
  87. div#content a {
  88. 		color: #ffffff;
  89. 		font-weight: bold;
  90. 		text-decoration: underline;
  91. }
  92.  
  93. div#content a:hover {
  94. 		text-decoration: underline;
  95. }
  96.  
  97.  
  98.  
  99. div#content {
  100. 		text-align: left;
  101. 		padding: 25px 25px 25px 200px;
  102. 		width: 400px;
  103. 		font-family: trebuchet ms,arial,verdana;
  104. 		font-size: 9pt;
  105. 		font-weight: normal;
  106. 		color: #00000;
  107. }
  108.  
  109.  
  110.  
  111. div#topbar {
  112. 		height: 75px;
  113. 		font-family: trebuchet ms,arial,verdana;
  114. 		font-size: 8pt;
  115. 		font-weight: normal;
  116. 		text-align: left;
  117. 		padding-left: 25px;
  118. 		padding-top: 10px;
  119. 		color: #FFFFFF;
  120. 		letter-spacing: 1.1pt;
  121. 		border-bottom: 1px solid #47027B;
  122. 		clear: left;
  123. }
  124.  
  125. div#menu {
  126. 		float: right;
  127. 		width: 760px;
  128. }
  129.  
  130. div#menu A {
  131. 		display: block;
  132. 		width: 225px;
  133. 		position: relative;
  134. 		left:0px;
  135. 		top: -10px;
  136. 		z-index: 50;
  137. 		float: left;
  138. 		border: 1px solid #000000;
  139. 		height: 25px;
  140. 		background: #D4D0c8 url('images/arrow.gif'); 
  141. 		background-position: center left;
  142. 		background-repeat: no-repeat;
  143. 		font-family: trebuchet ms,arial,verdana;
  144. 		text-align: center;
  145. 		font-size: 14px;
  146. 		text-decoration: none;
  147. 		padding-right: 10px;
  148. 		padding-top: 3px;
  149. 		font-weight: bold;
  150. 		color: #00000;
  151. 		text-transform: uppercase;
  152. }
  153.  
  154. div#menu a:hover {
  155. 		background: #423433 url('images/arrow.gif');
  156. 		background-position: center left;
  157. 		background-repeat: no-repeat;
  158. 		color: #c7c2cb;
  159. }

sorted!
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



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



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC