SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Whitespace between images

    I like to have well-structured HTML and when I look at badly indented HTML when I want to look at some page's source, it pisses me off. So I'm trying to keep everything nicely indented. The thing is, I have a bunch of images one after the other in a line and the indentations cause there to be a space between them. This is the correct behaviour of course.

    So, how do get around it? I could do:
    HTML Code:
    <li
      ><img src="1" /><
      img src="2" /><
      img src="3" /><
      img src="4" /><
    /li>
    Or, this:
    HTML Code:
    <li><!--
       --><img src="1" /><!--
       --><img src="2" /><!--
       --><img src="3" /><!--
       --><img src="4" /><!--
     --></li>
    Or I could put them all in the same line. The latter is very undesirable to me and the other two options are a bit ugly. What other solutions are there?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS to change the images from inline elements to block level elements.
    Code:
     li img {
     	display: block;
     }

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I could do that, but I want the images to be displayed next to each other horizontally and vertically aligned in the middle.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you'll want to float them then.

  5. #5
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    I could do:
    HTML Code:
    <li
      ><img src="1" /><
      img src="2" /><
      img src="3" /><
      img src="4" /><
    /li>
    No, you can't have whitespace between the < and the tag name. You could do this, however:
    HTML Code:
    <li
      ><img src="" alt=""
      ><img src="" alt=""
      ><img src="" alt=""
      ><img src="" alt=""
    ></li>
    Simon Pieters

  6. #6
    SitePoint Guru DCS's Avatar
    Join Date
    Apr 2002
    Location
    Arkansas
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan has the viable solution here

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help, I'll try floating them tonight.


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
  •