navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

Thumbnail Image layout

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> Thumbnail Image layout
Page: [1]
 
Avick

 

Posts: 181
From: Ireland
Status: offline

 
Thumbnail Image layout - 10/18/2006 11:01:58   
Thumbnail Image layout

Some time back I was looking through the forum for some new tricks and I came across a topic that shows how to display thumbnail images with text below in an even line (say 3 across and 3 down)

If the page was resized (made skinny) it would change the look to 2 across and 4 down and so on.

I figured it was a good trick but it’s unlikely I would use it.

Well guess what, that’s right I need it now. Any normal half witted person would have bookmarked it. Well as you can see from this post I am no normal half witted person. :)

Can anyone tell me where I can find the code in CSS to do this please!

It would be a great effect on the project I am working on.


Yours Sincerely
Anonymous :)


_____________________________

Alan
http://www.newebirl.net
Donkey

 

Posts: 3917
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
RE: Thumbnail Image layout - 10/18/2006 12:04:41   
I can't remember the link but this is a copy of the code I used based on that post.
CSS
/*This Div Goes Inside a container div which is sized as a percentage of the page*/
.thumbnail{
float: left;
width:136px;
background-color: transparent;
text-align: center;
padding: 0;
margin: 0 0.50% 0 0;
border: 0;
min-height: 172px;
}

/*Caption*/
div.accessory p{
text-align: center;
font: normal 0.7em Arial, Helvetica, sans-serif;
color: #F00; 
background-color: transparent;
text-decoration: none;
vertical-align:bottom;
padding: 0;
margin: 0;
line-height: 120%;
}




/*SMALL RED LINKS*/
a.rls{
font: normal 0.7em Arial, Helvetica, sans-serif; 
color: #F00;
text-decoration: none;
line-height: 120%;
 }

a.rls:link,
a.rls:visited,
a.rls:focus{
text-decoration: none;
}

a.rls:hover{
color: #000;
text-decoration: underline;
}

a.rls:active{
text-decoration: none;
color: #000;
}


HTML
<div class="thumbnail">
<a href="link if required">
<img src="path to your image"
alt="alt text"
title="title text" width="130" height="100" />
</a>	
<a class="rls" href="link if required">Your Caption</a> <!-- use <p> if no link required-->
</div>


You can change colours/sizes/padding etc to suit

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Avick)
Avick

 

Posts: 181
From: Ireland
Status: offline

 
RE: Thumbnail Image layout - 10/19/2006 5:06:22   
Hi Donkey,

I tried that code and I am just getting the images showing up in a line down the page.

I will try it again and see how I get on.

_____________________________

Alan
http://www.newebirl.net

(in reply to Donkey)
jaybee

 

Posts: 14191
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

 
RE: Thumbnail Image layout - 10/19/2006 7:26:16   
This will be the article I think. Peter's code comes from it.
http://alistapart.com/articles/practicalcss/

If all your images are lining up then check your DIVs and make sure each image is in it's own
<div class="thumbnail">image</div>
<div class="thumbnail">image</div>
the divs float next to each other. If you have all the images inside one div then they'll stack.

_____________________________

If it ain't broke..... fix it until it is.
:)

:)
GAWDS
Now where did I put that Doctype?

(in reply to Avick)
Avick

 

Posts: 181
From: Ireland
Status: offline

 
RE: Thumbnail Image layout - 10/19/2006 7:35:01   
I think thats it Jaybee, Thanks

Donkey,
I just loaded the box's and they are displaying as expected. you where right with the layout. Sorry about that. :)



_____________________________

Alan
http://www.newebirl.net

(in reply to jaybee)
Donkey

 

Posts: 3917
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

 
RE: Thumbnail Image layout - 10/19/2006 9:24:05   
No problem, glad it worked.

_____________________________

:)

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to Avick)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> Thumbnail Image layout
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts