tehhtml: DIV Container & Float

SELF-Forum

DIV Container & Float

tehhtml
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe 3 Div Container (Boxen) in einem "wrapper", welche nebeinander stehen.
Jetzt muss ich die Reihenfolge (ist so vorgegeben) der Boxen mittels der "Float" eigenschaft in CSS ändern.

Ich habe Box 1, Box 2, Box 3.
Folgende Reihenfolge sollte dabei entstehen: Box 3, Box 2, Box 1.
Wollte die Boxen einfach umbenennen, ist jedoch nicht ganz sinvoll

Bitte um Hilfe.

Mfg
TehHTML

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. DIV Container & Float

    Matze
    – Informationen zu den Bewertungsregeln

    Hallo!

    Bitte um Hilfe.

    Was hast du bei http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float nicht verstanden?
    Was hast du bis jetzt versucht? Wie sieht dein Quellcode aus?

    Grüße, Matze

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. DIV Container & Float

      tehhtml
      – Informationen zu den Bewertungsregeln 
        
  
 #Box3  
        {  
            float: left;  
            background-color: #DD02ED;  
            width: 200px;  
            height: 100px;  
        }  
  
  
  
             #Box2  
        {  
            float: right;  
            background-color: #990000;  
            width: 200px;  
            height: 100px;  
            /*padding: 10px;*/  
        }  
  
  
             #Box1  
        {  
            float: right;  
            background-color: #1100AA;  
            width: 200px;  
            height: 100px;  
        }

      Sie stehen zwar in der richtigen Reihenfolge, jedoch ist Box 3 ganz links, und Box 2 & 1 ganz außen.. Mich interessiert eigentlich wie ich den leerraum dazwischen wegkriege, so dass sie im selben abstand auf der linken Seite nebeineinander stehen..

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. DIV Container & Float

        Matze
        – Informationen zu den Bewertungsregeln

        Hallo!

        Mich interessiert eigentlich wie ich den leerraum dazwischen wegkriege, so dass sie im selben abstand auf der linken Seite nebeineinander stehen..

        Lass sie nicht floaten.

        Grüße, Matze

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. DIV Container & Float

          tehhtml
          – Informationen zu den Bewertungsregeln

          Hallo!

          Mich interessiert eigentlich wie ich den leerraum dazwischen wegkriege, so dass sie im selben abstand auf der linken Seite nebeineinander stehen..

          Lass sie nicht floaten.

          Grüße, Matze

          Genau das ist es ja, ich muss Sie mittels float in diese Reihenfolge bringen..

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. DIV Container & Float

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Om nah hoo pez nyeetz, tehhtml!

            Tofu und seine Spielarten sind hier unerwünscht.

            Genau das ist es ja, ich muss Sie mittels float in diese Reihenfolge bringen.

            Ausdrücklich erwünscht ist hingegen die aktive Mitarbeit des Fragenden.

            Matthias

            --
            1/z ist kein Blatt Papier.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. DIV Container & Float

              tehhtml
              – Informationen zu den Bewertungsregeln

              Om nah hoo pez nyeetz, tehhtml!

              Tofu und seine Spielarten sind hier unerwünscht.

              Genau das ist es ja, ich muss Sie mittels float in diese Reihenfolge bringen.

              Ausdrücklich erwünscht ist hingegen die aktive Mitarbeit des Fragenden.

              Matthias

              Ich bin schon seit ein paar Stunden damit beschäftigt, versuche noch immer es zu begreifen, bin aber totaler Anfänger. Was ich nicht verstehe ist, wie man die 3 Boxen in den "wrapper" bekommt..

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. DIV Container & Float

                Matthias Apsel Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Om nah hoo pez nyeetz, tehhtml!

                Tofu und seine Spielarten sind hier unerwünscht.

                Du möchtest bitte Vollzitate unterlassen. (TOFU)

                Ich bin schon seit ein paar Stunden damit beschäftigt, versuche noch immer es zu begreifen, bin aber totaler Anfänger. Was ich nicht verstehe ist, wie man die 3 Boxen in den "wrapper" bekommt..

                Dein Problem ist also nicht mehr die Reihenfolge sondern der scheinbar fehlende wrapper? Der Artikel Grundlagen für Spaltenlayout mit CSS insbesondere der Abschnitt Einschließen von float-Boxen sollte Lösungen deines Problems aufzeigen.

                Interessant ist zudem noch die Eigenschaft clear.

                Matthias

                --
                1/z ist kein Blatt Papier.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. DIV Container & Float

                  tehhtml
                  – Informationen zu den Bewertungsregeln

                  Dein Problem ist also nicht mehr die Reihenfolge sondern der scheinbar fehlende wrapper?
                  Matthias

                  Problem selbst gelöst.
                  Nach einem kleinem Spaziergang geht alles viel einfacher :)

                  Hier der Code:

                    
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Das Boxenmodell</title>  
    <style type="text/css">  
        * { color: #FFFFFF; margin: 10px;}  
  
         #wrapper {margin: 12 auto;  
                   border: 5px double red;  
                   height: auto;  
                   width: 660px;}  
  
  
  
             #Box1  
        {  
             float: right;  
            background-color: #1100AA;  
            width: 200px;  
            height: 100px;  
        }  
  
  
                #Box2  
        {  
             float: left;  
            background-color: #990000;  
            width: 200px;  
            height: 100px;  
        }  
  
  
  
              #Box3  
        {  
  
            background-color: #DD02ED;  
            width: 200px;  
            height: 100px;  
        }  
  
  
  
  
  
  
  
  
  
  
  
    </style>  
</head>  
<body>  
    <div id = "wrapper">  
  
    <div id = "Box1">Box1</div>  
  
    <div id = "Box2">Box2</div>  
  
    <div id = "Box3">Box3</div>  
  
    </div>  
  
  
  
</body>  
</html>
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. DIV Container & Float

                    Matthias Apsel Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    Om nah hoo pez nyeetz, tehhtml!

                    [code lang=html]
                    <html xmlns="http://www.w3.org/1999/xhtml">

                    Du solltest einen doctype und eine Zeichenkodierung angeben.

                    #wrapper {margin: 12 auto;

                    Da fehlt eine Einheit.

                    Matthias

                    --
                    1/z ist kein Blatt Papier.

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

  2. DIV Container & Float

    bubble
    – Informationen zu den Bewertungsregeln

    Bitte um Hilfe.

    Sicher? Klingt eher als bittest du um eine Lösung.

    float kann folgende 3 Werte annehmen: none, right & left.

    none kann man schon mal getrost ignorieren, bleiben also nur noch 2 Werte übrig, bei 3 Elementen macht das insgesamt 8 verschiedene Kombinationsmöglichkeiten, da deine divs aber schon nebeneinander sind fällt eine Variante weg. Macht insgesammt 7.

    Am naheliegensten wäre es wohl als erstes den jeweils "anderen" float-Wert als erstes auszuprobieren. Sprich aus den float: right; werden float: left; und anders herum.

    MfG
    bubble

    --
    If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. DIV Container & Float

      Siri
      +1 Informationen zu den Bewertungsregeln

      Hallo,

      ich wollte dich bei der Gelegenheit mal wieder an das Motto des Forums erinnern:

      "Die Energie des Verstehens"

      Viele Grüße
      Siri ;-)

      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

  3. DIV Container & Float

    Siri
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich habe 3 Div Container (Boxen) in einem "wrapper", welche nebeinander stehen.
    Jetzt muss ich die Reihenfolge (ist so vorgegeben) der Boxen mittels der "Float" eigenschaft in CSS ändern.

    Das ist kein Hasuaufgabenforum. Jetzt schaust du dir mal die eigenschaften von http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float an und sagst, was du verstanden hast und was nicht.

    Viele Grüße
    Siri

    PS: http://de.selfhtml.org/navigation/syntax.htm@title=Hier ist ein furchtbar praktisches Syntaxverzeichnis.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln