将导航栏与徽标对齐

Question

I'm trying to align my navigation menu but can't get it to work. What I want is - on the left side I want a small logo which also is a link that links to the start-page. And in the middle of the webbsite I want the other "text-links" to be. Like this

Here is the code and how it looks at the moment. https://jsfiddle.net/oliha089/wh1zwg4x/ The logo is not at the left and the text is not in the middle of the website.

HTML

    <header>
        <div class = "menu" >
            <ul>
                <li> <a  id = "logobut" href = "start-page.html">
                    <!-- försök flytta loggan till vänster kanten -->
                    <img id = "logoalign" src = "logga8svart.jpg" /> </a> </li>

                <li> <a id = "portf" href = "portfolio-page.html"> PORTFOLIO </a> </li> 
                <li> <a  id = "about" href = "aboutme-page.html"> ABOUT </a> </li> 
                <li> <a id = "contact" href = "contactme-page.html"> CONTACT </a> </li> 
            </ul>
        </div>
    </header>

CSS

/* menu CSS-code */

.menu ul{
list-style: none;
z-index: 999;
background-color: white;/*#444;*/
text-align: center;
padding: 0;
margin: 0;
position: fixed;
width: 100%;
opacity: 0.7;
height: 50px;   
}

.menu a:hover {
text-decoration: underline;
opacity: 1;
}

.menu a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
display: block;
transition: background-color;
margin-left: 20px;
margin-right: 20px;
}

#logobut {
margin-right: 100px;
}
.menu li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display: inline-block; 
}   
@media screen and (min-width: 600px) {
.menu li {
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.2em;
}

#logoalign {
height: 40px; 
vertical-align: middle;
}

Thanks.

Answer 1

Here you go

Css

/* menu CSS-code */

.menu ul{
list-style: none;
z-index: 999;
background-color: white;/*#444;*/
text-align: center;
padding: 0;
margin: 0;
position: fixed;
width: 100%;
opacity: 0.7;
height: 50px;   
}

.menu a:hover {
text-decoration: underline;
opacity: 1;
}

.menu a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
display: block;
transition: background-color;
margin-left: 20px;
margin-right: 20px;
}

#logobut {
margin-right: 100px;
}
.menu li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display: inline-block; 
}   
@media screen and (min-width: 600px) {
.menu li {
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.2em;
}

#logoalign {
height: 40px; 
vertical-align: middle;

}

.logoleft{
float:left;
}

HTML

<header>

        <div class = "menu" >
            <ul>
                <li class="logoleft"> <a  id = "logobut" href = "start-page.html">
                    <!-- försök flytta loggan till vänster kanten -->
                    <img id = "logoalign" src = "logga8svart.jpg" /> </a> </li>

                <li> <a id = "portf" href = "portfolio-page.html"> PORTFOLIO </a> </li> 
                <li> <a  id = "about" href = "aboutme-page.html"> ABOUT </a> </li> 
                <li> <a id = "contact" href = "contactme-page.html"> CONTACT </a> </li> 
            </ul>
        </div>
    </header>

Answer 2

Here is an example with flex box and without lists:

 nav { display: flex; width: 100%; background-color: grey; padding-left: 10px; justify-content: space-between; } .navPoints { display: flex; padding-left: 5px; } span { padding: 10px; font-family: Arial; } span:hover { cursor: pointer; color: white; } 

 <nav> <img src="https://www.google.ch/search?q=logo&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjp4vKH9qnNAhXD0RQKHZMHCaMQ_AUICCgB&biw=1600&bih=1085#imgrc=as8oG3SG3wToVM%3A"> <div class="navPoints"> <span>PORTFOLIO</span> <span>ABOUT</span> <span>CONTACT</span> </div> <div></div> </nav> 

With flex box you can put something in a row like you would it do with float, but it's much easier and you have different ways to place it where you want. Check this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

So it's really easy. I took a random logo for make the example.

EDIT: Adding the links around in case of a span that should'nt be a problem for you :)

Cheers.

Answer 3

Add this,

.menu{
width:100%;
}
.menu ul{
background-color: white;/*#444;*/
text-align: center;
padding-left: 0;
margin: 0;
width: 100%;
opacity: 0.7;
height: 50px;
float:left; 
}
.menu ul li{
 list-style-type:none;
 display:inline-block;
 padding-left: 20px;
 padding-right: 20px;
 float:left;    
}
.menu a:hover {
text-decoration: underline;
opacity: 1;
}
.menu a.active {
background-color: #111;
color: #444;
cursor:pointer;
}
.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
transition: background-color;
}
#logobut {
padding-right: 20px;
}