tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von threadi
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
360
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 28.03.11 08:29 #1
    Avatar von dwex
    dwex dwex ist offline Mitglied Platin
    Registriert seit
    Apr 2005
    Ort
    Landshut (Niederbayern)
    Beiträge
    695
    Hallo Leute,

    ich habe ein Listing für eine horizontale Navigation mit Flyouts.

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
	<style type="text/css">
		@import url("flyout.css");
	</style>
</head>
<body>

	<ul>
		<li><a href="">Item 1</a>
			<ul>
				<li><a href="">Sub 1 Item 1</a></li>
				<li><a href="">Sub 1 Item 2</a>
					<ul>
						<li><a href="">Sub 1 Sub 1 Item 1</a></li>
						<li><a href="">Sub 1 Sub 1 Item 1</a></li>
					</ul>
				</li>
				<li><a href="">Sub 1 Item 3</a></li>
			</ul>
		</li>
		<li><a href="">Item 2</a>
			<ul>
				<li><a href="">Sub 2 Item 1</a></li>
				<li><a href="">Sub 2 Item 2</a></li>
				<li><a href="">Sub 2 Item 3</a></li>
			</ul>
		</li>
		<li><a href="">Item 3</a></li>
		<li><a href="">Item 4</a></li>
	</ul>

</body>
</html>
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

    ul {
    width: 450px;
    list-style-type: none;
    margin:10px;
}
 
ul ul {
    display:none;
    position:absolute;
    width: 150px;
    margin:0;
    left: 0px;
    top: 30px;
}
 
ul ul ul {
    left: 150px;
    top:0;
}
 
li {
    float:left;
    position: relative;
    padding: 5px 15px 5px 5px;
    background-color:#EEEEFF;
}
 
li li {
    float:none;
    background-color:#CCCCCC;
    padding: 0;
}
 
li li li {
    background-color:#CCCCCC;
}
 
li li li a {
    background-color:#666666;
}
 
li li a {
    width: 147px;
    margin: 0;
    padding:3px 0px 3px 3px;
    line-height:20px;
    display:block;
}
 
li:hover ul ul {
    display:none;
}
 
li:hover ul {
    display: block;
}
 
li li:hover ul {
    display:block;
}


    Wie auf dem Bild "falsch.jpg" zu sehen werden die Untermenüs verschoben ohne das ich mir einen Reim drauf machen kann.

    Auf dem Bild "richtig.jpg" habe ich das montiert wie ich eigentlich die Ausgabe erwarten würde.

    Kann mir bitte jemand helfen - ich finde das Problem nicht.
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Navigation - Untermenü steht nicht dort wo es soll-richtig.jpg   Navigation - Untermenü steht nicht dort wo es soll-falsch.jpg  

     
    Ich würde mich über die Bewertung meiner Beiträge mit Kurzkommentar sehr freuen!

    Die "dumme Frage" ist gewöhnlich das erste Anzeichen einer völlig neuen Entwicklung!
    -------------------
    Es ist immer Zeit etwas zu verändern ....
    .... das alles so bleibt wie es ist!
    -------------------
    Homepage Landshut
    -------------------
    /voodoo.css
    #meinFeind {position: absolute; bottom: -6ft;}
    Zitieren Zitieren
  2. 28.03.11 19:50 #2
    threadi threadi ist offline Mitglied Brokat
    Registriert seit
    Dec 2006
    Ort
    Leipzig
    Beiträge
    478
    Setz zusätzlich zum margin auch padding auf 0.
    dwex bedankt sich. 
    Zitieren Zitieren
  3. 29.03.11 08:27 #3
    Avatar von dwex
    dwex dwex ist offline Mitglied Platin
    Registriert seit
    Apr 2005
    Ort
    Landshut (Niederbayern)
    Beiträge
    695
    Naja - manchmal sieht man den Wald vor lauter Bäumen nicht.
    Vielen Dank!
     
    Ich würde mich über die Bewertung meiner Beiträge mit Kurzkommentar sehr freuen!

    Die "dumme Frage" ist gewöhnlich das erste Anzeichen einer völlig neuen Entwicklung!
    -------------------
    Es ist immer Zeit etwas zu verändern ....
    .... das alles so bleibt wie es ist!
    -------------------
    Homepage Landshut
    -------------------
    /voodoo.css
    #meinFeind {position: absolute; bottom: -6ft;}
    Zitieren Zitieren
« CSS div untereinander Problem | Wie Boxmodell/Layout am besten lösen? »

Ähnliche Themen

  1. User Auslesen von dort Wo meine id steht
    Von ciberjoerg im Forum PHP
    Antworten: 4
    Letzter Beitrag: 09.12.09, 15:02
  2. 2 Taschen, wobei eine Tasche auf dem Boden liegt und die andere dort steht
    Von Rudi Media im Forum Hall of Fame
    Antworten: 6
    Letzter Beitrag: 30.04.09, 14:32
  3. Div fixed ist nicht dort wos sein soll :(
    Von Adi | tmine im Forum CSS
    Antworten: 5
    Letzter Beitrag: 05.09.07, 08:46
  4. Footer steht nicht da wo er hin soll!
    Von kirchel im Forum CSS
    Antworten: 3
    Letzter Beitrag: 20.08.06, 17:13
  5. Die Ausgabe bricht dort wo sie nicht soll
    Von scorpionsebickbos im Forum PHP
    Antworten: 9
    Letzter Beitrag: 26.05.06, 00:35