LinkBack URL
About LinkBacks
Reply With Quotegive your #image a relative or absolute positioning, then do the same for the next and previous buttons. You can position your next button 0px from the right edge of #image and the previous button 0px from the left edge of #image
i need some help, i am currently working on something that drives me crazy.
ok, i have a fixed-width website. within the content wrapper there is an image
so i have an image-wrapper (#image), within the wrapper i have a dynamic image an beneath the image there is a pager (previous and next).HTML Code:<div class="content-wrapper"> <div id="image"> <a href="<?php echo htmlspecialchars(getFullImageURL()); ?>" title="[php]<?php echo getBareImageTitle(); ?>[/php]"> <strong><?php printDefaultSizedImage(getImageTitle()); ?></strong> </a> <div class="imgnav"> <?php if (hasPrevImage()) { ?> <div class="imgprevious"> <a href="<?php echo htmlspecialchars(getPrevImageURL());?>" title="<?php echo gettext("Previous Image"); ?>"> « <?php echo gettext("prev"); ?> </a> </div> <?php } if (hasNextImage()) { ?> <div class="imgnext"> <a href="<?php echo htmlspecialchars(getNextImageURL());?>" title="<?php echo gettext("Next Image"); ?>"> <?php echo gettext("next"); ?> » </a> </div> <?php } ?> <div class="clear"></div> </div> </div> </div>
the thing is i would like to have the next-button floated on the right and the previous-button floated on the left aligned with the image. the image is dynamic so i can be landscape or portrait.
how do i css this properly, so the buttons are always aligned with the edges of the image regardless its width?
thanks in advance
give your #image a relative or absolute positioning, then do the same for the next and previous buttons. You can position your next button 0px from the right edge of #image and the previous button 0px from the left edge of #image
Subtlety is my middle name... and first and last in case you didn't get the point.
http://www.eoingriffin.com
That might not work Eion, but this does:
EDIT: Only tested in FF.HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="robots" content= "ALL" /> <meta name="description" content= "Semantic web development, web standards, CSS Wizardry and other stuff." /> <meta name="keywords" content= "web standards, semantics, accessibility, typography, web developer, CSS, xHTML, Harry Roberts" /> <meta name="author" content= "Harry Roberts" /> <title>Image pagination</title> <link rel="shortcut icon" href="http://csswizardry.com/favicon.ico" /> <style type="text/css"> #gallery { margin:0 auto; float:left; border:1px solid #0f0;} #image { width:500px; display:block; } #previmg {float:left;} #nextimg {float:right;} </style> </head> <body id="home"> <div id="wrapper"> <div id="gallery"> <img src="http://www.estetica-design-forum.com/images/test-image-one.jpg" alt="image" id="image" /> <img src="http://www.estetica-design-forum.com/images/prev.jpg" alt="Previous image" id="previmg" /> <img src="http://www.estetica-design-forum.com/images/next.jpg" alt="Next image" id="nextimg" /> </div> </div> </body> </html>
ok thanks, i will try it and will let you know which one worked out. thanks
small update from my side:
harry's solution is working in ff, opera and safari, but it won't work in ie.
many thanks for that, because i never would have come up with this .
i'm going to try eion's solution with conditional comments on ie and hope it is going to work.
thanks a lot.
another update: eoin's solution worked on ie, but now i am faced with another problem.
position:relative didn't worked, position:absolute did work. as the image incl. the pagers have an absolute position, they were taken out of the layout-flow and so the holding container won't resize to its content.
i know there were solutions out there, but i cannot find them on the net. maybe someone can help out.
edit: this applies to ie6 and ie7. ie8 manages to render the layout like ff, opera and safari. damn, i hate ie!
Last edited by bartoszdesign; 28-03-2009 at 02:29 PM.
The trick is making the container hug the left and right of the image. If you can find a way of doing that then you've won.
huh? hehe ok, well. most solutions/fixes are for floating elements, which are not absolute.
is there a fix for this at all, or is it just easier to find another solution to position the pagers in ie7? the dirty solution would be using javascript resizing the container to the height of its children.
Can you post up some sample page for us to mess with to see what you're trying to do (without the php. I cba going through that)
Subtlety is my middle name... and first and last in case you didn't get the point.
http://www.eoingriffin.com
Fotoalbum|Reeshof Podium| reeshof-podium-001|www.reeshoftotaal.nl
this is were it should happen... i have set a fixed wrapper height in ie7 for now as i haven't found a solution yet. i am looking for a solution in ie7, i won't support ie6 anymore.
thanks
Posting Permissions
Check the forum often for the latest design announcements. Everything from graphic design and web design, to films and music. Estetica is a great place for people to get together and help each other out.
Bookmarks