zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Warum geht das nicht?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2011, 16:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2011
Beiträge: 3
HTML5junkie befindet sich auf einem aufstrebenden Ast
Standard Warum geht das nicht?

Folgendes HTML:
HTML-Code:
<div id="dropdown">
<ul>
    <li><a class="clicked" href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
</ul>
</div>
Folgendes CSS:

Code:
#dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#dropdown ul li {
	position: relative;
	float: left;
}

#dropdown li ul {
	position: absolute;
	top: 100%;
	display: none;
}

/* Styles for Menu Items */
#dropdown ul li a {
    display: block;
    padding: 0.2cm;
    background-color: #000032;
}

#dropdown ul li a:hover {
    background-color: white;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */



a.clicked {
	text-decoration: none;
	color: yellow;
	font-weight: bold;
}

a.clicked:hover {
	text-decoration: none;
	color: #000032;
	background-color: yellow;
	font-weight: bold;
}
Folgendes Ergebnis:

Unbenannt.png

Folgendes Kommentar:

SCHEISSE! Warum geht der 5te Menüpunkt nicht unter dem ersten (den mit der klasse
Code:
clicked
sondern erst danach weiter?????

DANKE SCHON MAL IM VORAUS!!!

(Hier noch mal das ganze als valide Website, zum ausprobieren

HTML-Code:
<!doctype html>
<html>
    <head>
        <title>Beispiel</title>
        <style>
        #dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#dropdown ul li {
	position: relative;
	float: left;
}

#dropdown li ul {
	position: absolute;
	top: 100%;
	display: none;
}

/* Styles for Menu Items */
#dropdown ul li a {
    display: block;
    padding: 0.2cm;
    background-color: #000032;
}

#dropdown ul li a:hover {
    background-color: white;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */



a.clicked {
	text-decoration: none;
	color: yellow;
	font-weight: bold;
}

a.clicked:hover {
	text-decoration: none;
	color: #000032;
	background-color: yellow;
	font-weight: bold;
}
        </style>
    </head>

    <body>
    <div id="dropdown">
<ul>
    <li><a class="clicked" href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
</ul>
</div>
    </body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2011, 16:11
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Mach mal den Browser größer , oder gib deiner ul 'ne feste Breite statt 100% (die hat sie auch ohne das du es extra schreibst)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2011, 16:22
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ich kann das Problem in keinem Browser nachvollziehen.

Ich schätze, aus irgendeinem Grund wird der erste, der "aktive" Menüpunkt höher als die anderen und die Floats bleiben daran hängen. Könnte mit der Fettung zusammenhängen. Oder mit Rundungsfehlern wegen der untauglichen Einheit cm fürs Padding.

Bitte, auch wenn dich ein Problem nervt: Bleib bei einer sachlichen Ausdrucksweise. Fäkalsprache will niemand lesen. Massenhafte Verwendung von Satzzeichen und permanente Großschreibung sind nervig, letzteres gilt als Herumschreien.


@cebito: Ich schätze, das Thema des Threads soll nicht sein, wie der Umbruch zu verhindern ist, sondern warum der Umbruch so stattfindet, wie er stattfindet -- wobei ich das Problem wie gesagt nicht nachvollziehen kann.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.11.2011, 15:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2011
Beiträge: 3
HTML5junkie befindet sich auf einem aufstrebenden Ast
Daumen hoch

Zitat:
Zitat von fricca Beitrag anzeigen
Könnte mit der Fettung zusammenhängen.
Ja. Das war richtig. Danke!

Zitat:
Zitat von fricca Beitrag anzeigen
Bleib bei einer sachlichen Ausdrucksweise. Fäkalsprache will niemand lesen. Massenhafte Verwendung von Satzzeichen und permanente Großschreibung sind nervig, letzteres gilt als Herumschreien.
Ja. Merke ich mir!

Zitat:
Zitat von fricca Beitrag anzeigen
Wobei ich das Problem wie gesagt nicht nachvollziehen kann.
Ich habs jetzt auch in firefox und opera ausprobiert. Bei firefox hats geklappt, bei Opera mal ja mal nein - nur bei Chrome war das Problem immer.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.11.2011, 16:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2011
Beiträge: 3
HTML5junkie befindet sich auf einem aufstrebenden Ast
Standard

Habe jetzt die Lösung gefunden den Link fett zu machen, aber so das es trotzdem geht. Einfach bei allen Links
Code:
line-height: 100%
und fertig!
Mit Zitat antworten
Antwort

Stichwörter
ausklappbares menü, menü, navigation

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 06:16 Uhr.