• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS-Navi nebeneinander?

Schnuckenpapa

New member
Guten Abend allerseits!

Ich habe folgende Frage:
Was muss ich tun damit die Navigation in der dargestellten Anordnung im gelben div (id=butt) erscheint? Bei position:relative werden sie zwar nebeneinander gesetzt, aber jeder Button in einer neuen Zeile und die div-Höhe wird augedehnt. Mit magin-top:- ...px wandert zwar der Button nach oben, aber die div-Höhe bleibt gedehnt.
Es sollte im IE6..+, Firefox,Opera funktionieren.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forumfrage</title>
<style type="text/css">
a.navi:link,a.navi:visited,a.navi:active  
{display:block;
font-size:16px;
font-weight:normal;
font-style:italic;
color:#FFFFFF;
position: absolute;
height:28px;
width:110px;
line-height:28px;
text-decoration:none;
vertical-align:middle;
text-align:center;
background-color:#000099}

a.navi:hover
{text-decoration:underline;
color:#FFFF00;
background-color:#990099}
</style>

</head>
<body style="margin:0px;background-color:gray;">
<div id="inhalt" style="width:900px; height:800px; margin:auto; background-color:#00FFFF; border:1px solid yellow;">
<div id="in1" style="width:710px; height:81px; margin:auto; text-align:center; border:1px solid red;"></div>
<div id="butt" style=" width:710px; height:72px; margin:auto; background-color:#FFFF99; border:1px solid black;">
<a href="" class="navi" style="left:2px; top:3px; text-decoration:underline; color: #FFFF00;" onclick="alert('Zur Startseite')">Home</a>
<a href="" class="navi" style="left:121px; top:3px;" onclick="alert('News und aktuelle Events')">Aktuelles</a>
<a href="" class="navi" style="left:240px; top:3px;" onclick="alert('Beschreibung der Angebote mit Bildern')">Unser Angebot</a>
<a href="" class="navi" style="left:359px; top:3px;" onclick="alert('Angebot für gesellschaftliche Ereignisse')">Gesellschaften</a>
<a href="" class="navi" style="left:478px; top:3px;" onclick="alert('Grillgelegenheit im Freien')">Grillen & mehr</a>
<a href="" class="navi" style="left:597px; top:3px;" onclick="alert('Ferrari, Fussball, Gesang usw.')">Sport-Fans</a><br>
<a href="" class="navi" style="left:2px; top:40px;" onclick="alert('Zur Startseite')">Sonnenschein</a>
<a href="" class="navi" style="left:121px; top:40px;" onclick="alert('Die gemütliche Ecke')">Stübchen</a>
<a href="" class="navi" style="left:240px; top:40px;" onclick="alert('Wenns was grösseres wird')">Der Saal</a>
<a href="" class="navi" style="left:359px; top:40px;" onclick="alert('Viele Bilder von Dekorationen, Ereignissen usw.')">Bilderschau</a>
<a href="" class="navi" style="left:478px; top:40px;" onclick="alert('Wir sorgen uns um Sie')">Unsere Truppe</a>
<a href="" class="navi" style="left:597px; top:40px;" onclick="alert('Um dem Gesetz Genüge zu tun')">Impressum</a>
</div>
<div id="in2" style="width:690px;height:438px;margin:10px auto; border:10px double #663300;"></div>
</div>
</body>
</html>

Ich bitte um Hilfe bzw. Rat

Grüsse vom Schnuckenpapa

ps: Diese Farben sind nur für die Anfrage eingesetzt, normalerweise sieht das anders aus (Bildhintergrund, Verlauf usw.)!
 
hallo,

du musst das "display: block" durch "display: inline" ersetzen und "position: absolute" ganz rausnehmen - dann sind sie in deinem gelben Container :)

planet4.
 
Hallo, danke für die schnelle Antwort.

Das habe ich ausprobiert, bringt allerdings einige Mängel mit sich:
1.) Die Breite wird durch die Textlänge bestimmt
2.) Ich kann kein Hintergrundbild verwenden wie es in der realität eigentlich ist.
3.) Es werden so viele Button in eine Reihe gepackt wie reingehen.

Gibt es noch was besseres?
Grüsse vom Schnuckenpapa
 
hallo,

dann musst du doch beim "display: block" bleiben, noch ein "float: left" dazu (das "position: absolute" auf jeden Fall weg) - mit "margin-right" oder margin-bottom" oder so kannst du sie dann noch ein bisschen auseinanderrücken...


planet4.
 
Zurück
Oben