kostenloser Webspace werbefrei: lima-city

Listenpunkte zerbrechen mir den Kopf

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   moneytakers

   moneytakers hat kostenlosen Webspace.

   11:10, 30.6.2011

   Ich habe folgendes Problem, bzw folgenden Code der mir ein kleines Problem bereitet:
   
   HTML:
   

   <div class="header">
           <a href="platzhalter"><div id="logo"></div></a>
           <div id="Navi">
             <ul>
               <li><a href="platzhalter/">Home</a></li>
               <li><a href="platzhalter/">Qualit&auml;t</a></li>
               <li><a href="platzhalter/">Preise</a></li>
               <li><a href="platzhalter/">Fragen</a></li>
             </ul>
           </div>
   </div>

   
   
   CSS:
   

   .header
   {
       position: relative;
       width: 900px;
       height: 100px;
       margin: auto;
       font-size: 17px;
       text-decoration: none;
       font-weight: bold;
       z-index: 1;
   }
   
   .header #Navi li
   {
       position: relative;
       left: 350px;
       list-style: none;
       float: left;
       padding: 40px;
       bottom: 60px;
   }
   
   .header #Navi li a:hover
   {
       color: #FFFFFF;
       cursor: pointer;
       padding: 5px 15px 4px 13px;
       background-color: #9BB70D;
       position: relative;
       right: 13px;
   }

   
   
   Nun sieht mein Problem wie folgt aus: Da die einzelnen Listenpunkte eine hover-Funktion spendiert bekommen haben die via padding in ihrer Größe definiert wird, verschieben sich alle nachstehenden Listenpunkte um 13px.
   Zuvor hatte ich es mit <div> Containern versucht die allerdings durch den IE in Treppenform wiedergegeben worden sind. Daher versuchte ich nun eine deutlich code-sparendere Variante die mir nun aber eben dem geschilderten Problem nach kopfzerbrechen bereitet, da ich nicht genau weiss wie ich am besten und vorallem kompatibelsten die Navi platziere.
   
   Würde mich freuen wenn mir jemand die zündende Idee aufzeigen kann, die mir weiterhilft!
   
   
   
   
   
   *EDIT
   Ich habe das Problem nun doch noch selbst gelöst bekommen! Für diejenigen die es interessiert:
   
   

   <div class="header">
           <a href="platzhalter"><div id="logo"></div></a>
           <div id="Navi">
             <ul>
               <li><a href="platzhalter">&nbsp;&nbsp;Home&nbsp;&nbsp;</a></li>
               <li><a href="platzhalter">&nbsp;&nbsp;Qualit&auml;t&nbsp;&nbsp;</a></li>
               <li><a href="platzhalter">&nbsp;&nbsp;Preise&nbsp;&nbsp;</a></li>
               <li><a href="platzhalter">&nbsp;&nbsp;Fragen&nbsp;&nbsp;</a></li>
             </ul>
           </div>
       </div>

   
   
   

   .header #Navi li
   {
       position: relative;
       left: 350px;
       list-style: none;
       float: left;
       padding: 30px;
       bottom: 60px;
   }
   
   .header #Navi li a:hover
   {
       color: #FFFFFF;
       cursor: pointer;
       padding: 5px 0px 4px 0px;
       background-color: #9BB70D;
       position: relative;
       right: 0px;
   }

   
   
   Zwar ein wuchtiger Holzhammer mit dem man dieses Problem gelöst hat, aber es funktioniert! ;)
   
   
   Beitrag zuletzt geändert: 30.6.2011 11:54:18 von moneytakers

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

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

3. kaetzle7

   Moderator

   kaetzle7 hat kostenlosen Webspace.

   11:56, 30.6.2011

   Du könntest deinem CSS einfach noch ein ".header #Navi li a" hinzufügen und dieses mit den gleichen padding-Werten benennen wie den hover Effekt. Sähe dann so aus (Code aufs Minimum reduziert - im FF sieht es so gut aus):
   
   

   .header #Navi li a {
       padding: 5px 15px 4px 13px;
   }
   
   .header #Navi li a:hover {
       background-color: #9BB70D;
       color: #FFFFFF;
       padding: 5px 15px 4px 13px;
   }

4. Autor dieses Themas

   moneytakers

   moneytakers hat kostenlosen Webspace.

   13:48, 30.6.2011

   tatsächlich, besten Dank! Aber ich verstehe noch nicht ganz wieso es so funktioniert. Ich gebe den Listenpunkten ja die attribute, die theoretisch durch die Hover Funktion nochmal draus addiert werden müssten. Falls du verstehst was ich meine.

5. kaetzle7

   Moderator

   kaetzle7 hat kostenlosen Webspace.

   18:50, 30.6.2011

   "padding" gibt den Innenabstand zwischen dem Text und (einem per default unsichtbaren) border - siehe Box-modell. Der Abstand zwischen den einzelnen Links orientiert sich aber eben nicht am Text, sondern an den bordern. Wenn du den Abstand zwischen border und Text mit padding vergrößerst muss der Rest rundherum auf die Seite rücken (so wie ies bei dir der Fall war). Dem kannst du vorbeugen, indem du dem "stehenden" Text eben schon vorher den selben Abstand zwischen border und Text vorgibst.
   
   Keine Ahnung ob das jetzt irgendwie verständlich ausgedrückt ist...
6. Autor dieses Themas

   moneytakers

   moneytakers hat kostenlosen Webspace.

   9:56, 1.7.2011

   Ja, ich denke ich habe es im Ansatz verstanden. Besten Dank für die Hilfe!

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

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

Dir gefällt dieses Thema?