Entwickler-Ecke
Beschreibungssprachen - 2 Divs nebeneinander
Heiko - Sa 26.05.07 15:21
Titel: 2 Divs nebeneinander
Hallo,
da ich weiß, dass HTML-Tabellen inzwischen teilweise unbeliebt sind, habe ich jetzte versucht alles auf Divs umzustellen. Mein erster Versuch (mit table-row, table-cell etc.) schlug fehl, da der IE diese Eigenschaften nicht unterstützt (hat alles untereinander gemacht statt nebeneinander, wie es FF und Opera gemacht haben). Nun suche ich nach einer Möglichkeiten, es mit den Standard-CSS-Werten zu machen. Dazu muss ich es aber hinbekommen, dass 2 Divs nebeneinander sind - und daran scheitere ich momentan :(.
Mein bisheriger Versuch:
Quelltext
1:
2:
| <div style="width: 200Px; height: 10Px; background-color: red; display:inline"></div>
<div style="width: 200Px; height: 10Px; background-color: green; display:inline"></div> |
Ergebnis: Man sieht nichts. Wenn ich displayblock lasse, sieht man die beiden Divs so wie ich es will, aber eben nicht nebeneinander sondern übereinander.
Weiß einer von euch wie man so eine Art von Tabelle auch unterm IE hinbekommt (mit Divs)? Ansonstenb muss ich wieder auf Tabellen umsteigen...
Heiko - So 27.05.07 11:59
Das kann ich leider nicht, denn sobald 3 Zellen mit relativen Breiten drin sind, geht es mit margin nimmer :(.
Ich glaube, ich war gestern schon zu verzeifelt um auch noch google dahingehend zu fragen :evil: . Mache ich sonst (meistens) auch, aber bei Verzweiflungen vergesse ich das manchmal... ;).
Mgm, an float hatte ich schon gar nicht mehr gedacht, denn float hatte mir erst einmal das ganze Design zerhackt gehabt bei der Fehlerasuche davor (beovr ich gelsen hatte, dass der Fehler daran lag, dass der IE nicht alles unterstützte was ich brauchte...).
GTA-Place - So 27.05.07 13:11
Float habe ich ja bereits in ICQ am 24.05.2007 um 15:25 Uhr erwähnt :-|.
Heiko - So 27.05.07 13:46
 GTA-Place hat folgendes geschrieben: |
| Float habe ich ja bereits in ICQ am 24.05.2007 um 15:25 Uhr erwähnt :-|. |
Jupp, aber da ich davor schon ewig mit Float bezüglich CSS-Tabellen rumprobiert hatte, habe ichs dann scheinbar doch nicht gemacht ;).
Heiko - So 10.06.07 14:38
So,
durch das auseinandernehmen von WBB3 (RC4) bin ich jetzte auf eine funktionierende Variante gestoßen, die ohne viel Aufwand funktioniert. Und das auch bei allen Browser :).
Quelltext
1:
2:
| <div style="width: 200Px; height: 20Px; background-color: #FF0000; float: left; clear: none"></div>
<div style="width: 200Px; height: 20Px; background-color: #00FF00; float: left; clear: none"></div> |
Grüße
Heiko
Christian V. - Mo 11.06.07 19:37
| Zitat: |
| Und das auch bei allen Browser :). |
Gut dass das so ist!
Du musst allerdings vorsichtig mit CSS umgehen, da der IE da eine eigene Darstellungsstrategie verfolgt.(IE 6/7)
Firefox und Opera stellen es fast immer wie gewollt dar.
Heiko - Mo 11.06.07 19:46
Ne, tun sie auch nicht ;). Ich bin jetzte wieder auf Tabellen umgestiegen, denn Divs bekomme ich nicht ganz so hin, wie ich will (wenn float drin ist, funktioniert height mit % nimmer...).
Silas - Mo 11.06.07 20:15
Hast du's schon mal mit position:absolute; bzw. position:relative; probiert? (Oder hab ich irgentwas falsch verstanden?)
Coder - Mo 11.06.07 20:29
Wenn man Inhalt in Spalten darstellen will, benutzt man ja allgemein Tabellen.
Was willst du den eigentlich machen?
Heiko - Mo 11.06.07 20:30
Positionieren tut er ja richtig. Aber wenn ich z.B. folgenden Aufbau habe:
Quelltext
1:
2:
3:
| div: div <----header -div----> div
div: div <----content-div----> div
div: div <----statusb-div----> div |
Und nicht weiß, wie groß der Inhalt wird (Content-Div), dann zeichnet er links und rechts von Contentbereich die Divs mit den Randgrafiken nicht. Und das setzten von 100% hilft da auch nicht.
@Coder: Das drumherum, also das allgemeine Seitenlayout. Dass ich nicht überall Divs nehmen kann, ist mir klar. Aber momentan verhält es sich so, dass ich nirgends Divs einbauen kann, da irgendetwas immer nicht funzt...
Ghostwalker - So 17.06.07 09:05
Wie wärs mit span statt div. Soweit ich weiß, veranstaltet span keinen Zeilenumbruch :)
Heiko - Mi 08.08.07 14:59
Das ändert nichts daran. Das Problem ist, dass er sich nicht dem übergeordneten Div anpasst.
Einfaches Problem, woran es scheitert:
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
| <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>blubb</title>
</head>
<body>
<div>
<div style="background-color: #F00; width: 50Px; float: left; clear: none; height: 100%">test</div>
<div style="background-color: #0F0; width: 50Px; float: left; clear: none; height: 100%">testtest2</div>
</div>
</body>
</html> |
Das rote Div sollte ja genausogroß sein wie das grüne div, was aber nicht der Fall ist. Und das liegt am Div - daran scheitert das ganze aber leider.
Danniolo - Mi 08.08.07 15:27
Hm ich weiß nicht, inwiefern es direkt für dein Problem hilfreich ist, aber schau dir doch mal
http://www.yaml.de/de/dokumentation/grundlagen/allgemeines.html.
Zum einen hat es dort 3 divs nebeneinander, zwei davon (etwa) gleich breit. Zum anderen ist auch das, was da beschrieben ist ganz interessant.
Ich hoffe mal, dass dir das hilft :mrgreen:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!