Ergebnis 1 bis 6 von 6

Thema: Bitte um Erklärung

  1. #1
    Samurai Avatar von Donkey
    Registriert seit
    12.08.2008
    Ort
    München
    Alter
    35
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bitte um Erklärung

    Hallo zusammen!

    Hab ein Script für eine CSS-Dropdown-Navi gefunden.
    Funzt auch ganz gut und so.
    Allerdings komm ich nicht wiklich dahinter was die ganzen Browserweichen im Quellcode sollen - vor Allem weil es da um Tabellen und dass schliessende Tag </a> geht.

    Weiss einer was das soll?

    HTML-Code:
    <ul id="menu">
    	<li><a href="index.html"><b>Home</b></a></li>
    	<li><a href="single.html"><b>Single Level</b></a></li>
    	<li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    				<ul>
    					<li><a href="#url">Dropdown 1.1</a></li>
    					<li><a href="#url">Dropdown 1.2</a></li>
    					<li><a href="#url">Dropdown 1.3</a></li>
    					<li><a href="#url">Dropdown 1.4</a></li>
    					<li><a href="#url">Dropdown 1.5</a></li>
    					<li><a href="#url">Dropdown 1.6</a></li>
    				</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    			</li>
    			<li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    				<ul>
    					<li><a href="#url">Dropdown 2.1</a></li>
    					<li><a href="#url">Dropdown 2.2</a></li>
    					<li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
    					<li><a href="#url">Dropdown 2.4</a></li>
    					<li><a href="#url">Dropdown 2.5</a></li>
    				</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    			</li>
    			<li><a href="#url">Dropdown three</a></li>
    			<li><a href="#url">Dropdown four</a></li>
    			<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
    			<!--[if lte IE 6]><table><tr><td><![endif]-->
    				<ul>
    					<li><a href="#url">Dropdown 5.1</a></li>
    					<li><a href="#url">Dropdown 2.2</a></li>
    					<li><a href="#url">Dropdown 3.3</a></li>
    				</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    			</li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="#url">Dropline one</a></li>
    			<li><a href="#url">Dropline two</a></li>
    			<li><a href="#url">Dropline three</a></li>
    			<li><a href="#url">Dropline four</a></li>
    			<li><a href="#url">Dropline five</a></li>
    			<li><a href="#url">Dropline six</a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
    	<!--[if lte IE 6]><table><tr><td><![endif]-->
    		<ul>
    			<li><a href="#url">Flyout one</a></li>
    			<li><a href="#url">Flyout two</a></li>
    			<li><a href="#url">Flyout three</a></li>
    			<li><a href="#url">Flyout four</a></li>
    		</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	</li>
    	<li id="support"><a href="support.html"><b>Support</b></a></li>
    	<li id="contact"><a href="contact.html"><b>Contact</b></a></li>
    </ul>

    CSS:
    Code:
    #pad {height:140px;}
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    
    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssmenus.co.uk
    Copyright (c) 2009- Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any 
    way to fit your requirements.
    =================================================================== */
    #menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
    #menu li {float:left; margin-right:1px;}
    #menu li a {display:block; float:left; height:40px; line-height:40px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}
    
    
    #menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
    
    /* Default link styling */
    
    /* Style the list OR link hover. Depends on which browser is used */
    
    #menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
    #menu li:hover {position:relative; z-index:200;}
    
    #menu li:hover > a {color:#fff; background:#c60;}
    #menu li:hover > a.sub {color:#fff; background-color:#c60;}
    
    #menu li.current a {color:#fff; background:#840;}
    
    #menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}
    #menu li.current a.sub {color:#fff; background:#840 url(down-arrow.gif) no-repeat right center;;}
    
    #menu :hover ul {left:0; top:40px; width:120px; background:#444;}
    
    /* keep the 'next' level invisible by placing it off screen. */
    #menu ul, 
    #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    
    #menu :hover ul :hover ul
    {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
    
    #menu :hover ul li {margin:0; border-top:1px solid #666;}
    #menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
    #menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}
    
    #menu :hover ul :hover {background-color:#c60; color:#fff;}
    #menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}
    
    #menu :hover ul li.currentsub a {background:#840; color:#fff;}
    #menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}
    
    #menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
    #menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}
    
    #menu :hover ul :hover ul li.currentfly a,
    #menu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;}
    Gruss, Donkey
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bitte um Erklärung

    Der IE bis Version 6 kann keine Drop-Down-Menüs, weil er den Hover-Effekt nur für das a-Element anwenden kann.
    Durch die Spezialangaben werden die Untermenüs in eine Tabelle gesetzt.

    Eine andere Möglichkeit ist diese: http://www.ohne-css.gehts-gar.net/0066.php

  3. #3
    Samurai
    Themenstarter
    Avatar von Donkey
    Registriert seit
    12.08.2008
    Ort
    München
    Alter
    35
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bitte um Erklärung

    Ja dieses "csshover3-source.htc" hab ich auch gefunden.

    Sieht so aus wie JavaScript - darum hab ichs nicht ausprobiert.
    Denke die Hauptnavi sollte tunlichst ohne JavaScript auskommen.

    Oder ist das was Anderes?

    EDIT:
    Habs grad gelesen ist JS.
    Aber die Navi würde ja nur im IE6 oder älter nicht funzen wenn JS deaktiviert ist.
    Das passt schon

    EDIT2:
    Ein kleine Frage hab ich noch.
    Hab auf ner anderen Seite gelesen dass wenn man dieses JS benutzt in der htaccess folgendes eingeben muss:

    Code:
    AddType application/x-httpd-php htc
    stimmt das? Weil in der Beschreibung die sejuma verlinkt hat steht nichts davon.
    Geändert von Donkey (08.09.2009 um 20:00 Uhr)

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bitte um Erklärung

    Die HTC-Datei enthält in der Tat ein Javascript.
    Bei mir funktioniert es ohne jegliche Einträge in die htacess, mir ist anderweitiges auch nicht bekannt.

  5. #5
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard AW: Bitte um Erklärung

    [Offtopic]
    Zitat Zitat von Donkey Beitrag anzeigen
    Bitte um Erklärung
    Am Anfang war die er von Lava bedeckt.....
    Geiler Threadtitel
    [/Offtopic]

  6. #6
    Samurai
    Themenstarter
    Avatar von Donkey
    Registriert seit
    12.08.2008
    Ort
    München
    Alter
    35
    Beiträge
    237
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bitte um Erklärung

    Also ich denke dass es ohne htaccess gehen muss. Anders wäre es ja unsinnig,
    denn viele Server (vor Allem die von Free-Hostern) unterstützen diesen Eintrag in der htaccess garnicht.

    @Elvis: mir is auf die Schnelle nicht Intelligenteres eingefallen

Ähnliche Themen

  1. Quellcode-Erklärung (JavaScript)
    Von Klaus D. im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 06.10.2007, 17:27
  2. Die Liebes erklärung
    Von ich11 im Forum Off Topic und Quasselbox
    Antworten: 8
    Letzter Beitrag: 03.07.2007, 21:28
  3. Webspace-Erklärung für noobs
    Von elhaso im Forum Webhoster - Provider - (free) Webspace - Server - Domain
    Antworten: 0
    Letzter Beitrag: 17.05.2007, 14:08
  4. Bitte um Erklärung!
    Von Maria261 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.11.2006, 17:15
  5. Die Erklärung für so manchen Vorfall *g*
    Von Carolyn im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 0
    Letzter Beitrag: 26.02.2004, 16:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •