Gamerz Posted December 9, 2009 Share Posted December 9, 2009 Okay...so here's what I'm trying to accomplish: ---------- [iMAGE ONE GOES HERE...........................] [iMAGE TWO GOES HERE...........................] [iMAGE THREE GOES HERE.....] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION...] [iMAGE FOUR GOES HERE...........................] [iMAGE FIVE GOES HERE...........................] [iMAGE SIX GOES HERE.....] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION HERE VIA BR TAG] [DESCRIPTION...] ---------- I've noticed the thing doesn't work...so I can't exactly use it to space out my images without going to next line. Basically, I want around around 3-6 images with text per row...how would I construct that? Quote Link to comment Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> <div class="image"> <img src="path/to/img.jpg" alt="image" /> <p>caption</p> </div> CSS: div.image { float:left; width:__px; // adjust this to the width of your images. } If you have more than three images showing up on one line, add a right margin to div.image until they space out enough to bump anything above three images down to the next row. Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 How do I make it to be in the middle (In other words, how can I make it float to the middle. I've tried float:none; but it then just only shows one image per row.) Quote Link to comment Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 You cannot center floated elements. The best you can do is give a width to the container they are in, and center that container. Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 How do I give a width to the container they are in and center it? Quote Link to comment Share on other sites More sharing options...
Gamerz Posted December 10, 2009 Author Share Posted December 10, 2009 Here's my code below...how do I add a width to the container they are in and center it? <html> <head> <style type="text/css"> div.image { margin-right: 0px; float:left; width:100px; // adjust this to the width of your images. } </style> </head> <body> <p> <div class="image"> <a href="lol.php"><img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"><img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> <div class="image"> <a href="lol.php"> <img src="folder_icon.jpg" alt="image" style="border: 0px dashed black;" width="50" height="50"/> <p>text</p></a> </div> </p> </body> </html> Quote Link to comment Share on other sites More sharing options...
FaT3oYCG Posted December 10, 2009 Share Posted December 10, 2009 A div is a box basically, go learn how to center a box! Quote Link to comment Share on other sites More sharing options...
haku Posted December 10, 2009 Share Posted December 10, 2009 First, you have your images inside a <p> tag. This is invalid code. You can't have div tags inside <p> tags. Change your p tag to a div tag, and give it an ID. Then target that ID in your CSS and set a width to it. To center it, you can use this: margin:0 auto; Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.