Permalänk
Medlem

Horisontella menyer Css

hej!
Jag håller på med ett litet projekt. Jag vill att min webbsida ska ha en horisontell meny i nederkant av headern. Jag har lyckats få dit en meny som ser ut som jag vill - problemet är bara att när jag minskar sidfönstret så försvinner menyn under "main/content". Jag har försökt med olika typer av positionering på headern respektive menyn, men inget hjälper... Har någon en idé om vad jag kan göra?
// Linda

Htm:
<div id="header">
<h1> Rubrik</h1>

<div id="menycontainer">
<ul>
<li><a href="#">underrubrik 1</a></li>
<li><a href="#" id="current">Underrubrik 2</a></li>
<li><a href="#">underrubrik3</a></li>
<li><a href="#">underrubrik4</a></li>
<li><a href="#">underrubrik5</a></li>
</ul>
</div>
</div>

css:
#header {
position: absolute;
width: 100%;
height: 16%;
background: #D36832;
color: #FFF;
left: 0;
}

#menycontainer ul {
float: left;
margin-left: 0;
padding-left: 21%;
}

#menycontainer li {
display: inline;
margin: 0px;
padding: 0px;
}

#menycontainer ul a {
float: left;
text-decoration: none;
background: #CC9999;
margin-right: 0.5em;
padding: 0.3em 2em;
}

#menycontainer a:link {
color: #ffffff;
}

#menycontainer a:visited {
color: #ffffff;
}

#menycontainer a:hover {
background: #996666;
}

#menycontainer a#current {
background: #FFCC66;
color: #000000;
}

Visa signatur

Linda

Permalänk
Medlem

kan det ha något med position: absolute att göra?

Citat:

Absolute: The element is positioned relative to its first positioned (not static) ancestor element

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

Din #header har en percent-height vilket gör att den förminskas när du ändrar storlek på fönstret. Mistänker att det är det du syftar på. Din #menycontainer är också helt onödig då ul är ett block-element precis som div. Notera även att jag importat en css fil för reset från google p.g.a att alla browsers inte kör samma defaults.

<div id="header"> <h1> Rubrik</h1> <ul id="menycontainer"> <li><a href="#">underrubrik 1</a></li> <li><a href="#" id="current">Underrubrik 2</a></li> <li><a href="#">underrubrik3</a></li> <li><a href="#">underrubrik4</a></li> <li><a href="#">underrubrik5</a></li> </ul> </div>

@import url(https://reset5.googlecode.com/hg/reset.min.css); #header { background: #D36832; color: #FFF; height: 100px; position: relative; } #menycontainer { bottom: 10px; left: 5px; position: absolute; } #menycontainer li { display: inline-block; } #menycontainer a { background: #CC9999; margin-right: 0.5em; padding: 0.3em 2em; text-decoration: none; } #menycontainer a:link { color: #ffffff; } #menycontainer a:visited { color: #ffffff; } #menycontainer a:hover { background: #996666; } #menycontainer a#current { background: #FFCC66; color: #000000; }