tutorials.de Buch-Aktion 05/2012
Like Tree2Danke
  • 1 Beitrag von Neurodeamon
  • 1 Beitrag von para_noid
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
1933
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 16.11.11 20:12 #1
    Pojan Pojan ist offline Grünschnabel
    Registriert seit
    Nov 2011
    Beiträge
    2
    Hallo Forum!

    Ich habe ein Problem damit, div-Container nebeneinander anzuordnen.
    Grundsätzlich besteht die Seite aus 4 Containern, einem über- und 3 untergeordneten.
    Die 3 sollen nun nebeneinader stehen, was bei zweien auch klappt.
    Der dritte wird jedoch eine Spalte nach unten versetzt.
    Im Anhang ein Bild des "Problems".
    Nachfolgend mein html-Code:
    Code :
    1
2
3
4
5
6
7
8
9
10

    <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
 
<div id="behold">
 
     <div id="main">Main Container</div>
     <div id="middle">Mitten Container</div>
     <div id="side">Side Container</div>
</div>
 
</body>

    Und so sieht das css-File aus:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    #behold {
width: 1024px;
height: 768px;
background-color: #FF1493;
text-align: center;
}
#main {
width: 250px;
float: left;
background-color: #FF8C00;
}
#middle {
width: 400px;
background-color: #DAA520;
}
#side {
width: 250px;
float: right;
background-color: #DCDCDC;
}
* {
margin: 0px auto;
}

    Schlimm, wenn man schon am Anfang strauchelt.
    Um ehrlich zu sein, weiß ich nicht einmal, ob es ein html- oder ein css-Problem ist.
    Für Hilfe wäre ich dankbar.

    Gruß,
    Pojan
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken div-Container nebeneinander anordnen-clipboard01.jpg  
     
    Zitieren Zitieren
  2. 16.11.11 20:55 #2
    Avatar von Neurodeamon
    Neurodeamon Neurodeamon ist offline
    Registriert seit
    Dec 2001
    Ort
    Hannover
    Beiträge
    4.234
    Probier mal so herum

    HTML-Code:
    <div id="behold">
      <div id="main">Main Container</div>
     <div id="side">Side Container</div>
     <div id="middle">Mitten Container</div>
</div>
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken div-Container nebeneinander anordnen-screen.png  
    Geändert von Neurodeamon (16.11.11 um 21:03 Uhr) Grund: ARGH
    Pojan bedankt sich. 
    Copy for free - Yet another page for free software with soures:
    • BitUnlocker (Automatic unlock multiple Bitlocker secured drives - if you use the same password)
    • W7 ScrollZoom (Use Windows 7 zoom tool through your mouse wheel)
    • AppStarter (Somewhat like PortableApps launcher)
    • QuakeConsole (Show/Hide windows console with your tilde key)
    • BetterFileRenamer (Simple file renamer that adds date and version)
    .... more to come
    Zitieren Zitieren
  3. 16.11.11 21:00 #3
    Avatar von para_noid
    para_noid para_noid ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    144
    Gib allen drei Divs ein
    Code :
    1

    float: left;
    Pojan bedankt sich. 
    Für die Übereinstimmung von Niederschrift und Hirninhalt.
    Zitieren Zitieren
  4. 16.11.11 21:08 #4
    Pojan Pojan ist offline Grünschnabel
    Registriert seit
    Nov 2011
    Beiträge
    2
    Arrgghh....
    Jetzt gehts!
    Vielen Dank!
    Aber Neurodeamon, sei doch bitte noch so nett mir zu erklären, warum das jetzt klappt?
    Ich verstehs nicht!

    Gruß,

    Dejan
    Geändert von Pojan (16.11.11 um 21:45 Uhr)
     
    Zitieren Zitieren
  5. 17.11.11 01:25 #5
    Avatar von Neurodeamon
    Neurodeamon Neurodeamon ist offline
    Registriert seit
    Dec 2001
    Ort
    Hannover
    Beiträge
    4.234
    Hi Pojan,

    floats sind recht schwierig zu benutzen. Es gibt einige Fallen in der Verwendung.

    Ich bin ganz ehrlich: Erklären kann ich es nicht (zumindest glaube ich nicht, das meine Erklärung richtig wäre).

    Das Problem hatte ich auch mal ... schon länger her
     
    Copy for free - Yet another page for free software with soures:
    • BitUnlocker (Automatic unlock multiple Bitlocker secured drives - if you use the same password)
    • W7 ScrollZoom (Use Windows 7 zoom tool through your mouse wheel)
    • AppStarter (Somewhat like PortableApps launcher)
    • QuakeConsole (Show/Hide windows console with your tilde key)
    • BetterFileRenamer (Simple file renamer that adds date and version)
    .... more to come
    Zitieren Zitieren
  6. 18.11.11 14:05 #6
    Avatar von iAmRich
    iAmRich iAmRich ist offline Mitglied Silber
    Registriert seit
    Oct 2010
    Beiträge
    68
    Also, ich würde sagen, es liegt daran, dass divs Blockelemente sind, d.h. du kannst in einer Zeile nur ein div benutzen und alles was in dem html-code NACH dem div kommt, wird in die nächste Zeile verfrachtet...
    Da das nun für einige Strukturen unpraktisch ist, gibt es float, der aus dem div sowas wie ein inline-Element macht, welches es ermöglicht, nachfolgende Elemente in der gleichen Zeile anzeigen zu lassen....

    Schauen wir uns nun mal deinen code an:

    Code :
    1
2
3
4
5

    #main {
width: 250px;
float: left;
background-color: #FF8C00;
}
    Dieses Element lässt es zu, nachfolgende Elemente in der gleichen Zeile anzuzeigen.

    Code :
    1
2
3
4

    #middle {
width: 400px;
background-color: #DAA520;
}
    Dieses Element ist ein Block-Element (da es ein div OHNE float o.Ä. ist) und lässt keine nachfolgenden Elemente in der gleichen Zeile zu.

    Code :
    1
2
3
4
5

    #side {
width: 250px;
float: right;
background-color: #DCDCDC;
}
    Da der Vorgänger von diesem Element ein Block-Element ist, muss es in die nächste Zeile Springen, und richtet sich an der rechten Seite des Fensters (float: rigth; ) aus.

    Anmerkung: Ich würde versuchen, das Ändern der Reihenfolge zu vermeiden, da das später zu Problemen führen könnte ...

    grüße Rich :P
    Geändert von iAmRich (18.11.11 um 14:15 Uhr)
     
    "Sollte ich hier jetzt ein Zitat einer berühmten Persönlichkeit einfügen? Oder sollte ich einfach mal anfangen mir selbst Gedanken zu machen?" - Ich
    Zitieren Zitieren
  7. 18.11.11 21:11 #7
    Avatar von Neurodeamon
    Neurodeamon Neurodeamon ist offline
    Registriert seit
    Dec 2001
    Ort
    Hannover
    Beiträge
    4.234
    @iAmRich:
    Dem würde ich mich anschließen.
    Wenn Pojan aber das eine DIV zentriert darstellen will, dann kenne ich keine andere Lösung.
    Außer natürlich die HTML-Struktur ganz anders anzugehen
     
    Copy for free - Yet another page for free software with soures:
    • BitUnlocker (Automatic unlock multiple Bitlocker secured drives - if you use the same password)
    • W7 ScrollZoom (Use Windows 7 zoom tool through your mouse wheel)
    • AppStarter (Somewhat like PortableApps launcher)
    • QuakeConsole (Show/Hide windows console with your tilde key)
    • BetterFileRenamer (Simple file renamer that adds date and version)
    .... more to come
    Zitieren Zitieren
« Datei vom Google Keyword tool downloaden für KeywordCorral | Problem mit Kontaktformular »

Ähnliche Themen

  1. DIV-Elemente nebeneinander anordnen
    Von brunlorenz im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 23.01.11, 23:09
  2. Bilder nebeneinander anordnen
    Von Tanek im Forum CSS
    Antworten: 1
    Letzter Beitrag: 01.08.10, 04:25
  3. Bilder nebeneinander anordnen
    Von thigle im Forum CSS
    Antworten: 2
    Letzter Beitrag: 20.02.10, 13:30
  4. Block-Elemente nebeneinander anordnen
    Von p-flash im Forum CSS
    Antworten: 5
    Letzter Beitrag: 17.12.06, 16:59
  5. Div's nebeneinander anordnen
    Von chickenwings im Forum CSS
    Antworten: 2
    Letzter Beitrag: 06.08.06, 20:11

Stichworte