kostenloser Webspace werbefrei: lima-city


DIV innerhalb DIV zentrieren ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    tauli

    tauli hat kostenlosen Webspace.

    Hi,

    ich möchte innerhalb eines DIV ein anderes DIV zentriert darstellen,
    aber es klappt nicht ...

    <div id="aussen" style="text-align:center; width:100%">
       <div id="innen" style="text-align:left; width:530px; background:#DEDEDE;">
          <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p>
       </div>
    </div>


    was ist daran falsch ?!

    EDIT: wenn ich DIV aussen mit der "alten" (nicht CSS) align="center" definiere,
    dann klappt es, aber ist das dann auch valider Code ?

    <div id="aussen" align="center" width="100%">
       <div id="innen" style="text-align:left; width:"530px; background:#DEDEDE;">
          <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p>
       </div>
    </div>


    weil auf Dauer will ich ja auch den Style für die DIV id in einer .css Datei ablegen
    aber mit <div id="aussen" align="center" width="100%"> geht das ja sooo nicht,oder ?

    muss doch mit "reinem" CSS auch gehen ?!


    Beitrag zuletzt geändert: 6.1.2012 12:25:11 von tauli
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Gib dem inneren Div ein "margin:0 auto;" und wenn ein oberer Abstand gewünscht ist, noch zusätzlich ein "margin-top: Xem;" (für X einen Wert nach Belieben wählen).

    FF
  4. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    tauli schrieb:
    <div id="aussen" align="center" width="100%">
       <div id="innen" style="text-align:left; width:"530px; background:#DEDEDE;">
          <p>Hier Text linksbündig aber DIV innen zentriert zu DIV aussen ... </p>
       </div>
    </div>
    Du hast dich hier verschrieben:
    style="text-align:left; width:"530px; background:#DEDEDE;"
    Da ist ein " zu viel drin (vor 530px).
  5. Autor dieses Themas

    tauli

    tauli hat kostenlosen Webspace.

    Danke @fatfreddy

    werde es mal mit margin 0 auto ausprobieren

    EDIT: juhu ...das klappt so, Danke ... verstehe zwar die Logik nicht, aber hauptsache funzt.

    Danke @hackyourlife

    ja, Tippfehler ... muss natürlich raus das eine " .. also so

    <div id="innen" style="text-align:left; width:530px; background:#DEDEDE;">

    kommt daher, weil ich es vorher in der ur-alt Variante hatte,

    <div id="innen" align="left" width="530">

    hab nur einen ur-alt HTML Editor ;)
  6. tauli schrieb:
    ... verstehe zwar die Logik nicht, aber hauptsache funzt.

    Die Logik ist simpel

    Die Null steht für den Abstand oben UND unten
    Das auto sagt, daß rechts und links ein ausgeglichener Abstand gewünscht ist.

    Das ist nur eine Kurzschreibweise für: "margin: 0 auto 0 auto;"

  7. sironia-helper

    sironia-helper hat kostenlosen Webspace.

    geht das denn auch wenn man nur margin:0px; rein schreibt...beim hauptdiv sollte das gehen..XD
  8. sironia-helper schrieb:
    geht das denn auch wenn man nur margin:0px; rein schreibt...beim hauptdiv sollte das gehen..XD

    Warum sollte das gehen? 0px ist eine eindeutige Anweisung. Da wird nichts ausgeglichen wie bei "auto" .

  9. margin: 0 auto; ist sozugan der zentrier Hack.

    Mit margin definiert man ja die Abstände zum gewählten rand (-top: -left usw.).
    Gibt man nur margin: ein definiert die position des wertes den abstand zu festgelegten rändern:

    Bsp: margin: 5px 10px 5px 10px;

    Bedeutet: 5pixel von oben, 10pixel von rechts, 5pixel von unten, 10pixel von links.

    Der befehl margin: 0 auto; beschreibt dabei keinen abstand von oben und alle restlichen abstände automatisch... bedeutet zwischen links und zechts zentriert.

    Somit kannst du jeden Container zentriert ausrichten.
  10. samed schrieb:
    margin: 0 auto; ist sozugan der zentrier Hack.

    Wieso Hack?

    Die Eigenschaft auto ist im CSS Standard als gültige Eigenschaft für das Attribut margin definiert. Ein Hack ist was anderes. :wink:

    Beitrag zuletzt geändert: 15.1.2012 2:31:44 von fatfreddy
  11. das weisst du geauso wie ich, entschuldige wenn ich mich da falsch ausgedrückt habe... sollte nur die kraft des Befehls ausdrücken.

    Natürlich ist es nur eine Eigenschaft für ein Attribut.

    Beitrag zuletzt geändert: 15.1.2012 2:38:38 von samed
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!