Problem mit Positionierung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
bekommen
bleiben
boxen
code
container
dank
display
einzelnen buttons
header
image
inhalt
mache
oberen rand
pfad
position
problem
rand
unteren rand
url
-
Hallo Leute
Ich habe ein Problem, bei dem Entwurf eines neuen Webdesigns.
Es geht um das Menü der Seite.
Es ist folgendermaßen aufgebaut:
<div id="menu"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div>
Das CSS dazu sieht wie folgt aus:
/******MENU******/ #menu { position: relative; width: 800px; height: 30px; background-image: url(./img/menubg.png); } #menu ul { list-style: none; padding: 0px; margin: 0px; } #menu li { position: absolute; bottom: 0; left: auto; float: left; margin: 0px 10px 0px 10px; background: #ccc; padding: 0px; } #menu a { display: block; text-decoration: none; color: #000; font-weight: bold; height: 25px; padding: 0px 15px 0px 15px; line-height: 25px; vertical-align: middle; font-size: 1.5em; } #menu a:hover { border-bottom: 5px solid #f00; }
Das Problem ist nun folgendes: Ich habe mit "relative/absolute" die Menüpunkte wie gewollt an den unteren Rand. Geplant ist es so, dass die Menüpunkte Horizontal nebeneinander sind, deswegen "float: left;" für <li>
Allerdings werden wenn ich mehrere Menüpunkte (Link 1, Link2, usw.) habe alle übereinander gestapelt, anstatt nebeneinander dargestellt.
Ich bin nicht allzu erfahren und habe keine Ahnung wie ich das beheben könnte. Ich würde mich freuen, wenn ihr mir helfen könntet.
Wenns hilft und ihr euch das ganze dann besser vorstellen könnt, lade ich es auch mal auf den Webspace.
Danke für Hilfe
Gruß -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi there,
Also wenn du ein Menü am unteren Rand haben willst, würde ich das ganze Menü in eine Div-Box packen und dann die einzelnen Menüpunkte ebenfalls. Mit margin: 0 auto; kannst du dann die äussere Div zentrieren:
<div class="menu"> <div class="menupunkte"> Menu1 </div> <div class="menupunkte"> Menu2 </div> <div class="menupunkte"> Menu3 </div> </div>
Und die CSS:
div.menu{ width: 300px; height: 50px; margin: 0 auto; } div.menupunkte{ float: left; width: 100px; height: 50px; margin: 0 auto; }
Damit hast du das Menu zentriert und die einzelnen Buttons nebeneinander.
Wenn du das Menü unten haben willst (was ich nicht verstehen kann) dann machst du ganz einfach oben eine unsichtbare divbox rein bzw den Inhalt der Webseite in einer eigenen box:
<div class="inhalt"> </div> <div class="menu"> <div class="menupunkte"> </div> <div class="menupunkte"> </div> <div class="menupunkte"> </div> </div>
CSS Beispiel:
... div.inhalt{ width: 300px; height: 600px; }
Irgendwie so ^^
Gruss
pete -
Ansatz mit den DIV ist ne überlegung wert, aber trifft nicht ganz mein Problem.
Das Menu soll nicht nach unten. Der DIV "menu" ist zwischen Header und Content. Nur die einzelnen Menüpunkte sollen am unteren Rand des "menu" DIV positioniert werden. Das Menu ist 30px hoch, die Links normal nur 25px. Geht man aber mit der Maus darüber fahren sie quasi noch 5px nach oben aus. Ich hab auch mal das ganze hochgeladen und hoffe ihr versteht wie ich es meine.
http://seppuku0109.lima-city.de/steel/
Zu sehen ist nur "Link 2", da er direkt über "Link 1" ist. Nochmal zur Fragestellung: Wie bekomme ich die Menüpunkte nebeneinander statt übereinander, aber am unteren Rand positioniert.
Wenn ich folgende Punkte weglasse, dann sind die Links zwar richtig angeordnet, aber am oberen Rand des Menu und nicht unten positioniert.
#menu { position: relative; } #menu li { position: absolute; bottom: 0; }
Danke schonmal für Lösungsvorschläge/-ansätze -
Wenn du mit Div arbeiten möchtest, dann machs doch einfach! :D
//Headerbereich mit Hintergrundbild und festgelegten width & height <div class="header"> </div> //Menübalken direkt unter Header <div class="container_menu"> //Die einzelnen Buttons <div class="menupunkt"> Link1 </div> <div class="menupunkt"> Link2 </div> <div class="menupunkt"> Link3 </div> //Menübalken wieder schliessen </div> <div class="content"> </div>
CSS:
div.header{ background-image: url(pfad/zum/bild); width: 800px; height: 300px; } div.container_menu{ width: 800px; height: 50px; } div.menupunkt{ float: left; width: 100px; height: 50px; } div.content{ width: 800px; height: 500px; }
Verstehe ich dich falsch?
Gruss
pete -
Soweit alles richtig, was du schreibst. Aber wenn ich es so mache, dann sind die Links zwar richtig angeordnet, aber dann funtioniert gerade das nicht, was ich bezwecken will.
Die Links sind nicht ganz so hoch wie es der Container des Menüs ist. Deswegen sind sie normalerweise am oberen Rand des Containers und zwischen den Links und dem Content ist dann eine Lücke. Die Links sind deswegen nicht so hoch wie der Container, da sie bei "hoover" einen Rand unten bekommen und dann den Container in der höhe ausfüllen. Ich möchte sie aber die ganze Zeit am unteren Rand positioniert. Mit Position absolute/relative hab ich das auch hinbekommen, aber es schiebt halt einfach die Links übereinander, anstatt sie nebeneinander bleiben. -
seppuku0109 schrieb:
Soweit alles richtig, was du schreibst. Aber wenn ich es so mache, dann sind die Links zwar richtig angeordnet, aber dann funtioniert gerade das nicht, was ich bezwecken will.
Die Links sind nicht ganz so hoch wie es der Container des Menüs ist. Deswegen sind sie normalerweise am oberen Rand des Containers und zwischen den Links und dem Content ist dann eine Lücke. Die Links sind deswegen nicht so hoch wie der Container, da sie bei "hoover" einen Rand unten bekommen und dann den Container in der höhe ausfüllen. Ich möchte sie aber die ganze Zeit am unteren Rand positioniert. Mit Position absolute/relative hab ich das auch hinbekommen, aber es schiebt halt einfach die Links übereinander, anstatt sie nebeneinander bleiben.
Dann musst du bei den einzelnen Linkpunkten-divs ganz einfach den Abstand als margin-top angeben, und bei hover setzt du den wert auf 0
div.menupunkt{ float: left; margin-top: 5px; width: 100px; height: 50px; } div.menupunkt:hover{ float: left; margin-top: 0px; width: 100px; height: 50px; }
EDIT:
Wenn du position angibst überschreibst du damit den float-wert :)
Sollte dein Problem lösen =)
Gruss
pete
Beitrag zuletzt geändert: 31.1.2011 11:45:56 von thegeter -
DANKE!
Funktioniert genau so wie es soll. Und die Lösung wie immer zu einfach um von selber drauf zu kommen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage