Navi

Dieses Thema im Forum "Webentwicklung" wurde erstellt von mrDarkangel, 20. März 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 20. März 2007
    Hi,
    wollt mal fragen ob wer bereit wär mir ne navi zu "basteln". Hab schon soviele scripte probiert usw. aber irgendwie krieg ich es net hin. Hier könnt ihr mal nen link sehen: http://freenet-homepage.de/aos-fan/i.jpg.
    Die buttons sollen nen rollover effect haben (sieht man dort auch) und dan soll in der schwarzen leiste darunter die einzelnen links angezeigt werden. soll also vom menu so ähnlich werden wie:
    http://www.xtream-team-clan.de/Demo-Templates/Demo17/index.php
    wäre echt hammer von euch wenn mir wer da helfen kann.

    mfg und thx
     
  3. 20. März 2007
    AW: Navi

    jo, das menü, wenn ich das richtig sehe, nennt sich hybrid menü

    hier haste eine mega geile tutorial seite dafür!!!!hab das menü auch schonmal verbaut ...

    Hybrid CSS Dropdowns · An A List Apart Article


    gruß wollknoll
     
  4. 20. März 2007
    AW: Navi

    kann kein englisch
    aber trotzdem thx
     
  5. 20. März 2007
    AW: Navi

    brauchst ja ned, kopier dir einfach das hier und schreib die css auf deine bedürfnisse um, damit du dein design hinbekommst.

    hier der link dazu:

    Hybrid CSS Dropdowns · An A List Apart Article


    PHP:
    < head >

        <     style type = "text/css"  media = "all" >

        
             #nav {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav li.on ul, #nav li.off ul {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav a {
                 text - decoration :  none ;
        }

             #nav li { /*float the main list items*/
                 margin :  0 ;
                 float :  left ;
                 display :  block ;
                 padding - right :  15px ;
        }

             #nav li ul {
                 display :  none ;
        }

             #nav li.off ul, #nav li.on ul { /*put the subnav below*/
                 position :  absolute ;
                 top :  33px ;
            *     top :  44px ;
                 left :  5px ;
                 padding - top :  10px ;
                 background :  #d6e3b0;
                 height :  28px ;
                 width :  640px ;
        }

             #nav li a {
                 color :  #d6e3b0;
                 font - weight :  bold ;
                 display :  block ;
                 height :  15px ;
                 width :  100px ;
                 border :  2px solid  #d6e3b0;
                 padding :  5px ;
        }

             #nav li.on a {
                 border :  2px solid  #7a8566;
                 color :  #7a8566;
             }

             #nav li.on ul a, #nav li.off ul a {
                 float :  left ; 
                 border :  0 ;
                 color :  #7a8566;
                 width :  auto ;
                 margin - right :  15px ;
        }

             #nav li.on ul {
                 display :  block ;
        }

             #nav li.off:hover ul {
                 display :  block ;
                 z - index :  6000 ;
                    }

             #nav li.off a:hover, #nav li:hover a {
                 background :  #d6e3b0;
                 color :  #7a8566;
             }

            
        </     style >
    </     head >





    <     body >
        <     ul id = "nav" >
        <     li  class= "off" >< a href = "#" > Renaissance </ a >

        <     ul >
            <     li >< a href = "#" > Brunelleschi </ a ></ li >
            <     li >< a href = "#" > Alberti </ a ></ li >
            <     li >< a href = "#" > Palladio </ a ></ li >
            <     li >< a href = "#" > Michelangelo </ a ></ li >
            <     li >< a href = "#" > Bramante </ a ></ li >

        </     ul ></ li >
        <     li  class= "off" >< a href = "#" > Art Nouveau </ a >
        <     ul >
            <     li >< a href = "#" > Mackintosh </ a ></ li >
            <     li >< a href = "#" > Guimard </ a ></ li >
            <     li >< a href = "#" > Horta </ a ></ li >
            <     li >< a href = "#" > van de Velde </ a ></ li >

        </     ul ></ li >
        <     li  class= "on" >< a href = "#" > Modern </ a >
        <     ul >
            <     li >< a href = "#" > Sullivan </ a ></ li >
            <     li >< a href = "#" > Le Corbusier </ a ></ li >
            <     li >< a href = "#" > Mies </ a ></ li >
            <     li >< a href = "#" > Gropius </ a ></ li >

            <     li >< a href = "#" > Yamasaki </ a ></ li >
        </     ul ></ li >
        <     li  class= "off" >< a href = "#" > Postmodern </ a >
        <     ul >
            <     li >< a href = "#" > Venturi </ a ></ li >
            <     li >< a href = "#" > Eisenman </ a ></ li >
            <     li >< a href = "#" > Stern </ a ></ li >

            <     li >< a href = "#" > Graves </ a ></ li >
            <     li >< a href = "#" > Gehry </ a ></ li >
        </     ul ></ li >
        <     li  class= "off" >< a href = "#" > Digital </ a >
        <     ul >
            <     li >< a href = "#" > Xenakis </ a ></ li >
            <     li >< a href = "#" > Lynn </ a ></ li >

            <     li >< a href = "#" > Diller + Scofidio </ a ></ li >
            <     li >< a href = "#" > Zellner </ a ></ li >
            <     li >< a href = "#" > Hadid </ a ></ li >
        </     ul ></ li >
    </     ul >
    </     body >
     
  6. 21. März 2007
    AW: Navi

    also ich glaube ich muss noch die ul und so in tr und so um ändern oder?
    weil ich das ja in einer tabelle hab. also es sieht momentan wie folgt aus:
    PHP:
    < style type = "text/css" >
    <!--
    body , td , th  {
             color :  #0099FF;
    }
    body  {
             background - color :  #000000;
    }
    a : link  {
             color :  #0099FF;
             text - decoration :  none ;
    }
    a : visited  {
             text - decoration :  none ;
             color :  #0099FF;
    }
    a : hover  {
             text - decoration :  underline ;
             color :  #0099FF;
    }
    a : active  {
             text - decoration :  none ;
             color :  #0099FF;
    }
    #nav {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav li.on ul, #nav li.off ul {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav a {
                 text - decoration :  none ;
        }

             #nav li { /*float the main list items*/
                 margin :  0 ;
                 float :  left ;
                 display :  block ;
                 padding - right :  15px ;
        }

             #nav li ul {
                 display :  none ;
        }

             #nav li.off ul, #nav li.on ul { /*put the subnav below*/
                 position :  absolute ;
                 top :  33px ;
            *     top :  44px ;
                 left :  5px ;
                 padding - top :  10px ;
                 background :  #000000;
                 height :  28px ;
                 width :  635px ;
        }

             #nav li a {
                 color :  #d6e3b0;
                 font - weight :  bold ;
                 display :  block ;
                 height :  15px ;
                 width :  100px ;
                 border :  0px solid  #d6e3b0;
                 padding :  5px ;
        }

             #nav li.on a {
                 border :  0px solid  #7a8566;
                 color :  #7a8566;
             }

             #nav li.on ul a, #nav li.off ul a {
                 float :  left ; 
                 border :  0 ;
                 color :  #7a8566;
                 width :  auto ;
                 margin - right :  15px ;
        }

             #nav li.on ul {
                 display :  block ;
        }

             #nav li.off:hover ul {
                 display :  block ;
                 z - index :  6000 ;
                    }

             #nav li.off a:hover, #nav li:hover a {
                 background :  #000000;
                 color :  #7a8566;
             } 
    #Layer1 {
             position : absolute ;
             left : 189px ;
             top : 289px ;
             width : 635px ;
             height : 15px ;
             z - index : 1 ;
    }
    -->
    </     style >
    </     head >
    <     body >
    <     div id = "Layer1"  class= "on" > asdadasddasds </ div >
    <     table width = "1000"  border = "0"  cellpadding = "0"  cellspacing = "0" >
      <     tr >
        <     td >< img src = "Bilder/index_01.gif"  width = "1000"  height = "221"  alt = "" ></ td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_02.gif"  width = "1000"  height = "23"  alt = "" ></ td >
      </     tr >
      <     tr height = "39" >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_03.gif"  width = "177"  height = "1"  alt = "" >
        <     img src = "Bilder/index_09.gif"  width = "177"  height = "38"  alt = "" ></ td >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr id = "nav" >
        <     td >< a href = ""  class= "off" >< img src = "Bilder/index_04.gif"  width = "160"  height = "39"  alt = ""  border = "0" ></ a ></ td >
        <     td >< a href = ""  class= "off" >< img src = "Bilder/index_05.gif"  width = "159"  height = "39"  alt = ""  border = "0" ></ a ></ td >
        <     td >< a href = ""  class= "off" >< img src = "Bilder/index_06.gif"  width = "158"  height = "39"  alt = ""  border = "0" ></ a ></ td >
        <     td >< a href = ""  class= "off" >< img src = "Bilder/index_07.gif"  width = "158"  height = "39"  alt = ""  border = "0" ></ a ></ td >
        </     tr >
        </     table >
        </     td >
        <     td >< img src = "Bilder/index_08.gif"  width = "188"  height = "39"  alt = "" ></ td >
        </     tr >
        </     table >
        </     td >
      </     tr >
    wo muss ich was gegen was umtauschen?
    hab die links die kommen wenn man auf die buttons geht in ne div gepackt und dan auf neuer ebene gestellt (siehe
    PHP:
    < div id = "Layer1"  class= "on" > asdadasddasds </ div >
    )
    hab da halt erstmal nur irgendwas reingeschrieben um zu schauen ob das geht
    mfg
     
  7. 22. März 2007
    AW: Navi

    jo, lasse die td und tr komplett weg und gewöhne dir gleich das mit ul und li an. das ist die feiner lösung, glaube auch nicht das es geht, wenn du einfach in der css aus ul z.B. tr machst.

    lass es lieber so und bau dein menü lieber in das <ul><li> format um

    kannst ja dein ergebnis mal posten ich check es dann durch

    gruß wollknoll
     
  8. 23. März 2007
    AW: Navi

    du hast die möglichkeit spetztiell objekte mit einem :hover anzeigen zu lassen, nur leider funktioniert das nicht in jedem browser.

    hier ein beispiel:

    HTML:
    <html>
<head>
<title>:hover</title>
<style type="text/css">
<!--
.overme .showme {
display: none;
}

.overme a:hover .showme {
display: block;
}
-->
</style>
</head>
<body>

<div class="overme">
 Deine Maus hier: 
 <a href="#">X
 <div class="showme">
 Hallo
 </div>
 </a> 
</div>

</body>
</html>
    warum poste ich das? entweder du beschäftigst dich damit oder du suchst dir jemanden der es kann...hab gehört der hier kann fast alles!

    die andre alternative wäre javascript:

    HTML:
    <html>
<head>
<title>:hover</title>
</head>
<body>

<div onmouseover="getElementsByTagName('div')[0].style.display = 'block';" onmouseout="getElementsByTagName('div')[0].style.display = 'none';">
 Deine Maus hier: 
 <div style="display: none">
 Hallo
 </div>
</div>

</body>
</html>
     
  9. 23. März 2007
    AW: Navi

    also mousover mach ich immer mit javascript und sonem script was ich mal im inet gefunden hab das mit dem ul und so probier ich doch gleichmal
     
  10. 24. März 2007
    AW: Navi

    hm also irgendwie stell ich mich ganzschön blöd an^^.
    sagt mir mal wo da der fehler ist:

    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <     html xmlns = "http://www.w3.org/1999/xhtml" >
    <     head >
    <     meta http - equiv = "Content-Type"  content = "text/html; charset=iso-8859-1"  />
    <     title > Untitled Document </ title >
    <     style type = "text/css"  media = "all" >

        
             #nav {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav li.on ul, #nav li.off ul {
                 margin :  0 ;
                 padding :  0 ;
        }

             #nav a {
                 text - decoration :  none ;
        }

             #nav li { /*float the main list items*/
                 margin :  0 ;
                 float :  left ;
                 display :  block ;
                 padding - right :  15px ;
        }

             #nav li ul {
                 display :  none ;
        }

             #nav li.off ul, #nav li.on ul { /*put the subnav below*/
                 position :  absolute ;
                 top :  47px ;
            *     top :  44px ;
                 left :  8px ;
                 padding - top :  10px ;
                 background : none ;
                 width :  635px ;
                 height : 16    
                 }

             #nav li a {
                 color :  #d6e3b0;
                 font - weight :  normal ;
                 display :  block ;
                 height :  16px ;
                 width :  635px ;
                 border :  0px solid  #d6e3b0;
                 padding :  5px ;
        }

             #nav li.on a {
                 border :  0px solid  #7a8566;
                 color :  #0099FF;
             }

             #nav li.on ul a, #nav li.off ul a {
                 float :  left ; 
                 border :  0 ;
                 color :  #0099FF;
                 width :  auto ;
                 height :  16 ;
                 margin - right :  15px ;
                 font - size : x - small ;
                 vertical - align : top
             }

             #nav li.on ul {
                 display :  block ;
        }

             #nav li.off:hover ul {
                 display :  block ;
                 z - index :  6000 ;
                    }

             #nav li.off a:hover, #nav li:hover a {
                 background :  none ;
                 color :  #0099FF;
                 font - size : x - small
             }   
        </     style >
    </     head >
    <     body >
    <     div id = "Layer1"  class= "on" > asdadasddasds </ div >
    <     table width = "1000"  border = "0"  cellpadding = "0"  cellspacing = "0" >
      <     tr >
        <     td >< img src = "Bilder/index_01.gif"  width = "1000"  height = "221"  alt = "" ></ td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_02.gif"  width = "1000"  height = "23"  alt = "" ></ td >
      </     tr >
      <     tr height = "39" >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_03.gif"  width = "177"  height = "1"  alt = "" >
        <     img src = "Bilder/index_09.gif"  width = "177"  height = "38"  alt = "" ></ td >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
    <     td >
    <     ul id = "nav" >
        <     li  class= "on" >< img src = "Bilder/index_04.gif"  width = "160"  height = "39"  alt = ""  border = "0" >

        <     ul >
            <     li >< a href = "index.php?site=news" > NEWS </ a ></ li >
            <     li >< a href = "index.php?site=news&action=archive" > ARCHIVE </ a ></ li >
            <     li >< a href = "index.php?site=articles" > ARTICLES </ a ></ li >
            <     li >< a href = "index.php?site=calendar" > CALENDAR </ a ></ li >
            <     li >< a href = "index.php?site=faq" > FAQ </ a ></ li >
            <     li >< a href = "index.php?site=search" > SEARCH </ a ></ li >
            
      </     ul ></ li >
        <     li  class= "off" >< img src = "Bilder/index_05.gif"  width = "159"  height = "39"  alt = ""  border = "0" >
        <     ul >
            <     li >< a href = "index.php?site=about" > ABOUT US </ a ></ li >
            <     li >< a href = "index.php?site=squads" > SQUADS </ a ></ li >        
            <     li >< a href = "index.php?site=members" > MEMBERS </ a ></ li >
            <     li >< a href = "index.php?site=clanwars" > CLANWARS </ a ></ li >
            <     li >< a href = "index.php?site=history" > HISTORY </ a ></ li >
            <     li >< a href = "index.php?site=awards" > AWARDS </ a ></ li >
            <     li >< a href = "index.php?site=joinus" > JOIN US </ a ></ li >

        </     ul ></ li >
        <     li  class= "off" >< img src = "Bilder/index_06.gif"  width = "158"  height = "39"  alt = ""  border = "0" >
        <     ul >
            <     li >< a href = "index.php?site=forum" > FORUMS </ a ></ li >
            <     li >< a href = "index.php?site=guestbook" > GUESTBOOK </ a ></ li >
            <     li >< a href = "index.php?site=registered_users" > REGISTERED USERS </ a ></ li >
            <     li >< a href = "index.php?site=whoisonline" > WHO IS ONLINE </ a ></ li >
            <     li >< a href = "index.php?site=polls" > POLLS </ a ></ li >
            <     li >< a href = "index.php?site=server" > SERVERS </ a ></ li >
            
        </     ul ></ li >
        <     li  class= "off" >< img src = "Bilder/index_07.gif"  width = "158"  height = "39"  alt = ""  border = "0" >
        <     ul >
            <     li >< a href = "index.php?site=sponsors" > SPONSORS </ a ></ li >
            <     li >< a href = "http://irgaming.ir.ohost.de/top-xl-v1/" > Toplist </ a ></ li >
            <     li >< a href = "index.php?site=links" > LINKS </ a ></ li >
            <     li >< a href = "index.php?site=linkus" > LINK US </ a ></ li >
            <     li >< a href = "index.php?site=contact" > CONTACT </ a ></ li >
            <     li >< a href = "index.php?site=challenge" > FIGHT US </ a ></ li >
            
        </     ul ></ li >
    </     ul >
    </     td > 
    </     tr >
        </     table >
        </     td >
        <     td >< img src = "Bilder/index_08.gif"  width = "188"  height = "39"  alt = "" ></ td >
        </     tr >
        </     table >
        </     td >
      </     tr >
      <     tr valign = "top" >
      <     td width = "635" >
      <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "177"  background = "Bilder/index_10.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_18.gif"  width = "177"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "635" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_11.gif"  width = "432"  height = "16"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_12.gif"  width = "203"  height = "16"  alt = "" ></ td >
        </     tr >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_14.gif"  width = "432"  height = "39"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_15.gif"  width = "203"  height = "39"  alt = "" ></ td >
        </     tr >
        <     tr valign = "top" >
        <     td width = "432"  background = "Bilder/index_16.gif"  align = "center" >& nbsp ;</ td >
        <     td width = "203" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >
             fafasfasfasf
             </ td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_22.gif"  width = "203"  height = "37"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_23.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_24.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
        <     table cellpadding = "0"  cellspacing = "0"  width = "100%" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_25.gif"  width = "635"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center"  background = "Bilder/index_26.gif" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "188"  background = "Bilder/index_13.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_19.gif"  width = "188"  height = "35"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
      </     td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_27.gif"  width = "177"  height = "24"  alt = "" >< img src = "Bilder/index_28.gif"  width = "635"  height = "24"  alt = "" >< img src = "Bilder/index_29.gif"  width = "188"  height = "24"  alt = "" ></ td >
      </     tr >
    </     table >
    </     body >
    </     html >
    hiermal der link zu der seite wie das daher momentan aussieht: http://freenet-homepage.de/aos-fan/index3.html
    und so soll es ja aussehen: http://freenet-homepage.de/aos-fan/i.jpg

    mfg darki
     
  11. 24. März 2007
    AW: Navi

    du musst extrem auf die css file achten,

    PHP:
       #nav li.off ul, #nav li.on ul { /*put the subnav below*/
             position :  absolute ;
             top :  60px ;
        *     top :  60px ;
    kann zum verhängnis werden, wenn die höhe nicht passt. also der abstand von deinen unterliegenden links.
    und dann hast du vergessen die javascript file, für den alten ie einzubauen:

    PHP:
    < script language = "javascript1.2"  type = "text/javascript"  src = "hor.hybrid.js" ></ script >
    javascript file:
    Download offline!

    hier ist ein funktionelles menü:

    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <     html xmlns = "http://www.w3.org/1999/xhtml" >
    <     head >
    <     meta http - equiv = "Content-Type"  content = "text/html; charset=iso-8859-1"  />
    <     title > Untitled Document </ title >

      <     style type = "text/css"  media = "all" >

      
           #nav {
             margin :  0 ;
             padding :  0 ;
      }

           #nav li.on ul, #nav li.off ul {
             margin :  0 ;
             padding :  0 ;
      }

           #nav a {
             text - decoration :  none ;
      }

           #nav li { /*float the main list items*/
             margin :  0 ;
             float :  left ;
             display :  block ;
             padding - right :  15px ;
      }

           #nav li ul {
             display :  none ;
      }

           #nav li.off ul, #nav li.on ul { /*put the subnav below*/
             position :  absolute ;
             top :  60px ;
        *     top :  60px ;
             left :  5px ;
             padding - top :  30px ;

             height :  28px ;
             width :  640px ;
      }

           #nav li a {
             color :  #d6e3b0;
             font - weight :  bold ;
             display :  block ;
             height :  15px ;
             width :  100px ;
             border :  2px solid  #d6e3b0;
             padding :  5px ;
      }

           #nav li.on a {
             border :  2px solid  #7a8566;
             color :  #7a8566;
           }

           #nav li.on ul a, #nav li.off ul a {
             float :  left ; 
             border :  0 ;
             color :  #7a8566;
             width :  auto ;
             margin - right :  15px ;
      }

           #nav li.on ul {
             display :  block ;
      }

           #nav li.off:hover ul {
             display :  block ;
             z - index :  6000 ;
            }

           #nav li.off a:hover, #nav li:hover a {
             background :  #d6e3b0;
             color :  #7a8566;
           }

        
      </     style >

    <     script language = "javascript1.2"  type = "text/javascript"  src = "hor.hybrid.js" ></ script >

    </     head >
    <     body >
    <     div id = "Layer1"  class= "on" > asdadasddasds </ div >
    <     table width = "1000"  border = "0"  cellpadding = "0"  cellspacing = "0" >
      <     tr >
        <     td >< img src = "Bilder/index_01.gif"  width = "1000"  height = "221"  alt = "" ></ td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_02.gif"  width = "1000"  height = "23"  alt = "" ></ td >
      </     tr >
      <     tr height = "39" >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_03.gif"  width = "177"  height = "1"  alt = "" >
        <     img src = "Bilder/index_09.gif"  width = "177"  height = "38"  alt = "" ></ td >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
    <     td >

    <     ul id = "nav" >
        <     li  class= "on" >< a href = "#" > ___DEIN_BILD1____ </ a >

        <     ul >
            <     li >< a href = "index.php?site=news" > NEWS </ a ></ li >
            <     li >< a href = "index.php?site=news&action=archive" > ARCHIVE </ a ></ li >
            <     li >< a href = "index.php?site=articles" > ARTICLES </ a ></ li >
            <     li >< a href = "index.php?site=calendar" > CALENDAR </ a ></ li >
            <     li >< a href = "index.php?site=faq" > FAQ </ a ></ li >
            <     li >< a href = "index.php?site=search" > SEARCH </ a ></ li >
            
      </     ul ></ li >
        <     li  class= "off" >< a href = "#" > ___DEIN_BILD2____ </ a >
        <     ul >
            <     li >< a href = "index.php?site=about" > ABOUT US </ a ></ li >
            <     li >< a href = "index.php?site=squads" > SQUADS </ a ></ li >        
            <     li >< a href = "index.php?site=members" > MEMBERS </ a ></ li >
            <     li >< a href = "index.php?site=clanwars" > CLANWARS </ a ></ li >
            <     li >< a href = "index.php?site=history" > HISTORY </ a ></ li >
            <     li >< a href = "index.php?site=awards" > AWARDS </ a ></ li >
            <     li >< a href = "index.php?site=joinus" > JOIN US </ a ></ li >

        </     ul ></ li >
        <     li  class= "off" >< a href = "#" > ___DEIN_BILD3____ </ a >
        <     ul >
            <     li >< a href = "index.php?site=forum" > FORUMS </ a ></ li >
            <     li >< a href = "index.php?site=guestbook" > GUESTBOOK </ a ></ li >
            <     li >< a href = "index.php?site=registered_users" > REGISTERED USERS </ a ></ li >
            <     li >< a href = "index.php?site=whoisonline" > WHO IS ONLINE </ a ></ li >
            <     li >< a href = "index.php?site=polls" > POLLS </ a ></ li >
            <     li >< a href = "index.php?site=server" > SERVERS </ a ></ li >
            
        </     ul ></ li >
        <     li  class= "off" >< a href = "#" > ___DEIN_BILD4____ </ a >
        <     ul >
            <     li >< a href = "index.php?site=sponsors" > SPONSORS </ a ></ li >
            <     li >< a href = "http://irgaming.ir.ohost.de/top-xl-v1/" > Toplist </ a ></ li >
            <     li >< a href = "index.php?site=links" > LINKS </ a ></ li >
            <     li >< a href = "index.php?site=linkus" > LINK US </ a ></ li >
            <     li >< a href = "index.php?site=contact" > CONTACT </ a ></ li >
            <     li >< a href = "index.php?site=challenge" > FIGHT US </ a ></ li >
            
        </     ul ></ li >
    </     ul >

    </     td >
    </     tr >
        </     table >
        </     td >
        <     td >< img src = "Bilder/index_08.gif"  width = "188"  height = "39"  alt = "" ></ td >
        </     tr >
        </     table >
        </     td >
      </     tr >
      <     tr valign = "top" >
      <     td width = "635" >
      <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "177"  background = "Bilder/index_10.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_18.gif"  width = "177"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "635" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_11.gif"  width = "432"  height = "16"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_12.gif"  width = "203"  height = "16"  alt = "" ></ td >
        </     tr >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_14.gif"  width = "432"  height = "39"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_15.gif"  width = "203"  height = "39"  alt = "" ></ td >
        </     tr >
        <     tr valign = "top" >
        <     td width = "432"  background = "Bilder/index_16.gif"  align = "center" >& nbsp ;</ td >
        <     td width = "203" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >
             fafasfasfasf
             </ td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_22.gif"  width = "203"  height = "37"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_23.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_24.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
        <     table cellpadding = "0"  cellspacing = "0"  width = "100%" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_25.gif"  width = "635"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center"  background = "Bilder/index_26.gif" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "188"  background = "Bilder/index_13.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_19.gif"  width = "188"  height = "35"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
      </     td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_27.gif"  width = "177"  height = "24"  alt = "" >< img src = "Bilder/index_28.gif"  width = "635"  height = "24"  alt = "" >< img src = "Bilder/index_29.gif"  width = "188"  height = "24"  alt = "" ></ td >
      </     tr >
    </     table >
    </     body >
    </     html > 
     
  12. 24. März 2007
    AW: Navi

    so hab jetz etwas verändert. nur jetz sieht das so aus wenn ich das hier so hab:
    PHP:
       #nav li { /*float the main list items*/
             margin :  0 ;
             float :  left ;
             display :  block ;
             padding - right :  47px ;
      }
    http://freenet-homepage.de/aos-fan/index3.html
    und so sieht das andere aus wenn ich das padding right auf 48 hab:
    http://freenet-homepage.de/aos-fan/index4.html

    würde gern noch wissen wie ich dan dort wenn ich von einem button auf den anderen gehe er die anderen links anzeigt. dort wechselt er die liste nemig nur wenn ich von den buttons weggehe und dan auf den nächsten gehe.

    mfg darki
     
  13. 27. März 2007
    AW: Navi

    poste mal deine komplette css. da ich nicht glaube das der fehler nur da dran liegt.

    dein problem ist ja das erauf 2 zeilen alles verteilt, richtig?
     
  14. 27. März 2007
    AW: Navi

    PHP:
    <! DOCTYPE html  PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
    <     html xmlns = "http://www.w3.org/1999/xhtml" >
    <     head >
    <     meta http - equiv = "Content-Type"  content = "text/html; charset=iso-8859-1"  />
    <     title > Untitled Document </ title >
    <     style type = "text/css"  media = "all" >
           #nav {
             margin :  0 ;
             padding :  0 ;
      }

           #nav li.on ul, #nav li.off ul {
             margin :  0 ;
             padding :  0 ;
      }

           #nav a {
             text - decoration :  none ;
      }

           #nav li { /*float the main list items*/
             margin :  0 ;
             float :  left ;
             display :  block ;
             padding - right :  47px ;
      }

           #nav li ul {
             display :  none ;
      }

           #nav li.off ul, #nav li.on ul { /*put the subnav below*/
               font - size : x - small ;
             position :  absolute ;
             top :  257px ;
        *     top :  60px ;
             left :  186px ;
             padding - top :  30px ;

             height :  16px ;
             width :  640px ;
      }

           #nav li a {
             color :  #d6e3b0;
             font - weight :  bold ;
             display :  block ;
             height :  15px ;
             width :  100px ;
             border :  0px solid  #d6e3b0;
             padding :  5px ;
      }

           #nav li.on a {
             border :  0px solid  #7a8566;
             color :  #7a8566;
           }

           #nav li.on ul a, #nav li.off ul a {
             float :  left ; 
             border :  0 ;
             color :  #7a8566;
             width :  auto ;
             margin - right :  15px ;
      }

           #nav li.on ul {
             display :  block ;
      }

           #nav li.off:hover ul {
             display :  block ;
             z - index :  6000 ;
            }

           #nav li.off a:hover, #nav li:hover a {
             font - size : x - small ;
             background :  none ;
             color :  #7a8566;
           }

        
      </     style >

    <     script language = "javascript1.2"  type = "text/javascript"  src = "hor.hybrid.js" ></ script >

    </     head >
    <     body >
    <     table width = "1000"  border = "0"  cellpadding = "0"  cellspacing = "0" >
      <     tr >
        <     td >< img src = "Bilder/index_01.gif"  width = "1000"  height = "221"  alt = "" ></ td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_02.gif"  width = "1000"  height = "23"  alt = "" ></ td >
      </     tr >
      <     tr height = "39" >
        <     td >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "18%" >
        <     img src = "Bilder/index_03.gif"  width = "177"  height = "1"  alt = "" >
        <     img src = "Bilder/index_09.gif"  width = "177"  height = "38"  alt = "" ></ td >
        <     td width = "63%" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
    <     td >

    <     ul id = "nav" >
        <     li  class= "off" >< a href = "#" >< img src = "Bilder/index_04.gif"  width = "160"  height = "39"  alt = ""  border = "0" ></ a >

        <     ul >
            <     li >< a href = "index.php?site=news" > NEWS </ a ></ li >
            <     li >< a href = "index.php?site=news&action=archive" > ARCHIVE </ a ></ li >
            <     li >< a href = "index.php?site=articles" > ARTICLES </ a ></ li >
            <     li >< a href = "index.php?site=calendar" > CALENDAR </ a ></ li >
            <     li >< a href = "index.php?site=faq" > FAQ </ a ></ li >
            <     li >< a href = "index.php?site=search" > SEARCH </ a ></ li >
            
      </     ul ></ li >
        <     li  class= "off" >< a href = "#" >< img src = "Bilder/index_05.gif"  width = "159"  height = "39"  alt = ""  border = "0" ></ a >
        <     ul >
            <     li >< a href = "index.php?site=about" > ABOUT US </ a ></ li >
            <     li >< a href = "index.php?site=squads" > SQUADS </ a ></ li >        
            <     li >< a href = "index.php?site=members" > MEMBERS </ a ></ li >
            <     li >< a href = "index.php?site=clanwars" > CLANWARS </ a ></ li >
            <     li >< a href = "index.php?site=history" > HISTORY </ a ></ li >
            <     li >< a href = "index.php?site=awards" > AWARDS </ a ></ li >
            <     li >< a href = "index.php?site=joinus" > JOIN US </ a ></ li >

        </     ul ></ li >
        <     li  class= "off" >< a href = "#" >< img src = "Bilder/index_06.gif"  width = "158"  height = "39"  alt = ""  border = "0" ></ a >
        <     ul >
            <     li >< a href = "index.php?site=forum" > FORUMS </ a ></ li >
            <     li >< a href = "index.php?site=guestbook" > GUESTBOOK </ a ></ li >
            <     li >< a href = "index.php?site=registered_users" > REGISTERED USERS </ a ></ li >
            <     li >< a href = "index.php?site=whoisonline" > WHO IS ONLINE </ a ></ li >
            <     li >< a href = "index.php?site=polls" > POLLS </ a ></ li >
            <     li >< a href = "index.php?site=server" > SERVERS </ a ></ li >
            
        </     ul ></ li >
        <     li  class= "off" >< a href = "#" >< img src = "Bilder/index_07.gif"  width = "158"  height = "39"  alt = ""  border = "0" ></ a >
        <     ul >
            <     li >< a href = "index.php?site=sponsors" > SPONSORS </ a ></ li >
            <     li >< a href = "http://irgaming.ir.ohost.de/top-xl-v1/" > Toplist </ a ></ li >
            <     li >< a href = "index.php?site=links" > LINKS </ a ></ li >
            <     li >< a href = "index.php?site=linkus" > LINK US </ a ></ li >
            <     li >< a href = "index.php?site=contact" > CONTACT </ a ></ li >
            <     li >< a href = "index.php?site=challenge" > FIGHT US </ a ></ li >
            
        </     ul ></ li >
    </     ul >

    </     td >
    </     tr >
        </     table >
        </     td >
        <     td width = "19%" >< img src = "Bilder/index_08.gif"  width = "188"  height = "39"  alt = "" ></ td >
        </     tr >
        </     table >
        </     td >
      </     tr >
      <     tr valign = "top" >
      <     td width = "635" >
      <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "177"  background = "Bilder/index_10.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_18.gif"  width = "177"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "635" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_11.gif"  width = "432"  height = "16"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_12.gif"  width = "203"  height = "16"  alt = "" ></ td >
        </     tr >
        <     tr >
        <     td width = "432" >< img src = "Bilder/index_14.gif"  width = "432"  height = "39"  alt = "" ></ td >
        <     td width = "203" >< img src = "Bilder/index_15.gif"  width = "203"  height = "39"  alt = "" ></ td >
        </     tr >
        <     tr valign = "top" >
        <     td width = "432"  background = "Bilder/index_16.gif"  align = "center" >& nbsp ;</ td >
        <     td width = "203" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >
             fafasfasfasf
             </ td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_22.gif"  width = "203"  height = "37"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_23.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_24.gif"  width = "203"  height = "52"  alt = "" >
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
        <     table cellpadding = "0"  cellspacing = "0"  width = "100%" >
        <     tr >
        <     td >
        <     img src = "Bilder/index_25.gif"  width = "635"  height = "39"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center"  background = "Bilder/index_26.gif" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        <     td width = "188"  background = "Bilder/index_13.gif" >
        <     table width = "100%"  border = "0"  cellpadding = "0"  cellspacing = "0" >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        <     tr >
        <     td >
        <     img src = "Bilder/index_19.gif"  width = "188"  height = "35"  alt = "" >
        </     td >
        </     tr >
        <     tr >
        <     td align = "center" >& nbsp ;
        
        </     td >
        </     tr >
        </     table >
        </     td >
        </     tr >
        </     table >
      </     td >
      </     tr >
      <     tr >
      <     td >< img src = "Bilder/index_27.gif"  width = "177"  height = "24"  alt = "" >< img src = "Bilder/index_28.gif"  width = "635"  height = "24"  alt = "" >< img src = "Bilder/index_29.gif"  width = "188"  height = "24"  alt = "" ></ td >
      </     tr >
    </     table >
    </     body >
    </     html > 
    bitte sehr und ein weiteres problem ist er zeigt die buttons nicht in der länge wie sie sind sondern etwas übreinander. wenn du genau hinschaust fehlt da so nen rand innen. den kannste auf nem screen wie es aussehen soll anschauen
     
  15. 27. März 2007
    AW: Navi

    HTML:
    <html>
<head>
<style type="text/css">
<!--
body {
background-color: black;
}

.navi td {
height: 50px;
vertical-align: top;
}

.div_navi {
color: #FFFFFF;
border: 1px solid #FFFFFF;
}

-->
</style>
</head>
<body>

<table width="1000" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td><img src="Bilder/index_01.gif" width="1000" height="221" alt=""></td><!--logo-->
 </tr>
 <tr>
 <td><img src="Bilder/index_02.gif" width="1000" height="23" alt=""></td><!--balken unter logo-->
 </tr>
 <tr>
 <td>
 <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td valign="top"><img src="Bilder/index_09.gif" width="177" height="38" alt=""></td>
 <td valign="top">
 <table width="100%" border="0" cellpadding="0" cellspacing="0" class="navi">
 <tr>
 <td onmouseover="getElementsByTagName('div')[0].style.display='block';" onmouseout="getElementsByTagName('div')[0].style.display='none';">
 <img src="Bilder/index_04.gif" border="0">
 <div style="display:none;" class="div_navi">
 Navi
 </div>
 </td>
 <td onmouseover="getElementsByTagName('div')[0].style.display='block';" onmouseout="getElementsByTagName('div')[0].style.display='none';">
 <img src="Bilder/index_05.gif" border="0">
 <div style="display:none;" class="div_navi">
 Navi
 </div>
 </td>
 <td onmouseover="getElementsByTagName('div')[0].style.display='block';" onmouseout="getElementsByTagName('div')[0].style.display='none';">
 <img src="Bilder/index_06.gif" border="0">
 <div style="display:none;" class="div_navi">
 Navi
 </div>
 </td>
 <td onmouseover="getElementsByTagName('div')[0].style.display='block';" onmouseout="getElementsByTagName('div')[0].style.display='none';">
 <img src="Bilder/index_07.gif" border="0">
 <div style="display:none;" class="div_navi">
 <a href="index.php">Navi</a>
 </div>
 </td>
 </tr>
 </table>
 </td>
 <td valign="top"><img src="Bilder/index_08.gif" width="188" height="39" alt=""></td>
 </tr>
 </table>
 </td>
 </tr>
</table>
</body>
</html>
    das ist dein menu mit javascript, da du ja alles in table's verschachtelst kommt du mit ul li net sehr weit bei deinem können.

    viel spaß
     
  16. 27. März 2007
    AW: Navi

    musste das von dir zwar etwas abändern aber endlich hat es geklapt thx an alle die dabei geholfen haben !!!!!!!!!

    mfg darki
     
  17. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.