Margin auto überschreibt Wert

[Ainschy]

Hallo zusammen,

ich weiß jetzt nicht ob das ein Bug oder ein Feather ist ....

Folgendes fiel mir auf

Ich habe beim gestalten eines Eventmoduls für den rechten Layoutbereich unter:

Abstand und Ausrichtung
Margin: 0 15 0 0 px
Elementausrichtung: Links

gewählt nach dem Speichern sah ich das mein Zahlenwert 15 durch auto ersetzt wurden also der Abstand zum rechten Element. Ist das so gewünscht ?

Mein Ziel war es mit dem Wert 15 den Abstand zum rechten Rand zu setzen und die Elemente im Modul sollten sich dann Linksbündig aufbauen. Oder kann ich die Linksbündige Ausrichtung nur jeweils in den innen Elementen (div's) vom Modul eintragen ? Was dann das Verhalten erklärt.

Gruß Ainschy

[Sebastian]

HI

die Elementausrichtung funktioniert über die Angabe einer festen Breite und dem Margin: Auto. So wird auch die Website über den <div id="wrapper"> zentriert...

Die Angabe einer Ausrichtung überschreibt also deine individuellen Werte.

Sebastian

[Stephan]

Hallo Ainschy,

versuch doch den Abstand des Moduls in deiner CSS-Datei festzulegen und nicht im Backend selbst:

.klassenname { margin-right: 15px; }

[G4meM0ment]

HI

die Elementausrichtung funktioniert über die Angabe einer festen Breite und dem Margin: Auto. So wird auch die Website über den <div id="wrapper"> zentriert...

Die Angabe einer Ausrichtung überschreibt also deine individuellen Werte.

Sebastian

Ich habe ein ähnliches Problem ist das hier das selbe?

body {
width:750px;
margin 0 auto;
color: black;
font-size: large;
background-color:  #E9EAB5;
background-image: url(/images/background.png);
}

/* -----NAVI-----*/

  ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
    border: 2px solid  #727421;
    background-color: #D6D872;
    background-image: url(/images/navi.png);
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 2px solid #727421;
    border-left-color: #F4F5C0; border-top-color: #F4F5C0;
    background-color: #E4E868;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: #F4F5C0;
    border-left-color: #727421; border-top-color: #727421;
    background-color: #A2A52E;
  }
/* ----- HEADER ----- */



#header {
margin: 0 auto;
width: auto;
height:146px;
background-color: #D6D872;
border: 2px solid #727421;
border-bottom-color: #D6D872;
/*background-image: url(/images/header.png);*/
}


/* ----- MAIN CONTENT ----- */



#content {
margin: 0 auto;
padding:25px;
border: 3px solid #727421;
border-color: #F4F5C0;
border-left-color: #727421; border-top-color: #727421;
background-color:  #D6D872;
width:696px;
min-height:450px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:450px; /* for IE5.x and IE6 */
margin-top:10px;
background-image: url(/images/content.png);
}



/* ----- FOOTER ----- */



#footer { 
width:746px;
height:120px;
    border: 3px solid #727421;
    border-color: #F4F5C0;
    border-left-color: #727421; border-top-color: #727421;
    background-color:  #D6D872;
margin-top:10px;
background-image: url(/images/footer.png);
}

  ul#foot {
    font-size: xx-large;
    margin: 0; padding: 36px;
    text-align: center;
    background-color: #D6D872;
    background-image: url(/images/footer_button.png);
  }
  ul#foot li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#foot a, ul#foot span {
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 2px solid #727421;
    border-left-color: #F4F5C0; border-top-color: #F4F5C0;
    background-color: #E4E868;
  }
  * html ul#foot a, * html ul#foot span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#foot a:hover, ul#foot span {
    border-color: #F4F5C0;
    border-left-color: #727421; border-top-color: #727421;
    background-color:  #A2A52E;
  }

a:link {color:black; text-decoration:underline; font-weight: bold}
a:visited {color:black; text-decoration:underline; font-weight: bold}
a:active {color:white; text-decoration:none}
a:hover {color:black; text-decoration:overline; font-weight: bold}

Aus irgendeinem Grund übernimehmen alle Objekte immer die margin einstellung des bodys.

[bizon]

Hallo,

ul hat keine css-Regel für width und ist dadurch automatisch 100% breit.

Gib also ul eine Breite und formatiere den Abstand nach links über margin-left. z.B.

#Navigation 
{
width: 350px;
margin-left: 200px;
}

[G4meM0ment]

Hallo,

ul hat keine css-Regel für width und ist dadurch automatisch 100% breit.

Gib also ul eine Breite und formatiere den Abstand nach links über margin-left. z.B.

#Navigation 
{
width: 350px;
margin-left: 200px;
}

Ich habe immernoch das problem egal was ich bei margin ändere (bei header) es bleibt immer gleich nämlich so wie es bei body eingestellt ist:

http://g4mem0ment.square7.ch/

(Background etc nur platzhalter)

jetztz habe ich bei header:

margin-left: 0;
margin-top: 0;

[bizon]

Konntest du mal genau sagen, was du erreichen möchtest?

[Andreas]

Mach die Seite doch einfach mit Contao, weil, validiere mal deinen Quelltext.

Dem BODY eine Breite zu geben und ihn dann zu zentrieren ist unüblich. Eigentlich dürftest du dann den Hintergrund des BODYs neben dieser Breite gar nicht sehen, ist nur Glück, das der Browser das gerade zeigt.

Wenn du den anderen Elementen jetzt margin-left verpasst, orientieren die sich natürlich an dem BODY, da müsstest du schon negative Werte für die Margins nehmen, aber wie gesagt, den BODY zu verkleinern macht man eigentlich nicht, dafür ist der #wrapper da.