xenon2050 Posted October 19, 2007 Share Posted October 19, 2007 What is a good way to align images without using tables? I'm trying to make a website where I don't have a big dependence on tables because I think using CSS is the way to go. Basically what I'm trying to do with CSS is take 6 thumbnails put three in one row three in another and have them be center in the CSS frame they are in. Here is the site if anyone wants to take a look. http://www.hanle-productions.com/gallery.php Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 19, 2007 Share Posted October 19, 2007 First of all your code is a nightmare. - It has no doctype, see - http://www.w3.org/QA/2002/04/valid-dtd-list.html - It has multiple <html>, <head> and <body> tags littered all over the place - It has <link> and <style> tags outside of the head. - It has non-existent tags like </img> - It has unnecessary inline styles You need to fix the whole thing and then check that your html and css is valid by using the w3c validators - http://www.w3.org/QA/Tools/ It should look more like this, and all styles, positions, indentation, etc should be handled in the stylesheet file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>hanle productions</title> <meta name="description" content=""> <meta name="keywords" content="photograph, photos, images, studio, hanle, photo production"> <link rel="stylesheet" href="rulestest.css" type="text/css"> <script type="text/javaScript" src="replacement.js"></script> </head> <body> <div id="container"> <div id="header"><img src="images/shoeheader.jpg" alt="header"></div> <div id="content"> <h1>Gallery:</h1> <p>Click one of the below links to enter the gallery:</p> <ul> <li><a href="benliz.php">Ben and Liz</a></li> <li><a href="christensens.php">Christensens</a></li> <li><a href="jess.php">Jess</a></li> <li><a href="shalin.php">Shalin</a></li> <li><a href="carissa.php">Carissa</a></li> <li><a href="petepaula.php">Pete and Paula</a></li> <li><a href="rebeccatony.php">Rebecca and Tony</a></li> </ul> </div> <div id="right"> <h2>Hanle Productions Info:</h2> <ul> <li><a href="http://www.hanle-productions.com/main.php">home</a></li> <li><a href="about.php">about</a></li> <li><a href="gallery.php">gallery</a></li> <li><a href="heartandsoul.php">heart and soul</a></li> <li><a href="rates.php">rates</a></li> <li><a href="boutique.php">boutique</a></li> <li><a href="http://ourinteriorcastle.blogspot.com">blog</a></li> <li><a href="contact.php">contact</a></li> </ul> </div> <div id="footer"> <p>Copyright ©2007 hanle productions. All rights reserved</p> <p>You may not use any of the material here without the written consent of the owners of this site</p> <p>Webmaster: <a class="mail" href="mailto:nori_silverrage@yahoo.com">nori_silverrage@yahoo.com</a></p> </div> </div> </body> </html> Then as for aligning thumbnails, you will need to use the css float property on the elements containing the thumbnails, and margin:0 auto on a further container element. Some basic tutorials on how css/html works can be found here - http://www.w3schools.com/. Good luck Quote Link to comment Share on other sites More sharing options...
xenon2050 Posted October 19, 2007 Author Share Posted October 19, 2007 Eww, that is messy. I hadn't looked at my source through the browser before... It appears I put <html> and <body> tags in my php include files (shown below) But I fixed that now. Sorry it was so rough, it is still in the development stages so I haven't refined everything. Thanks for pointing that stuff out for me. My actual code is this: gallery.php <html> <head> <title>hanle productions</title> <META name="description" content=""> <META name="keywords" content="photograph, photos, images, studio, hanle, photo production"> <LINK REL=STYLESHEET HREF="rulestest.css" TYPE="text/css"> <script>type="text/JavaScript" src="replacement.js"></script> </head> <body> <div style="text-align: center;"> <div class="image"><img src="images/shoeheader.jpg" alt="header"></img></div> <div class="container"> <div class="right"> <?PHP include('includes/sidebar.php'); ?> </div> <div class="content"> <h1>Gallery:</h1> Click one of the below links to enter the gallery: <p> <A href="benliz.php">Ben and Liz</A> <p> <A href="christensens.php">Christensens</A> <p> <A href="jess.php">Jess</A> <p> <A href="shalin.php">Shalin</A> <p> <A href="carissa.php">Carissa</A> <p> <A href="petepaula.php">Pete and Paula</A> <p> <A href="rebeccatony.php">Rebecca and Tony</A> <p> <?PHP include('includes/lawyer.php'); ?> </div> </div> </div> </body> </html> sidebar.php <div class="heading">Hanle Productions Info:</div> <A href="http://www.hanle-productions.com/main.php">home</A><BR> <A href="about.php">about</A><BR> <A href="gallery.php">gallery</A><BR> <A href="heartandsoul.php">heart and soul</A><BR> <A href="rates.php">rates</A><BR> <A href="boutique.php">boutique</A><BR> <A href="http://ourinteriorcastle.blogspot.com">blog</A><BR> <A href="contact.php">contact</A><BR> lawyer.php <style type="text/css"> a.mail:hover {text-decoration: underline; font-weight:300; font-style: normal} </style> <div class=lawyer><p> <p> <p> Copyright ©2007 hanle productions. All rights reserved<br> You may not use any of the material here without the written consent of the owners of this site<br> Webmaster: <a class="mail" href="mailto:nori_silverrage@yahoo.com">nori_silverrage@yahoo.com</div> the <div style="text-align: center;"> line is a hack to get IE to display correctly... Hmm, well I've tried using the css float code but it was frustrating, I thought maybe there was a better way. Guess I'll just have to research that more... Is there other ways to align pictures not using tables? Or float? The trouble I was having with float was because it was conflicting with another float value I have for my sidebar... But then I will be changing the location of the side bar so maybe that won't be a issue. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 19, 2007 Share Posted October 19, 2007 [quote author=xenon2050 link=topic=164240.msg720752#msg720752 date=1192811464]My actual code is this: That still contains most of the problems. You need a doctype, use lowercase letters to be save, puts quotations marks in the places they are missing, use a logical html structure that makes sense even without styling, remove inline styles, use unordered lists, use paragraphs correctly, remove that non-existent </img> tag. I know what the {text-align:center} hack is, but that should be in a stylesheet and associated with your container div, not dumped into an otherwise useless div in your html! I've already done the work for you...you just need to edit your css file! To align the pictures you need to use the float property and a container element that you can center (do not use tables - they are only for tabular data) but what you really need to do is read some html and css tutorials so that you can learn what you are doing. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 19, 2007 Share Posted October 19, 2007 bronzemonkey is right on all points, of course. But one point he flew over at 90mph was crucial (if you are dynamically generating your page). Always start with a barebones, no style at all, blank paper first, THEN create a well formatted html page with simple markup tags in order (without styles). Once that's done, start your css page to style the layout and colors. Check to make sure it is valid and has no typos. NOW, you can create your php echos and includes. Remember, if you are idoing an includes, it should only be the snippet of code for residing within the body of the document ... it does NOT need to be, nor should it ever be, a stand-alone complete html page. What I do is leave the doctype and head tags static. Then code my php exactly where in the document I want to echo dynamic content. I try never to re-echo any html markup that can be static - just place my php around the static content. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted October 19, 2007 Share Posted October 19, 2007 There are so many ways to align images with css. I recently came up with a fun way using the old "pagination" trick. Pagination is when you have a "previous" and "next" link on a page. p.pagination { margin: 0 auto; background-color: #000000; text-align:center; } .prev { float: left;padding-left: 10px} .next {float:right;padding-right: 10px} Then create a paragraph and put your photos within using either class="prev" to float left or class="next" to float right. Here is an example of it in action from my website http://www.bluesmandeluxe.com/lpdeluxe.html : the images on the bottom are all using just a paragraph for each set. <p class="pagination">< img src="LP/perspective_a1.jpg" alt="perspective a" class="next" height="300" width="173" /> <img src="LP/body.jpg" alt="body" height="293" width="179" /> <img src="LP/lpdh2.jpg" alt="perspective a" class="prev" height="300" width="134" /> <img src="LP/lpdh4jpg.jpg" alt="lpdh4" class="next" height="300" width="137" /> </p> Quote Link to comment Share on other sites More sharing options...
xenon2050 Posted October 21, 2007 Author Share Posted October 21, 2007 Okay just wanted to respond to some comments... You need a doctype Yes yes, I put it in my code now. In the scope of my question I considered it a moot point. I didn't understand what it was for, so thanks for the link; it is in now. use lowercase letters to be save They are lowercase now. I hadn't had any issues with that, but like you said better to be safe. puts quotations marks in the places they are missing Okay I don't see the big issue here. There was only one place I could identify that should have them. And I have visited some HTML tutorial sites that don't consider it a really big deal to put the "" in. Thanks for pointing it out, but again I didn't consider it a really big deal. use a logical html structure that makes sense even without styling Um okay what does this mean? Logical to who? To me my structure is logical. remove inline styles, use unordered lists, use paragraphs correctly, remove that non-existent </img> tag Maybe this is what you mean. I don't want to use unordered lists, my preference. The </img> I thought was needed since I had this <code> <img src="images/shoeheader.jpg" alt="header"> </code> I know what the {text-align:center} hack is, but that should be in a stylesheet and associated with your container div, not dumped into an otherwise useless div in your html! Well that is good to know, the site I found the hack at said to put it into the html file. I've already done the work for you...you just need to edit your css file! Thank you for the work. So I get the feeling you think I am just asking for free work. I'm not, I asked a question got some unexpected answers, sure my code is a little messy but like I said I'm in the development stage. I didn't have a ton of time to spend on making sure it is perfect at the moment, and like I said a lot of that stuff is minor, important but not essential for making it work correctly. Anyway thanks for the time you guys spent on writing responses. I will implement the suggestions here. Thanks Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 21, 2007 Share Posted October 21, 2007 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.