Making photos appear inline with CSS. How?

[66217]

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:

<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:

#container	{
		width: 675px;
		margin-left: -50px;
		text-align: center;
		}
		
.pg {
	display: inline;
	list-style: none;
	}

Any ideas why it isn't working?

 

[InLikeALion]

You need to style the list item. You can still target the class by doing

.pg li {...}

 

[angelwatt]

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.

<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:

    <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:

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.

 

[MojoWill]

also try

.pg img {
code here 
}

 

[rogersmj]

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.

 

[66217]

I'm ashamed.

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

Edit: As a note, if you don't want to do a nested list you can do:

    <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:

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.

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:

#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:

<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.

 

[angelwatt]

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.

<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)

/* 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;
}

 

[66217]

Thanks a lor angelwatt, it worked like a charm.