Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation I have been trying to vertically align some images using CSS.

    I have been trying to vertically align some images using CSS.
    I have had very limited success using a div, but I cannot get vertical spacing
    other than using <br>'s

    I am still struggling with CSS and would appreciate some advice as to where I am wrong.

    URL and code below.

    Frank


    http://www.exitfegs.co.uk/atry.html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>If at first you don't succeed.........</title>
    <style type="text/css">
    
    #wrap
    {
    position:absolute;
    left:220px;
    }
    </style>
    </head>
    <body>
       <div id="wrap">
    <img class="top" border="0" 
    src="1.jpg" width="95" height="84" /><br ><br >
    <img class="bottom" border="0" 
    src="2.jpg" width="95" height="84" /><br ><br >
    <img class="top" border="0" 
    src="1.jpg" width="95" height="84" /><br ><br >
    <img class="bottom" border="0" 
    src="2.jpg" width="95" height="84" /><br ><br >
    <img class="top" border="0" 
    src="1.jpg" width="95" height="84" /><br ><br >
    <img class="bottom" border="0" 
    src="2.jpg" width="95" height="84" /><br ><br >
    <img class="top" border="0" 
    src="1.jpg" width="95" height="84" /><br ><br >
    <img class="bottom" border="0" 
    src="2.jpg" width="95" height="84" /><br ><br >
    </div>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    .
    .

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Can you give the image class a margin?

    margin-bottom: 2em;

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Jutlander View Post
    Hello Jutlander,
    The URL is about text in a frame. Using it gives me a horizontal row of images.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by mranster View Post
    Can you give the image class a margin?

    margin-bottom: 2em;
    mranster

    I have solved it by giving the container "wrap" width:90px;
    So obvious after one thinks of it.

    Must remember to engage brain once in a while.

    Frank

    http://www.exitfegs.co.uk/atry.html
    Last edited by effpeetee; 07-28-2007 at 07:08 PM. Reason: Suddenly, I saw the light!
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Applying display:block to the images would work as well


    #wrap img{
    display:block;
    }
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Mr J View Post
    Applying display:block to the images would work as well


    #wrap img{
    display:block;
    }
    Thank you.

    #wrap img{
    display:block;
    margin:10px;
    }

    works fine.

    But how do I move the column to the right.
    I am just beginning to come to terms with CSS.
    A long way still to go, but the longest journey starts with the first single step.

    Many thanks to all you coders.

    Frank

    http://www.exitfegs.co.uk/atry.html
    Last edited by effpeetee; 07-28-2007 at 10:09 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    do you want to thnumbnails to be on the right side of the screen (The right hand side that is )

    if so use the float attribute like this

    #divName {
    float : right;
    }

    then to move it away from the edge of the screen you could use padding so, you could end up with this

    #divName {
    float : right;
    padding : 0 10px 0 0;
    }
    That way of setting out padding puts a value relative to the edge of the element in a clockwise order from top so padding: 10px 20px 30px 40px means padding top(10px) right(20px) bottom (30px) left(40px). top rght bottom and left are the edges of the element (div) not the edge of the screen.

    I would recommend that you put your thumbs into an unordered list ie
    Code:
    <ul>
      <li><img src="" /></li>
      <li><img src="" /></li>
    </ul>
    if you use <br /> not only is it incorrect but as one might increase font size (by holding down CTRL and scrolling the mousewheel), the <br /> will also get bigger breaking your page. Shouldn't happen when using the list.

    It's also a good idea to label your divs as per thier contents rather than where they are on the page or what the div is thought of doing. As you change your layout, the term 'div id="left"' will become confusing as well as irrelevant. better to call it div id="thumbnails", for example. div id="wrap" might also be confusing since all content is wrapped within a div.

    bazz
    Last edited by bazz; 07-28-2007 at 10:34 PM.

  • #9
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    #wrap img{
    display:block;
    margin:10px 10px 10px 100px; // top/right/bottom/left
    }
    Try that and adjust the last number to move it left (smaller) or right (larger)

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Bazz and jlhaslip and all others.,

    Thank you for your help.

    This is in the nature of an exercise.
    I am trying to learn CSS and how to position things with it. It is not intended as yet to be used for a project. I just need to understand CSS and how to use it.

    Your input is useful and gratefully received. Any helpful comments will (hopefully) hasten the day when I can really get to grips with semantic coding.

    All comments and suggestions are gratefully received.

    Frank - alias effpeetee.

  • #11
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Speaking, I presume, for most of us here who assist others... We have all been there and received assistance from others. It is your turn now and later it will be someone else's turn to request assistance from you.

    Glad to help and glad you are learning from our advise.


  •  

    Posting Permissions

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