SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning arrows for picture viewing

    Hey,


    This is the situation:


    What I am trying to achieve is to have the arrows(inputboxes) to float in the middle next to the picture. Is this possible without extra "invisible" div's?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Without seeing your code I would guess that it would be possible with vertical-align:middle; or with margins. For v-a to work you will need to be in display:table or inline-block;

    Please post a link to your page or a test case of the code you are using, otherwise we are just guessing.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Margins would probably do the trick - edit: they don't

    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/xhtml/1999">
    <head>
    <title>Foto-album</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="Fotoalbum.css" />
    <script type="text/javascript">
    /* <![CDATA[ */
    
    /* ]]> */
    </script>
    </head>
    <body>
    <div id="wrapper">
    	<h1>Mijn Fotoalbum</h1>
    	<div id="container">
    		<input type="button" value="<<" onclick="vorige()" />
    		<img id="afbeelding" src="1. Oef/12. Fotoalbum/Afbeeldingen/0.jpg" alt="De historische brug van Mostar" />
    		<input type="button" value=">>" onclick="volgende()" />
    	</div>
    	<label id="description">Het onderwaterparadijs "The Deep" in Hull.</label>
    </div>
    </body>
    </html>
    Code CSS:
    /* RESET */
     
    html,body,div,img,label,input{
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    	background:transparent;
    	vertical-align:baseline;
    }
     
    body{
    	font:11pt/15pt arial,helvetica,sans-serif;
    }
     
    /* LAY-OUT */
     
    div#wrapper{
    	width:650px;
    	text-align:center;
    	margin:10px auto 0 auto;
    }
     
    label{
    	border:1px solid green;
    	display:block;
    }
     
    input{
    	vertical-align:super;
    	border:1px solid red;
    	padding:10px;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The thing to do is add vertical-align: middle to the image, like so:

    Code:
    #container img {vertical-align: middle;}
    See if that does the trick.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thank you both.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well, an image is an inline element by default and you could set the vertical-align on it.

    Testing without your actual image I had to use inline-block so I could set some dimensions for FF.

    Code:
    #container img{
    width:400px;
    height:250px;
    background:red;
    vertical-align:middle;
    display:inline-block;
    }
    All you should need is this
    Code:
    #container img{vertical-align:middle;}
    Edit:

    It looks like ralph beat me to it. I knew it would work, just wanted to test it first

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't doubt you knew it Rayzur. Thank you for taking the time to test things out first before replying.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It looks like ralph beat me to it. I knew it would work, just wanted to test it first
    Heh heh, I tested it by just using an image on my desktop. I like it when two people post the same solution, as it gives the OP the confidence that it's a good solution. (And to tell you the truth, it gives me the confidence too, as Rayzur is much better at CSS than I am. )

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nevermind


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •