kostenloser Webspace werbefrei: lima-city

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
  1. Autor dieses Themas

    seppuku0109

    seppuku0109 hat kostenlosen Webspace.

    9:28, 31.1.2011
    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ß

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t******r

    10:09, 31.1.2011
    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
  4. Autor dieses Themas

    seppuku0109

    seppuku0109 hat kostenlosen Webspace.

    11:00, 31.1.2011
    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

  5. t******r

    11:25, 31.1.2011
    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
  6. Autor dieses Themas

    seppuku0109

    seppuku0109 hat kostenlosen Webspace.

    11:33, 31.1.2011
    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.

  7. t******r

    11:38, 31.1.2011
    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
  8. Autor dieses Themas

    seppuku0109

    seppuku0109 hat kostenlosen Webspace.

    13:06, 31.1.2011
    DANKE!

    Funktioniert genau so wie es soll. Und die Lösung wie immer zu einfach um von selber drauf zu kommen :biggrin:

  9. t******r

    13:40, 31.1.2011
    Hehe, fein dass es nu klappt ^^

    Gruss
    pete

  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!