css display inline problem

by 8 replies
11
I have a problem with the display:inline; css instruction. Below is the relevant css and html all to do with the same page. The #nav inline works ok, the .photo-item doesn't. I've tried changing sizes, tried the float option but can't get what I want.

You can see the #nav working but the photos not at Mike Hayes' Photographs.

Be grateful for any input.

Mike

#nav ul
{
margin: 0;
padding: 0;
list-style: none;
}

#nav li
{
display: inline;
margin: 0;
padding: 0;
}

.item {
margin: 10px;
padding: 10px;
border-bottom: 2px solid green;
border-right: 2px solid green;
}

.item p {
margin: 20px;
}

.item li {
margin-bottom: 20px;
}

.photo-item {
font-size: small;
}

.photo-item ul {
list-style: none;
}

.photo-item li {
display: inline;
}

<div class='item'>

<div class='photo-item'>
<ul>
<li>
<A HREF='sp-1.html' TARGET='_blank'>
<IMG SRC='images/tspar-1.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Where's my grub?
</li>
<li>
<A HREF='sp-2.html' TARGET='_blank'>
<IMG SRC='images/tspar-2.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Mum on finals.
</li>
<li>
<A HREF='sp-3.html' TARGET='_blank'>
<IMG SRC='images/tspar-3.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Are you ready?
</li>
<li>
<A HREF='sp-4.html' TARGET='_blank'>
<IMG SRC='images/tspar-4.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Touchdown
</li>
<li>
<A HREF='sp-5.html' TARGET='_blank'>
<IMG SRC='images/tspar-5.png' ALT='sparrows' WIDTH='75' HEIGHT='63'>
</A>
<P>
Bon appetit
</li>
</ul>
</div>

</div>
#website design #css #display #inline #problem
  • Hi Mike, I don't think that the photos are in this file -> mike-hayes.com/phptest/images/ and that is why they aren't showing up. The css seems fine.

    Thanks
    • [1] reply
    • Hi,

      I know the photos aren't there. The point is, why are the #nav li's inline but the .photo-item li's are not. I've uploaded the 1st 3 img's by the way.

      Mike
  • Oh, my bad I misread your question.

    I think that the photos aren't lining up because of the <P> tag. Try adding the inline to the <P> tag as well.

    .photo-item p {display:inline;}

    Let me know if this works, thanks!
    • [1] reply
    • I tried it and it almost worked. It put the description next to the image, adding a hyphen in between, with the result being that the 3 li's overflowed to the next line/block. But thatnks anyway. I have solved it buy using <table>.

      Mike
  • Try putting

    .photo-item li {
    display: inline-block;
    }

    It should solve the problem...
    • [2] replies
    • Tried it but no go. Thanks anyway.
    • Thank you, golusin. This solved a problem that I was having in Firefox.
  • No problem, I'm glad you got it fixed!
Join the discussion

Next Topics on Trending Feed

  • 11

    css display inline problem

    I have a problem with the display:inline; css instruction. Below is the relevant css and html all to do with the same page. The #nav inline works ok, the .photo-item doesn't. I've tried changing sizes, tried the float option but can't get what I want. You can see the #nav working but the photos not at Mike Hayes' Photographs.