jkfriends Posted July 13, 2008 Share Posted July 13, 2008 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 More sharing options...
rzea Posted July 13, 2008 Share Posted July 13, 2008 After the fourth image DIV just type a <br /> OR include your text inside <p></p> tags. Link to comment Share on other sites More sharing options...
newceylon Posted July 13, 2008 Share Posted July 13, 2008 Simple and fast way is adding the <p> tag Link to comment Share on other sites More sharing options...
190319m9 Posted July 14, 2008 Share Posted July 14, 2008 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 More sharing options...
Synook Posted July 15, 2008 Share Posted July 15, 2008 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 More sharing options...
jkfriends Posted July 15, 2008 Author Share Posted July 15, 2008 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 More sharing options...
jlhaslip Posted July 18, 2008 Share Posted July 18, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.