WordPress.org

Support

Support » How-To and Troubleshooting » How to match image width and navigation width on a WordPress photoblog!?!?

How to match image width and navigation width on a WordPress photoblog!?!?

  • cowlishaw
    Member

    @cowlishaw

    Hey folks, this should be fairly simple and straightforward but I cannot (for the life of me) find any posts on this simple howto that I need to finish asap! lol I want to edit the CSS of my template so that the navigation menu will always match the exact width of the image. Sometimes the images will be different sizes though but I want the navigation menu and container to change with the image width. There has to be a simple image width tag somewhere that I can use to accomplish this. Please help me, anybody! 🙂 Thanks!

Viewing 1 replies (of 1 total)
  • You need to have the navigation and image inside the same container div. The container div then needs to have its width and height set to auto, overflow to hidden and display to inline-block.

    Like this:

    .container { height: auto; width: auto; overflow: hidden; display: inline-block; }
    .prev { width: 50px; float: left; }
    .next {width: 50px; float: right; }
    <div class="container">
      <div class="image">
        <img name="test" src="" width="400" height="200" alt="" style="background-color: #99FF33" />
      </div>
      <div class="prev">PREV</div>
      <div class="next">NEXT</div>
    </div>

    Hope that helps

    Peter

Viewing 1 replies (of 1 total)
  • The topic ‘How to match image width and navigation width on a WordPress photoblog!?!?’ is closed to new replies.