HTML and CSS3 menu questions

Question

Thank you for reading my question.

I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):

I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo. Failing to get them next to each other correctly, I used them in a list

    <div class="wrap_header">
<ul>
    <li><a href="#">MENU ITEM 1</a></li>
    <li><a href="#">MENU ITEM 2</a></li>
    <li id="header logo"><img src="the image"></li> 
    <li><a href="#">MENU ITEM 3</a></li>
    <li><a href="#">MENU ITEM 4</a></li>
</ul>
</div><!--END wrap_header-->

Here I'm stuck: - I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed. - I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that. It'll have to look something like this:

empty space                   THE IMAGE
MENU ITEM 1    MENU ITEM 2    THE IMAGE    MENU ITEM 3    MENU ITEM 4
empty space                   THE IMAGE

Just as dinodsaurus mentioned below. Also, your li with the logo has a strange ID. Rename it to header_logo or something similar. An ID shouldn't contain any space characters (ie multiple values). — Dr.Flink
– Dr.Flink, Commented Feb 15, 2013 at 13:11
i noticed and had already changed it. But thanks for pointing it out! — PSZ_Code
– PSZ_Code, Commented Feb 15, 2013 at 13:37

dinodsaurus · Accepted Answer · 2013-02-15 14:09:31Z

1

I'm not sure whether I understood the question. But to my answer would be:

<div class="wrap_header">
<ul>
    <li><a href="#">MENU ITEM 1</a></li>
    <li><a href="#">MENU ITEM 2</a></li>
    <li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li> 
    <li><a href="#">MENU ITEM 3</a></li>
    <li><a href="#">MENU ITEM 4</a></li>
</ul>
</div><!--END wrap_header-->

And style it like so:

    ul li{
            margin-right:20px;
            line-height:200px;
            float:left;
    } 
    ul li img{
            height:200px;
            width:auto; 
   }
   ul li a {
            text-decoration:none;
            border-bottom:2px solid red;
   }

You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom. Here you can see jsFiddle

edited Feb 15, 2013 at 14:09

answered Feb 15, 2013 at 12:57

dinodsaurus

5,1054 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

PSZ_Code Over a year ago

Thank you, pretty much solved my problem. However still these: -My header and content area are now divided by a huge white space - Do you know a way to alter the line under the links, I want my own blue, thicker (2-3px) and farther below the words?

dinodsaurus Over a year ago

i edited my answer so you can see how to add custom underline

PSZ_Code Over a year ago

I had tried that before, but didn't work then, guess I wrote something wrong down. I noticed the text in my question wasn't too good. Sorry about that, must have been tired. Yet could you explain me why my content area (div under the wrap_header) has moved down, leaving an empty space in between (this does not happen in adobe dreamweaver, but does when opening the .html in firefox) EDIT: deleting Vertical-align middle doesn't really change anything. And it's the line-height that move my content down.

PSZ_Code Over a year ago

so far, thanks for answering all these questions. Last problem is the border-bottom is way to low (like 3/4 of the total height, text is in 1/2 of height). {EDIT: dreamweaver again, in firefox it is normal height (just below text)} Feel free to explain why we need a float:left; to get this working (i tried without and didn't work). Vertical-align top/bottom doesn't really do anything

dinodsaurus Over a year ago

just add this code and it should work ul li#header_logo{ line-height:0; } give the li with image inside it id of header_logo what we need to do is remove line-height from image list item. I think this will help.

|

Collectives™ on Stack Overflow

HTML and CSS3 menu questions

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related