Von Tabellen zu divs

jackie1983 · 15.12.2009, 07:55

Servus,

habe bis jetzt meine Webseiten nur mit Tabellen aufgebaut.
Denke wird jetzt aber Zeit auf divs umzusteigen.

Ich verstehe das ganze noch nicht wirklich mit float und position.
Wenn ich diesen Aufbau habe

Code:

|-------------------|
| Div1              |
|-------------------|
|-------------------|
| Div2              |
|-------------------|
|Div3  |  Div4      |
|Div3  |  Div4      |
|Div3  |  Div4      |
|-------------------|
| Div2              |
|-------------------|

und das alles mit float in Position bringe, habe ich einige überlappungen.

Und wie würde man ein Div anlegen welches wie eine Messagebox über die anderen Fenster liegt, egal was dahinter ist?

Mfg

chorn · 15.12.2009, 09:17

Das was du hast ist recht simpel. Zwei DIVs ohne Alles, ordnen sich untereinander an. Zwei DIVs mit float left. Und ein DIV ohne Alles mit clear:both;.

Überlappen kannst du mit einem Element, günstiger Weise direkt im body, das du mit position:absolute und über die Werte top: bzw. left: definierst.

jackie1983 · 15.12.2009, 11:56

Ok, das Problem was ich immer hatte, war das das clear fehlte und deswegen hatte ich immer nur alles da wo es nicht sein sollte

Sieht jetzt so aus, thx

Code:

<div style="float:left; width:100%">
  <div style="background-color:#006600; width:100%">
    Oben
  </div>
  <div style="background-color:#009900; width:100%">
    Oben2
  </div>
</div>

<div style="clear:both">
  <div style="background-color:#CCCCCC; width:100px; float:left">
    Menü
  </div>
  <div style="background-color:#0000FF; width:100%;">
    Text
  </div>
</div>

<div style="background-color:#006600; width:100%">
  Unten
</div>

jackie1983 · 15.12.2009, 12:40

Jetzt habe ich mal eine Tabelle bei Text eingefügt.
Nun habe ich das die Tabelle aus dem div "raushängt"

Code:

<div style="clear:both">
  <div style="background-color:#CCCCCC; width:100px; float:left">
    Menü
  </div>
  <div style="background-color:#0000FF; width:100%;">
    <table width="100%" border="1">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
  </div>
</div>

Was muss ich denn jetzt da ändern?

chorn · 15.12.2009, 15:02

Hi,

die hängt nicht raus. Der "Text" hat die volle Breite des Elternelementes - 100%. Das "Menü" fliesst über den "Text" hinweg - aber nur, so wie es breit und hoch ist. Sobald das fliessende Element sein Ende erreicht hat, geht es ganz normal im Fluss weiter. Wenn du das nicht willst, gib dem "Text" einen Abstand nach links in der Breite des fliessenden Elementes.

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
Mehrer Tabellen aus Datenbank auslesen?	Blade	JavaScript, Ajax und mehr	5	17.11.2009 16:08
gelöst: Datenbankabfrage über 3 Tabellen	lord_icon	Datenbanken	0	12.10.2009 00:38
[Erledigt] Mehrere MySQL Tabellen mit PHP abfragen	DonMuchacho	Datenbanken	7	27.07.2009 19:47
Tabellen miteinander verknüpfen	Suzi	Datenbanken	12	27.05.2009 11:40
in einer abfrage ermitteln ob mehrere tabellen existieren?	litterauspirna	Datenbanken	7	28.10.2008 19:33
ausrichtung von divs in divs geht nur im IE	litterauspirna	HTML, Usability und Barrierefreiheit	5	14.10.2008 14:58
[Erledigt] Limit auf Ergebnissumme mehrerer Tabellen	Frank	Datenbanken	8	02.09.2008 11:33
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Tabellen für Vokabeltrainer anlegen...	anonym01	PHP Tipps 2008	9	03.03.2008 21:18
PHP Array in MYSQL Tabellen schreiben	Matt	Datenbanken	1	26.02.2008 19:43
5 tabellen miteinander verknüpfen.	miwo	Datenbanken	2	22.09.2007 11:17
einträge aus 2 tabellen sortieren	Tschuu	Datenbanken	11	20.12.2005 08:21
[Erledigt] abfrage mehrere tabellen		PHP Tipps 2005-2	3	31.10.2005 21:57
Verschachtelung von DIV's bei unterschiedlichen Auflösungen		HTML, Usability und Barrierefreiheit	8	24.12.2004 14:45
[Erledigt] Selectanfrage an eine Datenbank,aber aus mehreren Tabellen		Datenbanken	2	26.10.2004 07:23

15.12.2009, 07:55
jackie1983 Erfahrener Benutzer Registriert seit: 23.11.2009 Beiträge: 101 PHP-Kenntnisse: Anfänger	Von Tabellen zu divs Servus, habe bis jetzt meine Webseiten nur mit Tabellen aufgebaut. Denke wird jetzt aber Zeit auf divs umzusteigen. Ich verstehe das ganze noch nicht wirklich mit float und position. Wenn ich diesen Aufbau habe Code: \|-------------------\| \| Div1 \| \|-------------------\| \|-------------------\| \| Div2 \| \|-------------------\| \|Div3 \| Div4 \| \|Div3 \| Div4 \| \|Div3 \| Div4 \| \|-------------------\| \| Div2 \| \|-------------------\| und das alles mit float in Position bringe, habe ich einige überlappungen. Und wie würde man ein Div anlegen welches wie eine Messagebox über die anderen Fenster liegt, egal was dahinter ist? Mfg


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

15.12.2009, 09:17
chorn Erfahrener Benutzer Registriert seit: 07.12.2009 Beiträge: 843 PHP-Kenntnisse: Fortgeschritten	Das was du hast ist recht simpel. Zwei DIVs ohne Alles, ordnen sich untereinander an. Zwei DIVs mit float left. Und ein DIV ohne Alles mit clear:both;. Überlappen kannst du mit einem Element, günstiger Weise direkt im body, das du mit position:absolute und über die Werte top: bzw. left: definierst.

15.12.2009, 12:40
jackie1983 Erfahrener Benutzer Registriert seit: 23.11.2009 Beiträge: 101 PHP-Kenntnisse: Anfänger	Jetzt habe ich mal eine Tabelle bei Text eingefügt. Nun habe ich das die Tabelle aus dem div "raushängt" Code: <div style="clear:both"> <div style="background-color:#CCCCCC; width:100px; float:left"> Menü </div> <div style="background-color:#0000FF; width:100%;"> <table width="100%" border="1"> <tr> <td> </td> <td> </td> </tr> </table> </div> </div> Was muss ich denn jetzt da ändern?

15.12.2009, 15:02
chorn Erfahrener Benutzer Registriert seit: 07.12.2009 Beiträge: 843 PHP-Kenntnisse: Fortgeschritten	Hi, die hängt nicht raus. Der "Text" hat die volle Breite des Elternelementes - 100%. Das "Menü" fliesst über den "Text" hinweg - aber nur, so wie es breit und hoch ist. Sobald das fliessende Element sein Ende erreicht hat, geht es ganz normal im Fluss weiter. Wenn du das nicht willst, gib dem "Text" einen Abstand nach links in der Breite des fliessenden Elementes.