starting a new row in css
im making a php album script. i want the viewalbum page to be totally css, xml, compliant and table-less! i can adjust the code however i needi guess, i just want it to make a good effect of 5 images per row. heres what i have so far, maybe there is just something i can add to the album_row stuff in the css. like i said i can change the actual html a bit if i need to, but just changing the css would be preferable!
<html>
<head>
<style type="text/css">
.album_image{
float: left;
text-align: center;
padding: 5px;
}
.album_image a{
color: red;
text-decoration: none;
}
.album_image a:hover{
color: red;
text-decoration: underline;
}
.album_row{
float: none;
}
img{
border: none;
}
</style>
</head>
<body>
<div class="album_row"></div>
<div class="album_row">
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />hooah</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//MICRO1280x1024.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/MICRO1280x1024.jpg' /><br />micro</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//programming.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/programming.jpg' /><br />i pwn n00bs</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test1</a></div>
</div><div class="album_row">
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test2</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test3</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//aoe.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/aoe.jpg' /><br />aoepwnsn00bs</a></div></div>
</body>
</html>
ty for help!I just have them all in one div, and set the width of the div and the padding/margins (can't remember which) of the images so they are spaced 5 per row automatically.
If you want to see an example, hit my creativity portfolio website @ <!-- m --><a class="postlink" href="http://creativity.the-engine.org">http://creativity.the-engine.org</a><!-- m --> - hit the digital_art section.
Hope that helps.grr, not the best idea cusi want the user to be able to change the number of pics per row along with the thumbnail sizes. the script to just add some stuff after every five pics (with captions) is really simple, so if there is any way by making this something a certain thing i can essentially put in a "row-break"?Well, I see 2 ways of doing this..
Having the user setting change the width of the containing div, or using <br />.
im making a php album script. i want the viewalbum page to be totally css, xml, compliant and table-less! i can adjust the code however i needi guess, i just want it to make a good effect of 5 images per row. heres what i have so far, maybe there is just something i can add to the album_row stuff in the css. like i said i can change the actual html a bit if i need to, but just changing the css would be preferable!
<html>
<head>
<style type="text/css">
.album_image{
float: left;
text-align: center;
padding: 5px;
}
.album_image a{
color: red;
text-decoration: none;
}
.album_image a:hover{
color: red;
text-decoration: underline;
}
.album_row{
float: none;
}
img{
border: none;
}
</style>
</head>
<body>
<div class="album_row"></div>
<div class="album_row">
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />hooah</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//MICRO1280x1024.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/MICRO1280x1024.jpg' /><br />micro</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//programming.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/programming.jpg' /><br />i pwn n00bs</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test1</a></div>
</div><div class="album_row">
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test2</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//graduation.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/graduation.jpg' /><br />test3</a></div>
<div class='album_image'><a href='http://www.webdeveloper.com/forum/archive/index.php/pics//aoe.jpg'><img src='http://www.webdeveloper.com/forum/archive/index.php/thumbs/aoe.jpg' /><br />aoepwnsn00bs</a></div></div>
</body>
</html>
ty for help!I just have them all in one div, and set the width of the div and the padding/margins (can't remember which) of the images so they are spaced 5 per row automatically.
If you want to see an example, hit my creativity portfolio website @ <!-- m --><a class="postlink" href="http://creativity.the-engine.org">http://creativity.the-engine.org</a><!-- m --> - hit the digital_art section.
Hope that helps.grr, not the best idea cusi want the user to be able to change the number of pics per row along with the thumbnail sizes. the script to just add some stuff after every five pics (with captions) is really simple, so if there is any way by making this something a certain thing i can essentially put in a "row-break"?Well, I see 2 ways of doing this..
Having the user setting change the width of the containing div, or using <br />.