• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage zu margin: 0 auto

P

Pandax3

Neues Mitglied
Hallo,
ich habe folgendes Problem:

HTML: 
#navi ul
{ 
list-style:none;
width:800px;
margin:0 auto;
}

Umso größer ich die width mache desto mehr verschiebt sich die liste nach links.Wie kann das sein, es steht doch auf margin:0 auto ?
Wenn ich die 0 bei "margin:0 auto" verändere, verschiebt sich die liste ebenfalls nach links, ich dachte jedoch, dass sich die höhe verändert, wenn man die 0 verändert.

Ich hoffe, dass mir jemand helfen kann, wäre nett, danke schon mal :D
 
setze am besten wenn du die width änderst, den rahmen:
Code: 
border: 2px solid red
du wirst feststellen, das der rahmen der list immer noch zentriert ist, hoffe ich doch :-D
 
Zuletzt bearbeitet:
hm ich habe jetzt nen rahmen darein gesetzt ;D das problem ist, dass der jedoch nicht angezeigt wird :D
ich weiß nicht was ich falsch mache :-|

EDIT: ok ich habe jetzt nen rahmen aber der umrandet nicht die einträge sondern bildet nur einen roten strich? Du hast recht der rahmen bleibt zentriert. Aber wie kann ich es machen, dass die einträge zentriert werden , weil ich ja eigenlich keinen rahmen brauche.

EDIT 2 ;D: ok es liegt an "Float:left" , dass die einträge nach links verschoben werden, aber ich möchte sie halt nebeneinander anzeigen :D, wie soll ich das jetzt machen :shock:
 
Zuletzt bearbeitet:
durch das padding wird der rahmen , welcher zuvor nur ein strich war ( also ne doppellinie ) , größer, aber die einträge werden dadruch nicht zentriert
 
so ich habe es mir jetzt mal angeguckt, scheint ja recht kompliziert zu sein mit dem "float:left", benutze jetzt "display:inline";

ich habe es versucht jetzt mittig zu platzieren , allerdings befindet es sich immer noch nicht ganz mittig, zudem verstehe ich nicht warum die border linie so komisch aussieht , wäre nett wenn jemand helfen könnte, der link steht unten

[url]http://pandax3.pa.funpic.de [/URL]
 
Du brauchst noch ein padding-left:0 beim Ul-Element in deinem CSS.
Der Grund ist, dass die Li-Elemente normalerweise ein Listenzeichen haben welches du durch List-style:none nicht mehr anzeigst. Der Platz für das Listenzeichen wird durch ein Padding-left bereitgehalten und war halt noch vorhanden. Daher hattest du die Verschiebung um den Bereich nach rechts.
Du kannst dir übrigens mindestens ein Div sparen.
 
hey danke erstmal,
es ist jetzt alles mittig positioniert.

Ich hätte da jedoch noch eine frage (bin noch anfänger ;) ) :D :D
Ich würde gerne wissen wieso sich zwischen dem oberen runden Button und der Leiste ganz oben ein Abstand befindet. Zudem versteh ich nicht wieso man kein border um die runden einträge legen kann , es entsteht dabei immer nur eine doppellinie. Das liegt sicherlich an dem Float:left , aber wie soll man es sonst machen ?_?

Wäre nett wenn jemand helfen kann, wie gesagt ich bin noch Anfänger und freue mich über jede neue Erkenntnis.
mfg
 
Pandax3 schrieb:
Ich würde gerne wissen wieso sich zwischen dem oberen runden Button und der Leiste ganz oben ein Abstand befindet.
Zum Vergrößern anklicken....

Jedes HTML-Element hat einige Standard-Eigenschaften die sich von Browser zu Browser auch leicht unterscheiden. Das Menü links hast Du mit <ul> geschrieben. <ul> hat einen Standard-Abstand nach oben. Und den siehst Du hier. Wenn Du das verhindern willst, setze am Besten alle Außen- und Innenabstände aller Elemente zurück:

Code: 
* { margin: 0;padding: 0; }

Danach musst Du natürlich die von dir verwendeten Elemente per CSS wieder so anpassen wie Du es willst, so dass es für dich richtig aussieht.

Zudem versteh ich nicht wieso man kein border um die runden einträge legen kann , es entsteht dabei immer nur eine doppellinie. Das liegt sicherlich an dem Float:left , aber wie soll man es sonst machen ?_?
Zum Vergrößern anklicken....

Wenn Du damit das Menü links meinst: dort hast Du mit border-radius bereits selbst definiert, dass es dort einen abgerundeten Rahmen gibt. Einen weiteren Rahmen kannst Du hier nicht definieren. Solltest Du dem im dem <li> enthaltenen Link einen Rahmen geben, wäre dieser logischerweise unabhängig von dem runden Rahmen im <li> - ist ja auch ein anderes Element.
 
hm das versteh ich jetzt grade nicht, wenn ich "float:left" weglasse, dann macht der allerdings einen Ramen um das menü links - bei "float-left" allerdings nicht :O
 
Ach, jetzt weiß ich auch welches float Du meinst. Das float in "#navi2 ul". Ja, wenn Du das drinne hast und weder Höhe noch Breite angibst, dann hat das Element auch keine Höhe. Du müsstest am Ende der Liste (vor </ul> als <li>) noch ein clear einfügen. Dann erhält das <ul> auch eine Höhe und der Rahmen wird um die Liste herum gelegt.

Wenn Du allerdings nichts rechts von der Liste stehen hast und dieser auch keine Breite gibst, würde das float an der Stelle auch keinen Sinn machen.
 
So noch mal danke für die Antwort, ich habe jetzt die Rahmen hinbekommen, ich habe diesbezüglich jedoch noch ein paar Fragen ( wie gesagt ich bin Anfänger und lege alles daran erstmal die grundlegenden Dinge zu begreifen )

1. Wieso gibt es einen Abstand zwischen dem Menü oben und dem roten Rahmen und einen Abstand zwischen dem roten Rahmen und dem schwarzen Rahmen?

2. Wie würde ich es jetzt hinbekommen neben dem linken Menü einen Text zu schreiben? Was muss ich dafür eingeben. Wenn ich jetzt den Text weiter schreibe , schreibt er unten weiter ( siehe " TEST" )
 
Auf den Abstand habe ich dich oben schonmal hingewiesen. Das ist der Browser-Standard-Abstand für <ul>, der je nach Browser anders sein kann. Oben habe ich geschrieben wie Du das verhindern kannst.

Gibt dem gefloateten Element eine feste Breite - dann können nachfolgende Elemente es umfließen. Bitte schau dir dazu auch die CSS-Float-Grundlagen an. Links dazu findest du in unserem Wiki oben.
 
Wäre nett, wenn du den Code posten könntest, der jetzt funktioniert, damit andere, die hier reinschauen auch wissen was da denn jetzt wie funktioniert, sonst stehen sie irgendwie dumm da.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben