Jump to content

CSS Gallery & Texts


jkfriends

Recommended Posts

Hi, I'm totally new to CSS programming.I'm currently building a page to show image gallery (just 3 images per row) and then followed by a paragraph. I found this example:http://www.w3schools.com/CSS/css_image_gallery.aspThis code works great. However when I start typing in my paragraph after images, the text appears next to the 4th image at the right instead of showing the text below.How do I display my paragraph correctly after the images in a row?Your help is much appreciated.Thanks, JK

Link to comment
Share on other sites

Well there is no need of using <p> or <br> tags. What you need is to properly nest div tag with desc class in div tag with img class. If you do this properly the output will be as in w3schools examples. :) Do you want a new text paragraph (not the description part) to come below the image rows? If yes then you will need to define some new div ids which ensure proper alignment of the content.

Link to comment
Share on other sites

If you already have enclosed the galley in a <p> tag then it's invalid to have another one, so you will have to use divisions.

Link to comment
Share on other sites

I have used <p></p> and <br/> but still no success yet.Here is the code that I tried:<html><head><style type="text/css">div.img{ margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center;} div.img img{ display: inline; margin: 3px; border: 1px solid #ffffff;}div.img a:hover img {border: 1px solid #0000ff;}div.desc{ text-align: center; font-weight: normal; width: 120px; margin: 2px;}div.jk{ float:left;}</style></head><body><div class="img"> <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a> <div class="desc">Add a description of the image here</div></div><div><br/>Happy Man</div></body></html>This code works only when I shrink the width of the browser so that the text "Happy Man" comes after all 4 images in a row. What I want is the line "Happy Man" always below these 4 images regardless of the width of the browser. Hope I'm clear in what I'm asking. Any help would be appreciated.Thanks, JK

Link to comment
Share on other sites

Please use the "code" bbcode to seperate your code lines from the message in your post.

.newline { clear:both;}...<div class="newline"><br/>Happy Man</div>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...