Nächste Frage - Drop Down Menü zusammen verschieben

[Maase]

So,
Ich kann jetzt das Drop Down Menü verschieben, aber es bewegt sich immer nur der zweite "Button" *grübel

Weiß wer von euch wie man die beide bewegt?

Code:

ul#navigation{


}


ul#navigation
{
	color:#FFF;
	text-decoration: underline;
	font-weight: bold;
}


ul#navigation li
{
    float: left;
	position: relative;
	height: 25px;
	width: 150px;
	list-style-type: none;
	background-color: #DF0101;
	margin: auto;
	margin-top: -16px;
	margin-left: 30px;
	margin-right: 130px;
	white-space: nowrap; 
}


ul#navigation li:hover
{
   background-color: #000;
}


ul#navigation li ul
{
	position: absolute;
	top: 38px;
	left: -1px;
	margin-left: -69px;
}


ul#navigation li ul li
{
	display: block;
	float: none;
	width: 100px;
	background-color: #000;
	border-top: solid 1px #000;
	height: 34px;
	}


	
	ul#navigation li ul li
	{
	background-color: #FF0040;
	}
	
ul#navigation li>ul
{
	display: none;
}


ul#navigation li:hover>ul
{
	display: block;
}

Gruß

 

[Maase]

Keiner ne Idee?

 

[threadi]

Was meinst Du mit "verschieben"? Anhand des Codes kann ich nur erkennen, dass die Untermenüpunkte ein- und ausgeblendet werden. Von Verschieben sehe ich nichts?

Ist denn der dazugehörige HTML-Code valide?

 

[Maase]

Valide??
Sorry, bin totaler Anfänger.
Ich möchte das ganze DropDown Menü nach rechts verschieben ;)
Hier der Link zur Website:
Pilotify.tk

Bei dem Drop Down Menü kann ich nur den zweiten Menüpunkt verschieben (wie man dort sieht)

Gruß

 

[threadi]

Die richtige URL deiner Seite lautet: Pilotly< - das Frameset von der anderen URL interessiert hier weniger da es die Darstellung auch überhaupt nicht betrifft in dem Fall.

Der HTML-Code dort ist auch nicht valide:
[Invalid] Markup Validation of http://train.bplaced.net/ - W3C Markup Validator

Insbesondere fehlt der für die korrekte Ausgabe wichtige Doctype.

Bitte lies dir nochmal die HTML-Grundlagen durch:
SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei
Wenn Du deinen HTML-Code dahingehend angepasst hast und der Validator keine Fehler mehr meldet, schau nochmal nach, ob immer noch irgendwas falsch dargestellt wird. Wenn ja, können wir dann weiterschauen.

 

[Maase]

Hallo,
Ich habe einem Tutorial gesehen, das man nicht unbedingt einen DOCTYPE braucht ;)

Gruß

 

[threadi]

Das entspricht keineswegs den Vorgaben von HTML und widerspricht auf dem was Browser bei der Darstellung von Webseiten an Angaben benötigen. Welches Tutorial ist das gewesen?

 

[Maase]

Weiß ich nicht mehr genau, eins von YouTube aufjedenfall.
Ich glaube von dem User HTMLWorld und auf einer Website habe ich es mal gelesen ;)

 

[threadi]

Dann vergiss solche Tutorials. Es gibt genug andere, richtige, die sich auch an die HTML-Standards halten (was sie eigentlich auch immer tun sollten).

 

[Maase]

Ok, Alles klar, werde mich dran halten.

 

[threadi]

Ok, jetzt hast Du den HTML-Code bereinigt (bis auf das <center>). Wohin soll jetzt das Dropdown-Menü "verschoben" werden?

 

[Maase]

Hallo,
Etwas weiter nach recht ;)
Mein Css Code:

ul#navigation{
position: absolute;
margin-left: 250px;
margin-top: 100px;
}


ul#navigation
{
    color:#FFF;
    text-decoration: underline;
    font-weight: bold;
}


ul#navigation li
{
    float: left;
    position: relative;
    height: 25px;
    width: 150px;
    list-style-type: none;
    background-color: #DF0101;
    margin: auto;
    margin-top: -16px;
    margin-left: 30px;
    margin-right: 160px;
    white-space: nowrap; 
}


ul#navigation li:hover
{
   background-color: #000;
}


ul#navigation li ul
{
    position: absolute;
    top: 38px;
    left: -1px;
    margin-left: -68px;
    
}


ul#navigation li ul li
{
    display: block;
    float: none;
    width: 150px;
    background-color: #000;
    border-top: solid 1px #000;
    height: 34px;
    }


    
    ul#navigation li ul li
    {
    background-color: #FF0040;
    }
    
ul#navigation li>ul
{
    display: none;
}


ul#navigation li:hover>ul
{
    display: block;]

Das ist mein Code!!
Wenn ich oben bei #navigation
den Wert bei den magin´s ändere stellst sich ein ungefähr 5cm großer Abstand zwischen den beiden Menüpunkten her :(

Gruß

PS. Danke für deine Hilfe in allen Sachen :)

 

[threadi]

Wenn Du

position: absolute;

bei einem Element angibst, dann wirkt

margin

nicht. Ich würde dir raten auf absolute Positionierung zu verzichten. Dann wirkt auch margin und du kannst die Abstände zu den umgebenden Elementen gut definieren.

 

[Maase]

ok aber auch ohne absolute klappt das nicht :(

ich möchte ja eigentlich nur erreichen das die einzelnen Menüpunkte nebeneinander bleiben und nicht 5cm auseinander sind ;)

 

[threadi]

Achsooo, also meinst die nicht, dass Menü zu verschieben sondern die Menüpunkte näher zueinander zu schieben. Manchmal muss man die Frage auch deutlich formulieren ;)

Der aktuelle Abstand kommt durch den unnötigen Abstand im "ul#navigation li" zustande. Dort steht:

margin: -16px 160px auto 30px;

Lass das komplett weg und die Menüpunkte sind direkt nebeneinander.

Wenn Du dann noch einen Abstand zwischen den Menüpunkten willst, dann definiere z.B.

margin: 0 4px 0 0;

Tipp: im Firebug kann man das prima live alles durchtesten. Beachte jedoch, dass Du nie absolute Positionierung einfach so verwenden solltest. Auch bei anderen CSS-Eigenschaften müsstest Du nochmal nachlesen was sie eigentlich bedeuten, was z.B. die 4 Angaben im margin bedeuten.

 

[Maase]

Erstmal danke für deine antwort :)

vielleicht habe ich mich auch etwas schlecht ausgedrükt :(


Und danke es hat geklappt :)

Ich hinterlasse auch ein Danke^^

Gruß