New at coding and stuck - DevHunters.com l Webmaster Forum - Web Advertising - Web Design

KaoS · 12-27-2007, 05:05 PM

Like the title says. im new at this. i know the very basics to get me by but on this im stuck. As you can see on the attached file that the background isnt wrapping around the thumbnails. I need to know how to fix it or if i did something wrong.

CSS Block:

Code:

#wrapper{
background:#222;
border-top:#222 10px solid;
border-bottom:#222 10px solid;
width: 652px;
margin-bottom:25px;
}
#text_area{
background:#151515;
border:#000 1px solid;
padding:10px;
margin:10px;
text-align:left;
}
.thumbnail{
padding: 7px;
border: 1px solid #ddd;
float: left;
margin-right: 10px;
margin-bottom: 15px;
}	
.caption{ 
font-size: 0.9em; 
padding-top: 0.2em ;	
}

HTML Block:

HTML Code:

div align="center">
	<div id="wrapper">
		<div id="text_area">
		
<h3><img src="img/tag_blue.png"/> Signatures!</h3>
			<div class="thumbnail">
			<a href="img/sig/behindthemask.png" rel="lightbox"><img src="img/sig/behindthemask.gif" width="150" height="75" alt="Behind The Mask" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/behindthemask.png" rel="lightbox">View Full Image</a>
				</div>
			</div>
			<div class="thumbnail">
			<a href="img/sig/taggedBW.png" rel="lightbox"><img src="img/sig/tagged.gif" width="150" height="75" alt="Tagged" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/taggedBW.png" rel="lightbox">View Full Image</a>
				</div>
			</div>
			<div class="thumbnail">
			<a href="img/sig/laidback.png" rel="lightbox"><img src="img/sig/laidback.gif" width="150" height="75" alt="laidback" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/laidback.png" rel="lightbox">View Full Image</a>
				</div>
			</div>
		
		</div>
	</div>
</div>

weblord · 12-27-2007, 07:17 PM

thanks for posting, im sure someone from here will help you out.

KaoS · 12-31-2007, 12:07 AM

Nevermind on this. I put the thumbnails in tables and it fixed it. Thanks anyways/

Toicantien · 04-08-2008, 05:05 PM

Looking at your original code, all you needed to add is another DIV below the thumbnails with the clear: both; property and value applied to it. Floated elements do not take up space when nested in block elements.

Code:

<div class="thumbnail">
			<a href="img/sig/behindthemask.png" rel="lightbox"><img src="img/sig/behindthemask.gif" width="150" height="75" alt="Behind The Mask" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/behindthemask.png" rel="lightbox">View Full Image</a>
				</div>
			</div>
			<div class="thumbnail">
			<a href="img/sig/taggedBW.png" rel="lightbox"><img src="img/sig/tagged.gif" width="150" height="75" alt="Tagged" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/taggedBW.png" rel="lightbox">View Full Image</a>
				</div>
			</div>
			<div class="thumbnail">
			<a href="img/sig/laidback.png" rel="lightbox"><img src="img/sig/laidback.gif" width="150" height="75" alt="laidback" /></a>
				<div class="caption">
				<img src="img/photo.png" width='16' height='16' alt="" /><a href="img/sig/laidback.png" rel="lightbox">View Full Image</a>
				</div>
			<br style="clear:both;">

Hunter1 · 04-08-2008, 05:51 PM

Quote:

Originally Posted by Toicantien

Looking at your original code, all you needed to add is another DIV below the thumbnails[/code]

yep yep! I totally agree

Nice work spotting that!

SpOrTsDuDe.Reese · 04-09-2008, 06:18 AM

I think he has figured it out in 4-5 months ;o.

Quote:

Quote:
Originally Posted by Toicantien
Looking at your original code, all you needed to add is another DIV below the thumbnails

I noticed that too.

clear:both; is used to separate elements with this from floated elements.

Toicantien · 04-09-2008, 09:00 AM

Better late then never, eh? It might not have helped him with this problem, but may answer questions in the future.

Have A Look At Some Of Our Webmaster Related Sponsors!
Script Directory	Advertise Here	Market Leverage	Free Templates	3D Guide-characters	Advertise Here

12-27-2007, 07:17 PM	#2 (permalink)
weblord Sharp Shooter Join Date: Mar 2007 Location: Philippines Posts: 1,324 iTrader: 1 / 100% Hunter Bux: 611.00	thanks for posting, im sure someone from here will help you out. __________________ Software \| William R. Nabaza Blogs \| U.S.$5 Domains \| FriendTEK \| Arcontica \| Maypajo\| www.sendload.net \| Forums\| Unfolds Videos \| WebTor\| Url Shortener\| 25%discount\| Free Hosting Blogs\| \| Web Directory\| Weblord's Community\| Freebies\| Cash Surf \| Funny Jokes \| www.bloghaven.org \| Videos \| Videos

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

12-31-2007, 12:07 AM	#3 (permalink)
KaoS New Hunter Join Date: Dec 2007 Posts: 8 iTrader: 0 / 0% Hunter Bux: 0	Nevermind on this. I put the thumbnails in tables and it fixed it. Thanks anyways/

04-09-2008, 09:00 AM	#7 (permalink)
Toicantien New Hunter Join Date: Jan 2008 Posts: 14 iTrader: 0 / 0% Hunter Bux: 0	Better late then never, eh? It might not have helped him with this problem, but may answer questions in the future.