Menü in Feststehende kopfzeile einfügen
TL
- css
0 Matthias Apsel0 Matthias Apsel0 TL
Hallo, ich würde gerne ein Menü zum ausklappen, so wie es hier definiert ist: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm@title=http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm in eine Feststehende Kopfzeile einfügen die ich folgenderweise definiert habe:
.Menü {
position:fixed;
top:0px; left:0px; right:0px;
background:#6600FF;
text-align:center;
padding:10px;
font-family:'Arial';
font-size:22px;
font-weight:bold;
es wäre nett wenn mir hierbei jemand helfen könnte.
Om nah hoo pez nyeetz, TL!
Wenn du dir das Beispiel anschaust, könntest du einfach deine CSS-Festlegungen für .Menü
auf #rahmen
anwenden und schon wäre ein Anfang getan.
Matthias
Om nah hoo pez nyeetz, TL!
* Rahmen groß schreiben
* beispielsweise firebug verwenden um live zu sehen, welche Änderung was bewirkt
Matthias
Ich habe hier einmal den verwendeten Quelltext hineinkopiert:
CSS-Teil:
@charset "ISO-8859-1";
body { background-color:#C0C0C0; font-weight:normal; font-family:Comic Sans MS; font-size:20px; }
h1#Überschrift {
border-with:medium;
border-style:groove;
border-color:aqua;
text-align:center;
color: red;
font-weight:bold;
font-size:66px;
font-family:'Comic Sans MS';
}
.Menü {
position:fixed;
top:0px; left:0px; right:0px;
background:#6600FF;
text-align:center;
padding:10px;
font-family:'Comic Sans MS';
font-size:22px;
font-weight:bold;
}
body {
padding-bottom:35px;
padding-top:42px;
}
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em;
/* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: White; background-color: #6600FF;
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
color: white; background-color: #6600FF;
}
border-left-color: black; border-top-color: black;
color: white; background-color: #6600FF;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: white;
}
HTML Teil:
<!-- Start Menü -->
<div id="Rahmen"><ul id="Navigation">
<li><a class="Menü" href="Impressum.html">Impressum</a>
<ul>
<li><a href="seitenübersicht.html">Seitenübersicht</a></li>
</ul>
</li>
</div>
</ul>