Need another line of text under image

[crmamx]

I am creating a thumbnail photo album.

<?php

?>
  <style type="text/css">
.thumbnail
{
float: left;
width: 80px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 3px;
}

  </style>
<p>Members Photo Album</p>
<!-- =========================== Row 1 ================================== -->
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Member
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div> 
<!-- <br class="clearboth"> Clear and start new row -->
<br class="clearboth">
<!-- =========================== Row 2 ================================== -->
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Member
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>
<div class="thumbnail">
<img src="Pictures_Members/curtis.jpg" alt="" width="80" height="80"><br>
Caption
</div>

 

The sizing and everything is just like I want it on the image. But there are not enough characters allowed for the image name. If I exceed it, the name then takes up 2 lines and it screws up the whole layout. I don't want to increase width because then it looks like crap.

 

How can I get 2 lines to display under the image for image name without messing up the whole layout?

[cssfreakie]

small tip aside try to put any text within tags . Right now your text is just sitting in a div (without a <p> or <span> or anything else), which makes it hard to target. Btw watch your <br> tag I am pretty sure you use a strict doctype. so it's <br />)

 

Anyway for your question i think you should consider the following:

how can I make multiple objects float next to each other (even if they have contents). If you think float, you should think about a block elements.

 

Have a look at the image. and answer the following.

What do you think will change or stay the same the width or the height of the div? (or maybe even both)

How would we align the inner content of the div?

Would apply that alignment style to the div or to each element within? (hmm to each sounds redundant)

 

Post me  the answers and i'll adjust it for you

practise makes perfect.

 

 

 

[attachment deleted by admin]

[cssfreakie]

a sample of what i mean can be found here: http://cssfreakie.webege.com/monkeybook.php adjust the window size to see the power of floats.

but please answer the questions and i'll provide the code if still needed. (but ones you answered it it should be a piece of cake)

[crmamx]

small tip aside try to put any text within tags . Right now your text is just sitting in a div (without a <p> or <span> or anything else), which makes it hard to target. Btw watch your <br> tag I am pretty sure you use a strict doctype. so it's <br />)

The code is from SelecTutorial to which I was referred by a developer and would expect to be correct.

 

Never mind, I got it to work using span.

 

I would mark this solved but the button disappeared.

[cssfreakie]

Hi crmamx,

 

Good you made it to work, too bad though that you did not took the effort to post the answers because that would  help in figuring this out yourself. And if code is correct or not depends on the situation. Just assuming something is a tutorial and thereby good is the same as assuming any car is able to transport you. That developer that referred to it was me btw (no shit ..)

 

if interested i wrote a little article with minor comments (how and why).

http://cssfreakie.blogspot.com/2011/03/making-photobook-layout-with-float.html

[crmamx]

Hi crmamx,

 

Good you made it to work, too bad though that you did not took the effort to post the answers because that would  help in figuring this out yourself

 

<div class="thumbnail">
<img src="Pictures_Members/tn_default.png" alt="" width="80" height="80"><br />
<span>Chris</span><br />
<span>Archie</span>
</div>

I just added to span lines and right or wrong, it works.

[cssfreakie]

Yeah i saw it works. and apart from the missing end tag of <img>. it's also correct.

 

all html elements when using a xhtml doctype require an endtag.

<img src="image.jpg" alt=" " />

anyways good job, it looks nice on your site. You can do the same technique on the text that that sits between images.