Results 1 to 7 of 7

Thread: Advice to put space between images

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default Advice to put space between images

    Hi,
    The page in question is here,
    https://www.theremotedoctor.co.uk/bikegallery.html

    Im looking for infor on how / where i need to add css to allow a space between each row.
    Ive found the vetical part bt no luck for the horizontal part.

    Thanks

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,345
    Thanks
    4
    Thanked 288 Times in 281 Posts

    Default

    Hi there theremotedr,


    try this amendment...

    Code:
      /* Six columns side by side */
    .column {
       width: 16.66%;
       margin-bottom: 0.25em; /* adjust this value if necessary */
    }

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Thanks,

    Using F12 to teach myself a few things.
    The code you advise in my css in on line 107

    I posted help here as i couldnt see where i needed to make the edit when using F12
    Now i have added the line of code you advise i still dont see it when using F12

    Can you advise

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,345
    Thanks
    4
    Thanked 288 Times in 281 Posts

    Default

    Hi there theremotedr,


    I would suggest that you do not use the F12 function for specifics.

    If you are using Firefox

    Place the cursor over one of the images in question, right mouse
    click and then select "Inspect" or "Ctrl Q".

    This will highlight something like this...
    Code:
    <img class="demo" src="bike-gallery/3.jpg" alt="ZZR 1400">
    ...but as you are looking for class="column", you now need to click
    on the line above...
    Code:
    <div class="column">
    <img class="demo" src="bike-gallery/3.jpg" alt="ZZR 1400">
    </div>
    In the column to the right you will then see...
    Code:
    .column {
    	width: 16.66%;
    	margin-bottom: 0.55em;
    }
    If you are using Chrome

    Place the cursor between one of the images in question, right mouse
    click and then select "Inspect" or.
    This will display something like this...
    Code:
    .column {
        width: 16.66%;
        margin-bottom: 0.8em;
    }
    I hope that this long winded explanation helps.

    coothead
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Im using Firefox & dont see your laste piece of info,see screenshot
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4123.jpg 
Views:	27 
Size:	80.0 KB 
ID:	6538  

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,345
    Thanks
    4
    Thanked 288 Times in 281 Posts

    Default


    ...but as you are looking for class="column", you now need to click
    on the line above...
    Code:
    <div class="column">
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Sorry i read it wrong,i clicked on the one below.
    Now i see it thanks again

Similar Threads

  1. Lightbox waits until all images are loaded to work. Advice?
    By AHalsey in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-11-2010, 05:34 PM
  2. space between images when using lightbox
    By yediburun in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-02-2010, 08:40 PM
  3. Resolved Space under images? (bottom of div)
    By dillankid in forum CSS
    Replies: 7
    Last Post: 01-15-2009, 10:01 PM
  4. Replies: 1
    Last Post: 09-02-2008, 01:17 AM
  5. white space around my images
    By nathalie123 in forum HTML
    Replies: 6
    Last Post: 08-15-2005, 01:00 PM

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
  •