Box in Box zentrieren

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Box in Box zentrieren

    Hallo mal wieder,

    eventuell kommt ja jemand von euch darauf, warum <p> im div mit der id "text" nicht zentriert wird. Mit text-align:center könnte ich die Box zentrieren, warum auch immer das geht, ich würde ja erwarten er zentriert dann den INHALT der Box und nicht die Box selber, so zentriert er beides, Box und Inhalt. Der Inhalt von <p> soll allerdings nicht zentriert werden. Den Weg über margin will er nicht nicht nehmen. Am padding von text scheint es auch nicht zu liegen, wie auch nicht am floating.

    Die Zentrierung muss in <p> definiert werden, die divs mit ID sollten nicht verändert werden.

    Vermutlich ist es mal wieder so simpel, dass ich die Lösung andauernd übesehe.

    PHP-Code:
    <html>
    <
    head>

    <
    style type="text/css">
    <!--
    div{border-style:dashed;}
    div#content
    {
       
    margin:0px auto;
       
    width:780px;  
    }
    div#navbar
    {
       
    padding-left:10px;
       
    float:left;
       
    width:120px;
    }
    div#text
    {
       
    padding-right:10px;
       
    padding-bottom:10px;
       
    float:right;
       
    width:630px;
    }
    -->
    </
    style>
    </
    head>
    <
    body>
    <
    div id="content">
    <
    div id="navbar">Link 1</div>
    <
    div id="text">

    <
    p style="width:450px; margin:0px auto;">
    <
    form name="eMail-Form" action="index.php?send=1" method="post">
    <
    input type="text" name="input_email" value="" size="32" maxlength="100">
    <
    input type="submit" name="" value=""><br />
    <
    textarea name="input_text" cols="52" rows="10"></textarea>
    </
    form>
    </
    p>

    </
    div>
    </
    div>

    </
    body>
    </
    html
    Erst meckern, dann helfen!

  • #2
    Der Inhalt von <p> soll allerdings nicht zentriert werden
    Und was willst du wirklich?
    Die Zentrierung muss in <p> definiert werden
    Und wenn du beim p den text-align wieder mit left überschreibst?
    Zuletzt geändert von jahlives; 09.10.2007, 10:26.
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar


    • #3
      Original geschrieben von jahlives
      Und was willst du wirklich?
      Steht doch da oben. Ich will <p> in der Box <div id="text"> zentrieren, nicht jedoch den Inhalt von <p>.
      Erst meckern, dann helfen!

      Kommentar


      • #4
        Ich will <p> in der Box <div id="text"> zentrieren, nicht jedoch den Inhalt von <p>.
        Tja dann musst du dem p eine width geben und mittels margin-left margin-right:auto einmitten. Das betrifft dann den Text von p nicht.
        Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

        [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
        Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

        Kommentar


        • #5
          Im Quelltest oben hatte ich

          <p style="width:450px; margin:0px auto;">

          geschrieben. Sollte das nicht eigentlich genau das machen? (Was, wie oben steht, keine Wirkung hat)

          Wo ist der Unterschied, wenn ich left und right nun seperat definiere?
          Erst meckern, dann helfen!

          Kommentar


          • #6
            Ich vermute mal es funzt nicht weil das Elternelement text gefloated ist und sich damit nicht im Textfluss befindet. Nun musst du imho die margin left und right mittels absoluter Grössenangabe vorgeben. Du kennst ja die Breite des Elternelements und die Breite des Kindelements (p). Daraus kannst du mit etwas Mathe sicher was berechnen.
            Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

            [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
            Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

            Kommentar


            • #7
              Steht doch alles im Quelltext. Oo

              Es ist float:right.

              Mathe...verdammt, ich hatte gehofft das nach Schule und Ausbildung nie wieder zu brauchen.

              Na mal sehen.
              Erst meckern, dann helfen!

              Kommentar

              Lädt...
              X