HTML and CSS3 menu questions

综合编程 2018-07-13 阅读原文

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

Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the%20image. However the%20image 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

Problem courtesy of: Pepe

Solution

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

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%20image 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

Solution courtesy of: dinodsaurus

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

10 Pure CSS3 Tutorials And Examples ADVERTISEMENT CSS3 tutorials are the great help for web designers and web developers. With the help of CSS3 tutoria...
Is there js plugin convert the matrix parameter to... Suppose I have css3 transform style: img { -webkit-transform:rotate(10deg) translate(100px,20px); -m...
Multiple Dynamic Columns I'm trying to create a column-based, blog layout. I want the text to wrap to a new column when it hits the bottom of th...
css3 animation triggered each time the div is fade... I am using -webkit-animation on a div like the following: #agFloor { background-image: url('http://blabla/someth...
CSS3 Flexbox: display: box vs. flexbox vs. flex I became yesterday a website in the school which use the css3 flexbox statement. I never used that before. So i google ...