kostenloser Webspace werbefrei: lima-city

navigation li hintergrundhöhe

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

1. Autor dieses Themas

   sessin

   

   sessin hat kostenlosen Webspace.

   15:29, 5.9.2009

   
   hätte da eine frage aber ist irgendwie etwas schwer zu erklären.
   ich versuchs mal: ich habe eine horizontale navigation und ich möchte das bei den einzelnen
   navigationspunkten eine hintergrundfarbe ist, aber die soll über das listenfeld hinausgehen,
   also quasi height 100%... (wie ein langer strich von oben nach unten) und das ganze bei hover,
   und auch auf der seite selbst, also nur beim jeweiligen navigationspunkt..
   
   aber auf height 100% reagiert firefox gar nicht und die hintergrundfarbe unterlegt nur den text, nicht darüber hinaus.
   
   ich hoffe es versteht irgendeiner was ich meine ^^
   
   

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

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

3. goldeneye

   

   goldeneye hat kostenlosen Webspace.

   16:36, 5.9.2009

   sessin schrieb:
   
   hätte da eine frage aber ist irgendwie etwas schwer zu erklären.
   ich versuchs mal: ich habe eine horizontale navigation und ich möchte das bei den einzelnen
   navigationspunkten eine hintergrundfarbe ist, aber die soll über das listenfeld hinausgehen,
   also quasi height 100%... (wie ein langer strich von oben nach unten) und das ganze bei hover,
   und auch auf der seite selbst, also nur beim jeweiligen navigationspunkt..
   
   aber auf height 100% reagiert firefox gar nicht und die hintergrundfarbe unterlegt nur den text, nicht darüber hinaus.
   
   ich hoffe es versteht irgendeiner was ich meine ^^
   
   
   

   
   wenn du die menüpunkte jeweils in einen eigenen div legst, der absolut positioniert ist, würdest du dir den aufwand sparen, dass alles mit javascript umzusetzen.
   
   so produzierst du zwar ein paar zeilen mehr code, hast aber im endeeffekt das schnellere/saubere/ einfachere ergebniss
   
   Gruß
   Daniel
4. Autor dieses Themas

   sessin

   

   sessin hat kostenlosen Webspace.

   23:58, 5.9.2009

   hm ja. klappt auch irgendwie nicht, ist alles ein bisschen chaotisch im moment
   
   und im firefox siehts ganz anders aus als im ie...
   
   http://sessin.lima-city.de/designsite/index.html
   
   das ist mein css.. aber nicht lachen *gg*
   
   

   a:link {text-decoration: none; color: #000000;}
   a:visited {text-decoration: none; color: #FFFFFF;}
   a:active {text-decoration: none; color: #FFFFFF;}
   a:hover {text-decoration: none; color: #FFFFFF;}
   a:focus {text-decoration: none; color: #FFFFFF;}
   
   body {background: #666666;
         color:#FFFFFF;
         font-family:arial;
         font-style: bold;
         margin:0;
         overflow-x:hidden;
         }
   
   #headerwidth {background: url(images/rainbowbanner.jpg);
                 background-repeat: repeat-x;
                 z-index:9;
                 left: 0px;
                 margin-top: 69px;
                 position: relative;
                 height: 200px;}
   
   #header {
           -moz-background-clip:border;
           -moz-background-inline-policy:continuous;
           -moz-background-origin:padding;
            background:url(images/besign.png);
            background-repeat: no-repeat;
            left:0px;
            top:-69px;
            height:782px;
            width:1024px;
            position:relative;
            overflow-x:hidden;
            z-index:10;
            }
   
   a #header {text-indent: -9999px;
                 display: block;}
   
   #main {background: #ffffff;
          opacity: 0.6;
          width: 54%;
          margin-left: 50px;
          margin-top: 80px;
          height: 100%;
          z-index: 50;
          overflow-y: hidden;
          float: left;
          position: absolute;}
   
   #aside {background: #ffffff;
          opacity: 0.6;
          width: 100%;
          margin-left: 750px;
          margin-top: 80px;
          height: 100%;
          z-index: 50;
          overflow-y: hidden;
          float: right;
          position: absolute;}
   
   #line {background: #333333;
          width: 100%;
          height: 20px;
          margin-left: 0px;
          top: 360px;
          float: left;
          z-index: 8;
          position: absolute;}
   
   .arbeitsproben {
                  left:0px;
                  top:0px;
                  padding:350px 50px 50px 25px;
                  position:relative;
                  }
   
   #layer20 {
            }
   
   #layer30 {
           }
   
   #write {position: relative;
           left: 20px; top: 20px;
           z-index:3;}
   
   
   #nav {
         z-index:40;
         position: relative;
         margin-top: 0px;
         margin-left: 0px;
         left: 230px;
         top: -12px;
         float: left; 
         }
   
   ul#navi li {
               display:inline;
               padding: 20px;
               float:left;
               list-style:none;
               text-align:center;
               }
   
   #actuali {background: #333333;
            opacity: 0.5;
            z-index: 20;
            margin-left: 0px;
            margin-top: 0px;
            top: 0px;      
            height: 100%;
            overflow-y: hidden;
            position:fixed;}
   
   #navi#actuali span {position: relative;
                  z-index:60;
                  a:hover: #ffffff;}
   
   ul#navi li span {
               background:transparent url(images/navi.gif) no-repeat scroll 0 0;
               display:outline;
               padding: 3px;
               float:left;
               height:23px;
               list-style:none;
               text-align:center;
               width:93px; 
               }

   
   
   Beitrag zuletzt geändert: 6.9.2009 0:09:34 von sessin

5. color

   

   color hat kostenlosen Webspace.

   22:06, 8.9.2009

   Also so wie ich das verstehe, willst du das pro LI eine Vertikale Linie bei hover entsteht?
   
   Nun also CSS-Hover funktioniert Browserübergreifend nur bei A-Tags.
   Aber so wie ich das seh funktioniert der großteil deines CSS-Codes nicht.
   
   Aber egal, du kannst in deine LI-Tags Sublisten erstellen, also so
   
   

   <ul>
   <li>
   <a title=""  href="">Mainlist</a>
   <ul>
   <li>
   subliste
   </li>
   </ul>
   </li>
   </ul

   
   
   Die Maillist wird position:relative; und die Subliste position:absolute;
   und schon kannst du beliebig große Linien ziehen.
   
   Allerdings wirst du nicht um JS rumkommen wenn du das bei HOVER realisieren willst.
   
   PS.: Wegen der CSS-Browserbereiche schau dir deine Zeilen mal unter http://www.css4you.de an, da steht unter anderem
   welche Browser welche styles unterstützen.

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

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

Dir gefällt dieses Thema?