Jump to content

Problem With Container Head Text


Norman
 Share

Recommended Posts

Hello, I have a little problem. I'm trying to put two of these boxes toghether..http://infectthesystem.com/2008/20-free-css-containers/But I get a problem with the text on the head:http://img692.imageshack.us/img692/912/64879041.jpgThis is my current code..HTML:

<!-- Container Verde --><div class="container_verde">								<div class="container_verde_head">				<img src="images/container_verde/sidebar_left.jpg" alt="" class="verde_float_left"/>				<img src="images/container_verde/sidebar_right.jpg" alt="" class="verde_float_right"/>				<div class="container_verde_head_text">				Text				</div>				</div>				<div class="container_verde_content">				<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />				<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna.  </p>		<div style="clear: both"></div>						</div>		</div><!-- //////////// --><!-- Container Blu --><div class="container_blu">								<div class="container_blu_head">				<img src="images/container_blu/sidebar_left.jpg" alt="" class="blu_float_left"/>				<img src="images/container_blu/sidebar_right.jpg" alt="" class="blu_float_right"/>				<div class="container_blu_head_text">				Text				</div>				</div>				<div class="container_blu_content">				<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />				<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna.  </p>		<div style="clear: both"></div>						</div>		</div><!-- ////////// -->

CSS:

<!-- Container Verde -->	<!--.verde_float_left {float:left;}.verde_float_right {float:right;}.container_verde {margin: 10px 80px 10px 80px;}.container_verde_head {height:30px;background-image:url(images/container_verde/sidebar_center.jpg);}.container_verde_head_text {height:23px;padding:7px 0 0 0;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:16px;font-weight:bold;}.container_verde_content {font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:5px;color:#666666;border-width: 1px 1px 1px 1px;border-spacing: 0px;border-style: none solid solid solid;border-color: #74AB05;}<!-- //////// --><!-- Container Blu -->	<!--.blu_float_left {float:left;}.blu_float_right {float:right;}.container_blu {margin: 10px 80px 10px 80px;}.container_blu_head {height:30px;background-image:url(images/container_blu/sidebar_center.jpg);}.container_blu_head_text {height:23px;padding:7px 0 0 0;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:16px;font-weight:bold;}.container_blu_content {font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:5px;color:#666666;border-width: 1px 1px 1px 1px;border-spacing: 0px;border-style: none solid solid solid;border-color: #3E93F0;}<!-- //////// -->

Any help is appreciated. :)

Link to comment
Share on other sites

weird, i could have sworn i posted to this. Well, first off (again for me) you can't have those comments in your CSS. Use /* .... */Also, I compared your style to the styles you would have gotten from the page with all the examples, and I noticed that you have a bunch of margin settings for your container_verde and container_blu where they just have a width attribute in the examples.

Edited by thescientist
Link to comment
Share on other sites

that's a pretty crappy way of making a box.As your boxes are fixed width you don't need the header image to be sliced into several images, you just need one.Take the one complete image and use css background-image on a heading such as h2 and in that h2 element write your text.

Link to comment
Share on other sites

you have not include the float left ref .verde_float_left, .blu_float_left {float:left;}Edit: when i checked using firebug the above was not listed, but when i actually i checked the css file, you had included the above, but the html commenting you had used cancelled these out! so remove these html comments and problem solved!

Edited by dsonesuk
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...