Home/ Questions/Q 7972357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:50:32+00:00

I have been working on a custom wordpress theme, this is part of a

  • 0

I have been working on a custom wordpress theme, this is part of a schoolproject where we’re supposed to redesign a homepage for an association (in my case a theater group).

I’ve customized the wordpress menu to add images for the four pages. However, the <nav> element that these images are located in is taking more width than expected, even though I’m using width: auto in the CSS. Because of this I have repositioned the <nav> using margin-right: -133px; which I feel shouldn’t be the way to solve this.

The HTML for the upper banner is: (with a whole bunch of commented code removed)

<header role="banner" id="branding">
    <a href="http://dev.zomis.net/talat/">
        <img alt="" src="http://dev.zomis.net/talat/wp-content/themes/talat/talat-logo.png" id="header_logotype">
    </a>
    <nav role="navigation" id="access">
        <a href="http://dev.zomis.net/talat/forening">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_forening_gray.jpg" id="menu_image_forening" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/scen">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_scen.jpg" id="menu_image_scen" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/film">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_film_gray.jpg" id="menu_image_film" class="menu_image">
        </a>
        <a href="http://dev.zomis.net/talat/natverk">
            <img src="http://dev.zomis.net/talat/wp-content/themes/talat/talat_meny_natverk_gray.jpg" id="menu_image_natverk" class="menu_image">
        </a>
        <div class="menu-talat-container"><ul class="menu" id="menu-talat"></ul></div>
    </nav>
</header>

To easier see the problem, I’ve marked the whole header element with red color, and the nav with yellow.

I have been using Firebug a lot to play around and see what is causing this but I can’t figure it out. I’ve been suspecting the empty <div class="menu-talat-container"> within the <header> to be the cause of this but I have been removing that part many times with Firebug and having seen no difference.

The page can be seen at: http://dev.zomis.net/talat/scen

An image of how it looks and the part I don’t understand marked with the text “Why is this yellow part sticking out to the right?”:Why is this yellow part sticking out to the right?

When removing the margin-right property the question becomes instead “Why is there no image here?”:
Why is there no image in the marked area?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason it is happening is that the images’ widths are set to 15%. Altogether they only account for 60% of the width of the container. When you add in the manually set margins it stills comes up to less than 100%. So the #access div just adds that space.

    I think it’s not a good idea to set an image’s width to a percentage. I’d suggest editing the images to fit the actual space you want them to occupy and then not setting the images’ width and height in your css.

    • 0