CODEWITHSUNDEEP
htmlcssimagenavigationpositioning
user2885415
user2885415

Reputation:

HTML CSS Navigation Menu positioning text and images

I am trying to create a I am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create a

HTML

<div id="pageTop"> 
    <nav>
        <ul>
            <li><a href="apps/fade-ifit.html"> <img src="images/search.png" alt="" class="headerCon" /> <navText> Home </navText> </a> </li>

        </ul>
    </nav>
</div>

CSS

nav > ul > li > a {
    color: #aaa;

}



nav > ul > li > div ul > li {
    display: block;
}

Upvotes: 0

Views: 9777

Answers (2)

Erik J. Sturcke
Erik J. Sturcke

Reputation: 178

You can make the <img> elements block elements and center them using an auto margin.

ul img {
    display : block;
    margin  : 0 auto;
}

Another would be to use background images along with a background position:

ul li.home {
    background-image    : url(...);
    background-position : center;
}

You will probably also want to remove the spaces between the <li> elements. I like doing this by omitting the optional closing tags so you would have:

<ul>
    <li><a href=...><img src=... />Item 1
    <li><a href=...><img src=... />Item 2
    ...
</ul>

Other options for removing spaces can be found here: How to remove the space between list items

Edit: JSFiddle added with a stripped down version to show how this could work.

Upvotes: 3

Scott Selby
Scott Selby

Reputation: 9580

just put a line break in the <li>

   <li><a href="..."> <img src="..." class="headerCon" /> <br/>
        <navText> Home </navText> </a> 
   </li>

I would take out the <navText> too, that's not valid HTML

   <li><a href="..."> <img src="..." class="headerCon" /> <br/>
        Home </a> 
   </li>

Upvotes: 0

Related Questions