CODEWITHSUNDEEP
htmlcsswordpresswidth
Simon Forsberg
Simon Forsberg

Reputation: 13331

HTML: Why is element taking up so much width?

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?

Upvotes: 0

Views: 1955

Answers (2)

vlasits
vlasits

Reputation: 2235

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.

Upvotes: 2

toniedzwiedz
toniedzwiedz

Reputation: 18553

Why would the images take the whole space when they're too small?

Just delete the margin-right: -133 property from the id='access' nav and alter the size of photos. Change the size propety on #access img (it's currently 15% but you can set it to 22%).

The images will scale and become higher so you might want to resize the header element or possibly crop the images.

You could also add one more image to the nav and fiddle with left/right margin and padding on #access img.

Upvotes: 1

Related Questions