www.webdeveloper.com
Results 1 to 9 of 9

Thread: Manipulating images in HTML (or CSS)

  1. #1
    Join Date
    Jan 2012
    Posts
    7

    Manipulating images in HTML (or CSS)

    Hi guys.. Hope you can help..

    I am currently writing a website for my wife using wordpress and a theme called prophoto. On the home page I want about a 100 images all running down the page with two images per line… Simply from the Wordpress dashboard going into the correct ‘page’ and adding images doesn’t work as the images only go one per line.. I found a work around by adding the following lines to the html for each individual image.

    <div style="display: inline-block; margin-right: 5px;">
    <img class="pp-insert-all size-full alignnone" src="http://wp-content/uploads/2012/01/helen1.jpg" alt="" width="395" height="395" /></div>
    However to do this 100 times will be a nightmare and I’m sure a bloated way of doing things.. Is there a better way of doing this through adding a line to the ‘custom CSS’
    Thanks

  2. #2
    Join Date
    Jan 2012
    Posts
    7
    Sorry I forgot a line of code.. It should be:

    <div style="display: inline-block; margin-right: 5px;">
    <img class="pp-insert-all size-full alignnone" src="http://***.***/wp-content/uploads/2012/01/helen1.jpg" alt="" width="395" height="395" /></div>

    <div style="display: inline-block;">
    <img class="pp-insert-all size-full alignnone" src="http://***.***/wp-content/uploads/2012/01/helen2.jpg" alt="" width="395" height="395" /></div>

  3. #3
    Join Date
    Nov 2007
    Posts
    432
    When you add an image, what does the HTML look like versus what you posted as your temp solution?

    If I put 'naked' images in HTML, like the following, they line up across the page and go to the next line only when they run out of room.
    Code:
    <img src="1" height="10" width="10"/><img src="1" height="10" width="10"/><img src="1" height="10" width="10"/><img src="1" height="10" width="10"/><img src="1" height="10" width="10"/>

    So... it sounds like when you add the images, something is being added to them automatically that is making them do line breaks. Perhaps it is the "alignnone" class.

    Without seeing what those classes do, it's difficult to diagnose.

  4. #4
    Join Date
    Jan 2012
    Posts
    7
    Thanks for your reply.

    This is what the HTML looks like if I use the wordpress WYSIWYG editor to attach two images to the page..

    <img class="pp-insert-all size-full alignnone" src="http://michellewaspe.com/wp-content/uploads/2012/02/lexdan1.jpg" alt="" width="395" height="395" /><img class="pp-insert-all size-full alignnone" src="http://michellewaspe.com/wp-content/uploads/2012/02/lexdan2.jpg" alt="" width="395" height="395" />

    Is this what you were asking for. I'm not really sure what 'naked' HTML is.

  5. #5
    Join Date
    Jan 2012
    Posts
    7
    JUst to clarify. If I remove the alignnone class it does then put the images side by side rather than stakced on top of each other. However it does not leave any margin between the images and there is no option to remove the align class it's either alignnone, alignleft or alignright. So using the inbuilt wordpress editor is not an option. I need to manually code it using HTML.

    My question is rather than manually write the code for 100 images can I simply have a long list of the image locations all wrapped neatly in a div that has been defined through the CSS..

  6. #6
    Join Date
    Nov 2007
    Posts
    432
    By 'naked' I meant with no styles assigned to them.
    So "alignnone" is what is making them stack vertically. Removing it fixes the stacking issue, but it then reveals an issue where there is no padding between them.

    Try this:
    Code:
    <style>
    #myimages img {margin-left:10px; margin-right-10px;}
    </style>
    <div id="myimages">
    <img src="1" height="100" width="100"/>
    <img src="2" height="100" width="100"/>
    <img src="3" height="100" width="100"/>
    <img src="4" height="100" width="100"/>
    <img src="5" height="100" width="100"/>
    </div>
    This should only affect IMG that exist inside the div with ID "myimages".
    You will want to assign margins, paddings, floats, etc. as needed to make your images appear how you want them to.

  7. #7
    Join Date
    Jan 2012
    Posts
    7
    Thanks but it still stacks them and also the other problem is that the images running down the left hand side of the screen need a right margin of 5px whilst the images running down the right hand side of the screen meed no margins as the edges of the images need to line up to the edges of the screen.

  8. #8
    Join Date
    Nov 2007
    Posts
    432
    It only stacks them vertically if there is not enough room for them to be side-by-side.
    If each image is 395 wide with 10 pixels margin on each side, each image is taking up 415 pixels each, side by side, they need 830 pixels). So I can guess that your container is less than 830 pixels wide.

    I can keep guessing at your page dimension requirements, but this would go much quicker if you laid it out for me ahead of time...
    Last edited by nap0leon; 02-22-2012 at 12:57 PM.

  9. #9
    Join Date
    Nov 2007
    Posts
    432
    Here is another sample that shows side-by-side images that are 395 pixels square.
    The images with class=imglef have a 5px right-margin.
    The images with class=imgright have no margins defined.
    This presumes an 800 pixel wide container.
    Code:
    <style>
    #myImages {width: 800px;}
    .imgleft {margin-right:5px}
    .imgright {}
    </style>
    <div id="myimages">
    <img src="1" height="395" width="395" class="imgleft"/>
    <img src="1" height="395" width="395" class="imgright"/>
    <img src="1" height="395" width="395" class="imgleft"/>
    <img src="1" height="395" width="395" class="imgright"/>
    <img src="1" height="395" width="395" class="imgleft"/>
    <img src="1" height="395" width="395" class="imgright"/>
    <img src="1" height="395" width="395" class="imgleft"/>
    <img src="1" height="395" width="395" class="imgright"/>
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles