Frage Wie bekomme ich die beiden Navigationen auf eine Höhe mit dem Logo?

[Vanessa0506]

Hallo,
ich würde gerne die Hauptnavigation auf eine Linie mit dem Logo bringen. Hat jemand einen Tipp?
der hmtl Code sieht so aus:

<!-- Header -->
<div id="header">

<div class="wrapper">
<a href="index.html"><img src="images/UI_Logo_RGB.png" height=25% width=25% alt=Union Investment"></a>
<ul id="metanavigation">
<li><a href="Impresum.html">Impressum</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>

<ul id="navigation">
<li><a href="Unternehmen.html">Unternehmen</a></li>
<li><a href="Karriere.html">Karriere</a></li>
<li><a href="Presse.html">Presse</a></li>
<a href="index.html"><img src="images/lupe.png" height="25" width="70" alt=Privatkunden"></a>
<a href="index.html"><img src="images/login.png" height="25" width="70" alt=Privatkunden"></a>
</ul>
</div>
</div>
</div>

Vielen Dank im voraus!
Vanessa

 

[basti1012]

hast du dazu auch ein Link ?
Oder mindestens die Css dazu ?
Du solltest dir da vieleicht auch mal Flexbox anschauen , damit ist das gar nicht so schwer.
Mit deiner jetzigen html anordnung wird das schon schwerer

Außerdem hast du eine menge""""" vergessen

 

[Vanessa0506]

@charset "utf-8";

/*

• CSS-Design
• Union_Investment-Webseite
• Union_Investment_Startseite

*/



/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
}

body{
font: 400 15px/24px
font-family: 'Fira Sans', sans-serif;
color: #ffffff;
}

/* Layout * * * * * * * * */

.wrapper{
width:960px;
margin: 0 auto;
overflow: hidden;
position:relative;
}

#header{
background: #ffffff;
padding: 40px 0 10px 0;
}

#teaser{
height: 200px;
padding: 10px 0 10px 0px;
}

#footer{
background: #d1d3d2;
margin: 0 auto;
padding: 10px 0px 20px 0px;
}

/* Spalten * * * * * * * * */

.col_1, .col_1_2, .col_1_3{
float: left;
width: 33%;
margin: 10px 10px 10px 10px;
text-align: center;
}


.col_1{
width:960px;
}

.col_1_2{
width:460px;
}
.col_1_3{
width:300px;
}


/* Navigation */
ul#metanavigation{
float: right;
margin: 0px 10px 0px 0px;
}
ul#metanavigation li{
display: inline;
margin: 0 0 0 40px;
list-style: none;
}

ul#metanavigation li a{
color: #242424;
text-decoration: none;
text-transform: none;
font-size: 16px;
font-family: 'Fira Sans', sans-serif;
}
ul#metanavigation li a:hover{
color: #000000;
text-decoration-line: underline;
text-shadow: none;
}

ul#navigation{
float: right;
margin: 0px 10px 0px 0px;
margin-top: 0xp;
}

ul#navigation li{
display: inline;
margin: 0 0 0 60px;
list-style: none;
}

ul#navigation li a{
color: #003F74;
text-decoration: none;
text-transform: none;
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
}

ul#navigation li a:hover{
color: #226796;
text-decoration-line: underline;
text-shadow: none;
}



/* Typografie */

h1, h2, h3, h4, h5, h6{
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
margin: 0 0 10px 0;
}
p{
font-family: 'Fira Sans', sans-serif;
margin: 0px 0px 0px 0px;
color: #242424;
font-size: 18px;
line-height: 24px;
text-align: left;
}

#teaser h1{
color: #003F74;
font-size: 42px;
line-height: 42px;
margin: 0 20px 0 0;
text-align: left;
font-family: 'Caveat', cursive;
position: absolute;
top: 60px;
right: 50px;
}

#teaser h2{
color: #83898E;
font-size: 18px;
line-height: 24px;
margin: 20px 0;
text-align: left;
position: absolute;
top: 200px;
right: 270px;
}

#wrapper h3{
color: #003F74;
font-size: 18px;
line-height: 20px;
margin:40px 20px 20px 0;
text-align: left;
font-weight: bold;
}
#footer h3{
color: #003F74;
font-size: 18px;
line-height: 20px;
margin:10px 10px 10px 0;
text-align: left;
font-weight: bold;
}
ul#footer{
font-family: 'Fira Sans', sans-serif;
margin: 0px 0px 0px 0px;
color: #242424;
font-size: 18px;
line-height: 25px;
text-align: left;
}
ul#footer li{
margin: 0 0 0 0px;
list-style: none;
}
ul#footer li:hover{
color: #226796;
text-decoration-line: underline;
text-shadow: none;
}
.button{
color: #003F74;
font-size: 18px;
font-family: 'Fira Sans', sans-serif;
float: left;
margin:20px 0 50px 0;
text-decoration-line: underline;
}

 

[Gelöschtes Mitglied 36401]

Bitte zuerst einmal den HTML-Code fehlerfrei machen, und dann bitte auch einen Link zur Seite posten.