Making photos appear inline with CSS. How?

Discussion in 'Web Design and Development' started by 66217, Aug 18, 2008.

  1. 66217 Guest

    Joined:
    Jan 30, 2006
    #1
    I am trying to make photos form a row, but even after putting them within a <li></li> tags and specifying in CSS to put them inline I can't achieve it.

    This is the page I am trying to make look with the photo inline: http://photography-tech.com/photo/tips.html

    The HTML code is this:

    Code:
    <div id="container">
                <ul>
                    <li class="pg">
                    <a href="macro/tips_macro.html">
                    <img src="../images/images/pg19.jpg" alt="Crab macro photo" width="150" height="100" />
                    <br />
                    <p>Macro Photography</p>
                    </a>
                    </li>
                    <br />
                    <li class="pg">
                    <a href="#nogo">
                    <img src="../images/images/pg27.jpg" alt="Sunrise and Sunset photo" width="150" height="100" />
                    <br />
                    <p>Sunrise & Sunset Photography</p>
                    </a>
                    </li>
                </ul>
            </div>
    And the CSS is like this:

    Code:
    #container	{
    		width: 675px;
    		margin-left: -50px;
    		text-align: center;
    		}
    		
    .pg {
    	display: inline;
    	list-style: none;
    	}
    Any ideas why it isn't working?
     
  2. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #2
    You need to style the list item. You can still target the class by doing

    .pg li {...}
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    You have invalid code. You cannot place p tags inside li tags (http://validator.w3.org/). p tags are block elements like li elements, which is causing the problems. Also, a anchor tag cannot go around a p tag. I recommend using a nested list. Then you can style accordingly.
    HTML:
    <div id="container">
      <ul>
        <li class="pg">
          <ul>
            <li><a href="macro/tips_macro.html">
            <img src="../images/images/pg19.jpg" alt="Crab macro photo"
            width="150" height="100" /></a></li>
            <li><a href="macro/tips_macro.html">Macro Photography</a></li>
          </ul>
        </li>
        <li class="pg">
          <ul>
            <li><a href="#nogo">
            <img src="../images/images/pg27.jpg" alt="Sunrise and Sunset photo"
            width="150" height="100" /></a></li>
            <li><a href="#nogo">Sunrise & Sunset Photography</a></li>
          </ul>
        </li>
      </ul>
    </div>
    Edit: As a note, if you don't want to do a nested list you can do:
    HTML:
        <li class="pg"><a href="macro/tips_macro.html">
            <img src="../images/images/pg19.jpg" alt="Crab macro photo"
            width="150" height="100" />
            <span>Macro Photography</span></a>
        </li>
    and part of the CSS would be:
    Code:
    li.pg {
     display: inline;
    }
    li.pg img {
     display: block; /* so text will be beneath the image */
    }
    li.pg span {
      /* whatever styling you want here */
    }
    The span part is optional, but could give you more control depending on what CSS you end up using.
     
  4. MojoWill macrumors 6502

    Joined:
    Jun 13, 2008
  5. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #5
    You also can't have line break tags (<br />) in between your <li>s! Why would you do that? That definitely forces things to a new line.

    Set it up like angelwatt suggested. You should then be able to float or inline the <li>s like you want them.
     
  6. 66217 thread starter Guest

    Joined:
    Jan 30, 2006
    #6
    I'm ashamed. :(

    I know I had many mistakes, but I was getting desperate and really didn't knew what to do.

    I tried this, and it is definitely getting better, but it is still not seeming to work correctly. Each photo still occupies the complete line.

    This is the CSS:

    Code:
    #container	{
    		width: 675px;
    		line-height: 50px;
    		}
    		
    li.pg {
    	display: inline;
    	list-style: none;
    	}	
    	
    li.pg img {
    	display: block;
    	}
    	
    li.pg span {
    	text-align: center;
    	}
    And the HTML:

    Code:
    <div id="container">
                <ul>
                    <li class="pg">
                    <a href="#nogo">
                    <img src="../images/images/pg27.jpg" alt="Sunrise and Sunset photo" width="150" height="100" />
                    <span>Macro Photography</span>
                    </a>
                    </li>
                    <li class="pg">
                    <a href="macro/tips_macro.html">
                    <img src="../images/images/pg1.jpg" alt="B&W Tree Photo" width="150" height="100" />
                    <span>Exposure Light</span>
                    </a>
                    </li>
    </div>
    And this is the page were you can see how it looks: http://photography-tech.com/photo/tips.html

    Thanks for all the help.:)
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Well that alternate way I suggested is actually harder to setup with CSS, though even the nest list way is something of an intermediate to advanced CSS technique. Below is a solution using the nested lists though. I tweaked the HTML and the CSS. Attached is a snapshot (hopefully) of the file I was working from locally so you can see how it should look. You may want to tweak some of the CSS to meet the layout goals you're wanting, I just went with what felt right at the time. Let me know if you have any questions.

    HTML:
    <div id="container">
      <ul class="pg">
        <li>
          <ul>
            <li><a href="#nogo"><img src="../images/images/pg27.jpg" alt="Sunrise
            and Sunset photo" width="150" height="100"></a></li>
            <li><a href="#nogo">Macro Photography</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="http://photography-tech.com/photo/macro/tips_macro.html">
            <img src="../images/images/pg1.jpg" alt="B&W Tree Photo" width="150"
            height="100"></a></li>
            <li><a href="http://photography-tech.com/photo/macro/tips_macro.html"
            >Exposure Light</a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#nogo"><img src="../images/images/pg3.jpg"
            alt="Flower Photo" width="150" height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="http://photography-tech.com/photo/macro/tips_macro.html">
            <img src="../images/images/pg9.jpg" alt="Crab macro photo" width="150"
            height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#nogo"><img src="../images/images/pg27.jpg"
            alt="Sunrise and Sunset photo" width="150" height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a
            href="http://photography-tech.com/photo/macro/tips_macro.html"><img
            src="../images/images/pg9.jpg" alt="Crab macro photo" width="150"
            height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#nogo"> <img src="../images/images/pg27.jpg"
            alt="Sunrise and Sunset photo" width="150" height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a
            href="http://photography-tech.com/photo/macro/tips_macro.html"><img
            src="../images/images/pg9.jpg" alt="Crab macro photo" width="150"
            height="100"></a></li>
          </ul>
        </li>
        <li>
          <ul>
            <li><a href="#nogo"> <img src="../images/images/pg27.jpg"
            alt="Sunrise and Sunset photo" width="150" height="100"></a></li>
          </ul>
        </li>
      </ul>
    </div>
    CSS: (I changed some of the other CSS)
    Code:
    /* Style Copyright*/		
    #copyright {
     clear: both; /* added */
     font-weight: bold;
     font-size: x-small;
     color: black;
     text-align: center;
     margin: 30px auto;
     border-top: solid .2em;
     border-top-color: black;
     padding-top: 5px;
    }
    #container	{
     /*width: 675px;*/
     line-height: 1.3;
    }
    ul.pg {
     margin: 0; padding: 0;
     list-style: none;
    }
    ul.pg li {
     display: inline;
     margin: 0; padding: 0;
     text-align: center;
     line-height: 1;
    }
    ul.pg ul {
     float: left;
     display: inline;
     width: 33%; height: 8.5em;
     margin: 0; padding: 0;
    }
    ul.pg li li {
     display: block;
     margin: 0; padding: 0;
    }
     

    Attached Files:

    • roco.png
      roco.png
      File size:
      214.5 KB
      Views:
      79
  8. 66217 thread starter Guest

    Joined:
    Jan 30, 2006
    #8
    Thanks a lor angelwatt, it worked like a charm.:)
     

Share This Page