Align menu nav with image logo

Discussion in 'CSS' started by piropeator, Dec 4, 2015.

0
  1. #1
    Hi. I have this code, is a simple example.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="logo_demo.jpg" alt="logo">
        </div>
        <nav>
            <ul>
                <li><a href="">Opción 1</a></li>
                <li><a href="">Opción 2</a></li>
                <li><a href="">Opción 3</a></li>
                <li><a href="">Opción 4</a></li>
                <li><a href="">Opción 5</a></li>
            </ul>
        </nav>
    </header>   
</body>
</html>
    HTML:
    body {
    background: #fffffa;
}

header {
    width: 100%;
}

header .logo {
    float: left;
}

header nav {
    background: #024959;
    float: right;
}

header nav ul {
    list-style: none;
}


header nav ul li {
    float: left;
}

header nav ul li a {
    color: #fff;
    padding: 20px;
    display: inline-block;
    text-decoration: none;
}
    Code (CSS):
    I want the height of the nav menu is the same as the logo image.
    The logo image logo image can be any size and que nav (menu) should have the same height.
    After that I want to get the menu in a responsive code.
    Some body can help me?
     
    piropeator, Dec 4, 2015 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    So you are trying to be trendy with HTML5... ul (which is semantically a list) inside nav which is semantically a list of links is not trendyy; it is just stupid. as for controlling the height you could try setting height 100% and it should size to the container, bu then it will be sitting at the top of the wrapper. if you want the content and elements of the menu to spread out and fill the area you will probably need to script and end up with yet another crap page on the internet that needs javascript to do layout.

    You could try styling with display: table-cell so you have text vertical align to handle positioning, but I don't see how you resize a menu to a logo without some kind of ugly distortion to one or both elements.
     
    COBOLdinosaur, Dec 18, 2015 IP
  3. piropeator

    piropeator Well-Known Member

    Messages:
    194
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    121
    #3
    But the menu has not changed at all, just the height of the entire nav.
    The menu height should not change because it is independent of the height of the nav.
    But I want to change the image of the logo on the other without changing much height nav.
     
    piropeator, Dec 21, 2015 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Ok, for starters a logo is typically NOT content, its a presentational affectation. As such it has ZERO business in the markup as a IMG tag. It is also HIGHLY unlikely you are doing anything that actually warrants that DIV around it. Of course you've also got the HTML 5 code-bloat redundancies in there so Christmas only knows how you'd have a proper document structure.

    IF you kept the IMG tag just set everything to inline-block and vertical-align:middle -- BUT...

    Really that div/img should be a H1 with text inside it and a image replacement method like gilder-levin. Float the H1, pad ONLY the top of the menu until it drops to where you want it, and be prepared to change that with media queries when the screen is too small to fit them side-by-side.

    That said without seeing the image in question it's kind-of hard to say what the proper code would be. Content dictates markup, content and markup dictate style and layout.
     
    deathshadow, Dec 21, 2015 IP