Div Container nebeneinander anordnen

tomtaz · 03.06.2008, 23:25

Hallo Community,

ich hab da ein Problem, mit dem ich mich schon seit etwa 9 Uhr beschäftige, bekomme es aber nicht hin, egal was ich versuche.

Es handelt sich um 2 Div Container, die nebeneinander eingesetzt werden sollen.

Funktioniert soweit auch (mittels float:left

jedoch sobalt noch ein Div Container kommt, sprengt es mir alles, was mir lieb ist.

Vielleicht hat da von euch jemand ne Ahnung.

Aufgebaut soll das dann folgendermaßen aussehen:
[Details][Cover]
[Wochenwertung]

Der, meiner meinung nach, relevante Code:

Code:

        <div class="box">
					<div class="box_header_colored">Details</div>
          <div class="box_content_colored" style="background:#6699CC;">
          	<div class="table">
            	<div class="tr">
              	<div class="td"><span class="small">Einstieg:</span></div>
                <div class="td"><span class="small">Woche 19/08 (09.05.2008)</span></div>
              </div>
            	<div class="tr">
              	<div class="td"><span class="small">Letzte Klassierung:</span></div>
                <div class="td"><span class="small">Woche 22/08 (30.05.2008)</span></div>
              </div>
            	<div class="tr">
              	<div class="td"><span class="small">Alltime - Punkte:</span></div>
                <div class="td"><span class="small">49</span></div>
              </div>
            	<div class="tr">
              	<div class="td"><span class="small">Alltime-Wochen:</span></div>
                <div class="td"><span class="small">4</span></div>
              </div>
            	<div class="tr">
              	<div class="td"><span class="small">Rang in der Alltime-Liste:</span></div>
                <div class="td"><span class="small">336</span></div>
              </div>
            </div>
            <span class="small">Diese Single in den Austria Singlecharts nachschlagen</span>
          </div>
        </div>
        <div class="box">
					<div class="box_header_colored">Cover</div>
          <div class="box_content_colored" style="background:#6699CC;">
          	<div align="center"></div>
            <div style="text-align:center;">
            	
              
              
              
            </div>
          </div>
        </div>
        <div class="placeholder"></div>
        <div class="box">
					<div class="box_header_colored">Wochenwertung</div>
          <div class="box_content_colored" style="background:#6699CC;">
 
          Some Text
          </div>
        </div>

Css:

Code:

.box_header, 
.box_header_colored {
	text-align : center;
	color : #FFFFFF;
	background-image : url(./../images/table_top.png);
	background-repeat : repeat-x;
	font-size : 16px;
}

.box_content,
.box_content_colored {
	padding : 5px 5px 5px 5px;
}

.table {
	display : table;
}

.tr {
	display : table-row;
}

.td {
	display : table-cell;
  vertical-align : top;
	padding : 1px 1px 1px 1px;
}

.hover:hover {
	background-color : #333366;
}

Ich hab hier wie gesagt schon sehr lange herumexperimentiert, mit floats, clear etc. Jedesmal kam ich nicht zum gewünschten Ergebnis.

Online kann man sich das hier ansehen:
http://charts-arena.de/beta/design/

Ps.: Hab die floats rausgenommen, weil ich es nicht hinbekommen habe

Danke für eure Hilfe!

04.06.2008, 07:06

Zitat:

(mittels float:left

In dem Beispiel sehe ich jetzt aber kein float

Eventuell mal mit eine Breite angeben.

Zergling-new · 04.06.2008, 08:21

http://www.yaml.de/

tomtaz · 04.06.2008, 11:45

Zitat:

In dem Beispiel sehe ich jetzt aber kein float

Eventuell mal mit eine Breite angeben.

Ja, hatte ich entfernt gehabt.

Zitat:

http://www.yaml.de/

Hatte leider nicht ganz das getroffen was ich wollte, aber droztdem gute Seite danke.

Ich hab das jetzt gelöst, zumindest für den FF3 und Opera, IE Jedoch positioniert das weiterhin unten dran, wieso eigentlich nicht gleich so. Also, das erste Element (Details) wurde gefloatet, und im Cover habe ich einfach overflow:hidden eingefügt, Breiten angegeben, und schong ging es.

Was muss ich jetzt machen, damit das im IE auch richtig positioniert wird? Ignoriert der IE auch overflow hidden? Mhmm
Danke für eure hilfe.

Ansehen kann man es hier:
http://charts-arena.de/beta/design/neu.html

robo47 · 04.06.2008, 11:49

Nur mal so, warum bitte bastelst du eine Tabelle mit DIVs nach ? Das macht 0 Sinn, Tabellen sind heutzutage nicht verboten, solange sie Sinn machen/ sie semantisch korrekt verwendet werden.
Allgemein ist das was du da produzierst eine einzige DIV-Suppe.

Mit divs zu arbeiten heißt nicht einfach eine Million DIVs zusammenklatschen.

Im Übrigen wozu hier noch einen unnötigen span:

Code:

<div class="td"><span class="small">

wenn du bei DIVs bleibst:

Code:

<div class="td small">

ansonsten halt direkt der td:

Code:

<td class="small">

Wenn dein Verlangen eine Umsetzung mit DIVs anstatt Tabellen ist, solltest du dich noch etwas mehr mit der Theorie dazu beschäftigen, weil aktuell ist der Quelltext wirklich schlimm und verdammt viel Kram ist einfach nur unnötig.

mfg
robo47

tomtaz · 04.06.2008, 11:56

Hallo robo47,

vielen Dank für dein Statment.
Der Grund für die Div Tabelle ist der, weil ich gelesen habe, dass Tabellen in Suchmaschinen nicht richtig durchforstet werden. Weiters hab ich im Internet gelesen, dass Tabellen nicht mehr verwendet werden soll.

Wenn ich dich richtig verstanden habe, kann ich da ohne weitere Bedenken haben zu müssen, Tabellen verwenden? Im Prinzip ist es ja eine Tabellarische Anordnung.

Vielen Dank

robo47 · 04.06.2008, 12:09

Zitat:

Der Grund für die Div Tabelle ist der, weil ich gelesen habe, dass Tabellen in Suchmaschinen nicht richtig durchforstet werden.
Weiters hab ich im Internet gelesen, dass Tabellen nicht mehr verwendet werden soll.

Stimmt so nicht.
Es geht darum dass man Tabellen nicht für das ganze Layout verwenden soll, sondern sie dort zu verwenden, wo sie angebracht (semantisch korrekt) sind, eben bei tabellarischen Daten.

tomtaz · 04.06.2008, 12:16

Zitat:

Es geht darum dass man Tabellen nicht für das ganze Layout verwenden soll, sondern sie dort zu verwenden, wo sie angebracht (semantisch korrekt) sind, eben bei tabellarischen Daten.

Also vielen dank für die Berichtigung. Werd das umsetzen, denn mit Tabellen zu Arbeiten fällt mir eh leichter von der Hand

Danke noch mals

Aber was machen wir jetzt mit dem IE Problem?

rbs_phoenix · 04.06.2008, 12:30

und was ist hiermit?? (Das mein ich, dass man 2 verschiedene Meinungen hat^^)

http://www.phpfriend.de/forum/ftopic64083.html

tomtaz · 04.06.2008, 12:33

Zitat:

Zitat von rbs_phoenix

und was ist hiermit?? (Das mein ich, dass man 2 verschiedene Meinungen hat^^)

http://www.phpfriend.de/forum/ftopic64083.html

Da geht es doch um ein Layout oder nicht?

Hier geht es um Tabelarische Daten, das Layout an sich ist mit Css gemacht (also div)...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] CSS: Elemente nebeneinander anordnen		HTML, Usability und Barrierefreiheit	21	29.08.2011 08:05
DIV anordnen	stefan a	HTML, Usability und Barrierefreiheit	6	24.04.2008 08:28
[CSS] Container in Container	Igäl	HTML, Usability und Barrierefreiheit	5	04.09.2007 11:29
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
IE6: Container mit Float dabei wird margin doppelt gewertet	DonTermi	HTML, Usability und Barrierefreiheit	1	11.01.2007 09:02
Problem mit Container	max-dhom	HTML, Usability und Barrierefreiheit	3	20.09.2006 11:10
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18
block elemente nebeneinander		HTML, Usability und Barrierefreiheit	2	30.07.2005 12:12
Tabellen Inhalt nebeneinander auslesen ?		PHP Tipps 2005-2	6	01.07.2005 14:21
Daten auslesen und nebeneinander wiedergeben		PHP Tipps 2005-2	4	28.06.2005 13:44
&lt;div&gt;- container vertikal auf seite zentrieren		HTML, Usability und Barrierefreiheit	3	08.05.2005 11:16
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
container mit tabelle rechts aufklappen		HTML, Usability und Barrierefreiheit	10	01.04.2005 12:25
[Erledigt] 2 divs nebeneinander		HTML, Usability und Barrierefreiheit	8	12.01.2005 17:27
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.06.2008, 08:21
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	http://www.yaml.de/

04.06.2008, 11:49
robo47 Moderator Registriert seit: 03.09.2004 Beiträge: 11.792 PHP-Kenntnisse: Fortgeschritten	Nur mal so, warum bitte bastelst du eine Tabelle mit DIVs nach ? Das macht 0 Sinn, Tabellen sind heutzutage nicht verboten, solange sie Sinn machen/ sie semantisch korrekt verwendet werden. Allgemein ist das was du da produzierst eine einzige DIV-Suppe. Mit divs zu arbeiten heißt nicht einfach eine Million DIVs zusammenklatschen. Im Übrigen wozu hier noch einen unnötigen span: Code: <div class="td"><span class="small"> wenn du bei DIVs bleibst: Code: <div class="td small"> ansonsten halt direkt der td: Code: <td class="small"> Wenn dein Verlangen eine Umsetzung mit DIVs anstatt Tabellen ist, solltest du dich noch etwas mehr mit der Theorie dazu beschäftigen, weil aktuell ist der Quelltext wirklich schlimm und verdammt viel Kram ist einfach nur unnötig. mfg robo47 __________________ robo47.net - Blog, Codeschnipsel und mehr \| Caching-Klassen und Opcode Caches in php \| Robo47 Components - PHP Library extending Zend Framework

04.06.2008, 11:56
tomtaz Erfahrener Benutzer Registriert seit: 17.06.2008 Beiträge: 1.762 PHP-Kenntnisse: Fortgeschritten	Hallo robo47, vielen Dank für dein Statment. Der Grund für die Div Tabelle ist der, weil ich gelesen habe, dass Tabellen in Suchmaschinen nicht richtig durchforstet werden. Weiters hab ich im Internet gelesen, dass Tabellen nicht mehr verwendet werden soll. Wenn ich dich richtig verstanden habe, kann ich da ohne weitere Bedenken haben zu müssen, Tabellen verwenden? Im Prinzip ist es ja eine Tabellarische Anordnung. Vielen Dank __________________ Mfg Tomtaz "Es soll jetzt diese Erfindung geben.... Kugel oder so heißt die. Ist so eine Art Suchmaschine..."

04.06.2008, 12:30
rbs_phoenix Erfahrener Benutzer Registriert seit: 03.11.2004 Beiträge: 289	und was ist hiermit?? (Das mein ich, dass man 2 verschiedene Meinungen hat^^) http://www.phpfriend.de/forum/ftopic64083.html __________________ Homepage: http://www.rbs-page.de