Hallo zusammen,
seit gut einem Tag versuche ich jetzt schon eine Menübar zu erstellen.
Ich hätte links gerne Logo in der Mitte eine Navigation und rechts dann noch irgendein Text.
So weit so gut, leider bekomme ich die drei einzelnen Elemente nicht in einer geraden Linie.
Der HTML Code sieht so aus:
HTML
<div id="wrapper_bereich_oben_logo">
<img src="./Bilder/logo.png" alt="Firmenlogo">
</div>
<div id="wrapper_bereich_oben_nav">
<nav>
<ul>
<li> Startseite </li>
<li> Standort </li>
<li> Kontakt </li>
</ul>
</nav>
</div>
<div id="wrapper_bereich_oben_text">
<p> Hier steht ein Text </p>
</div>Das passende CSS sieht so aus:
HTML
#wrapper_bereich_oben_logo {
float: left;
}
#wrapper_bereich_oben_logo img {
width: 7em;
height: 7em;
}
#wrapper_bereich_oben_nav {
float: left;
}
#wrapper_bereich_oben_nav li {
display: inline;
list-style-type: none;
margin-left: 2em;
}
#wrapper_bereich_oben_text {
text-align: left;
margin-left: 2em;
}Jemand eine Idee, wie man das in einer schönen Linie zaubern könnte? das links das Logo in der Mitte die Navigation und rechts irgendein Text steht?
- - - Aktualisiert - - -
Ich habs jetzt doch gelöst bekommen, für die, die es wissen wollen:
HTML
body {
}
/* Einstellungen für den oberen Bereich der Website */
.wrapper_bereich_oben {
background-color: silver;
}
#wrapper_bereich_oben_logo {
float: left;
}
#wrapper_bereich_oben_logo img {
width: 7em;
height: 7em;
}
#wrapper_bereich_oben_nav {
float: left;
margin-top: 2em;
}
#wrapper_bereich_oben_nav li {
display: inline;
list-style-type: none;
margin-left: 2em;
padding-top: 2em;
}
#wrapper_bereich_oben_text p {
margin-top: 3em;
margin-left: 7em;
float: left;
}