Hi!

Hier wird ja eine ganze Menge mit über CSS und tabellenloses Layout geredet.

Ich bekomme es aber nicht so richtig hin. Das definieren der Tabellen macht mir Probleme.

Wäre nett wenn mal jemand ein Beispiel zusammenstellen könnte wo eine echte Tabelle auch mal einen Bezug zu einer DIV-basierenden Ausgabe hat. Bei SELFhtml hab ich schon geschaut.
Aber nichts richtiges zur Positionierung gefunden.

Hier mal eine Standartabelle.

Zeile1:
Breite von 200 Höhe von 150
Spalte_1 ist 80 Breit und Spalte_2 120

Zeile2:
Breite von 200 Höhe von 80
Spalte_1 ist 80 Breit und Spalte_2 120

Zeile3:
Breite wie Zeile1 (Spalte_1 ist 80 Breit und Spalte_2 120)
Höhe soll sich aber den Dokumenten in der Zelle anpassen.

Wie schaut das mit DIVs aus.

Ich kan die Zellen zwar absolut Positionieren. Wie mach ich aber das Zelle 3 rechts von Zelle 2 ist und das Zelle 4 unter Zelle 1 ist.

zur Zeit will ich gar nicht wissen wie es mit dem Überlagern der Ebenen funktioniert.
Das richtige aneinanderreien der Zellen würde mir schon reichen.

MfG

Dexter

Float ist (u.A.) Dein Freund:
http://www.css4you.de/float.html

Gutes (imho

) Anwendungsbeispiel kannst Du hier anschauen:
http://plugins.gulli.com/~mozilla/
Dort ist der Layer mit der Grafik via float:left auf der linken Seite (linke Zelle), daneben "rechte Zelle", die den Layer "umfliesst.
clear:both "wechselt" dann wieder in die nächste Zeile.

Ich hoffe, dass das etwa das ist, was Du wissen wolltest.

MiH

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body{
	background: #fff;
	margin: 0;
	padding: 0;
}

#wrapper{
	margin: 20px auto 20px auto;
}

.row1, .row2{
	width: 200px;
	height: 150px;
	clear: both;
	background: #1c2;
}

.row2{
	height: 80px;
}

div.col1{
	width: 80px;
	float: left;
	background: #cc1;
}

div.col2{
	width: 120px;
	background: #c12;
	float: right;
}

</style>
</head>
<body>
<div id="wrapper">
	<div class="row1">
		<div class="col1">Spalte1</div>
		<div class="col2">Spalte2</div>
	</div>

	<div class="row2">
		<div class="col1">Spalte1</div>
		<div class="col2">Spalte2</div>
	</div>
	<div class="row1">
		<div class="col1">Spalte1</div>
		<div class="col2">Spalte2</div>
	</div>

</div>
</body>
</html>

sieht aber irgendwie sehr klein aus

hondocrx

Danke!!!

langsam wird es was.

Zitat:

sieht aber irgendwie sehr klein aus

Ist doch nur zum Verstehen gedacht.

MfG

hondocrx

nochmal ich!

Ich möchte ein zwei Element(feld_01/02) in einem DIV(Z3S3) frei positionieren.

#feld_01{position:absolute;background:#00FF00; top:275px; left:240px; width:200px; height:25px;}
#feld_02{position:absolute;background:#00FF00; top:100px; left:100px; width:210px; height:25px;}

Z3S3 {width: 450px;height: 400px;background-color: #FFFFE8; border:1px solid #000000;}

Aufruf:

<div class='Z3S3'>";
<div id='feld_01'>box1</div> ";
<div id='feld_02'>box2</div> ";
</div>";

Leider wird das nicht richtig dargestellt.
Wenn in der definition position:absolute; steht werden dei Elemente oben links im Fenster ausgerichtet udn nicht in dem DIV angezeigt.

Wenn ich das position:absolute; weglasse werden die Elemente in dem DIV angezeigt. Dan aber nicht an der richtigen position sondern direkt untereinander.

Wie kann ich die Elemente in dem Eltern-DIV ausrichten?

MfG

Dexter

Zitat:

Original geschrieben von hondocrx
Wie kann ich die Elemente in dem Eltern-DIV ausrichten?

relative?

hondocrx

Nö. geht auch nicht.

Werd mal ein paar Bilder machen.
Dann lässt es sich einfacher erklären.

MfG

Dexter

Zitat:

Original geschrieben von hondocrx
<div class='Z3S3'>";
<div id='feld_01'>box1</div> ";
<div id='feld_02'>box2</div> ";
</div>";

Ähm? Das mit den Semikolons und Anführungszeichen, hat konkret welchen Zweck?

Nachtrag:

Zitat:

Original geschrieben von hondocrx
Z3S3 {...;}

Dass da der Punkt fehlt, auch irgend nen Grund?

hondocrx

Hab das jetz mal an einem konkreten Beispiel zurechtgebastelt.
Alles Überflüssige (Kopf,Navi) habe ich rausgelöscht.

Jetzt schaut es folgendermaßen aus.

EDIT

und so soll es ausschauen

EDIT

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel=stylesheet type='text/css' href='style.css' />
</head>
<body>

<div class='wrapper' id='wrapper'><!-- wrapper ANFANG-->

<div class='ZS'><!-- HAUPT der Ausgabetabelle ANFANG-->

 <div class='Z1'> <!-- Zeile 1 der Ausgabetabelle ANFANG-->
  <div class='Z1S1'>
  </div>
  <div class='Z1S2'>
   <div class='Z1S2a'></div>
   <div class='Z1S2b'></div>
   <div class='Z1S2c'></div>
  </div>
  <div class='Z1S3'></div>
 </div><!-- Zeile 1 der Ausgabetabelle ENDE-->

 <div class='Z2'> <!-- Zeile 2 der Ausgabetabelle ANFANG-->
  <div class='Z2S1'>
   <div class='Z2S1a'></div>
   <div class='Z2S1b'></div>
   <div class='Z2S1c'></div>
  </div>
  <div class='Z2S2'></div>
  <div class='Z2S3'>
   <div class='Z2S3a'></div>
   <div class='Z2S3b'></div>
   <div class='Z2S3c'></div>
  </div>
 </div><!-- Zeile 2 der Ausgabetabelle ENDE-->

 <div class='Z3'><!-- Zeile 3 der Ausgabetabelle ANFANG-->

  <div class='Z3S1'><!-- Navigationsfeld-->
  navi
  </div>
  <div class='Z3S2'>
   <div class='Z3S2a'></div>
   <div class='Z3S2b'></div>
   <div class='Z3S2c'></div>
  </div>
  <div class='Z3S3'>
	<div id='feld_01'>box1</div>
	<div id='feld_02'>box2</div>
	<div id='feld_03'>box3</div>
	<div id='feld_04'>box4</div>
         <div id='feld_05'>box5</div>
	<div id='feld_06'>box6</div>
  </div>
 </div><!-- Zeile 3 der Ausgabetabelle ENDE-->
</div><!-- HAUPT der Ausgabetabelle ENDE-->
</div><!-- wrapper ENDE-->
</body>
</html>

Code:

body     {background-color:#FFFFE8; font-family:Tahoma,Helvetica,sans-serif; font-size:11px; color:#000000; margin:20px; padding:0px; text-align:center;}



/* DIVs */
#wrapper	{width: 750px; margin: 10px auto 10px auto;}

.ZS	{width: 750px;height: 540px;margin:0;padding:0;background-color: #FFFFE8;}

.Z1	{width: 750px;height: 120px;}
.Z1S1	{width: 120px;height: 120px;background-color: #FFFFE8;float: left;}
.Z1S2	{width:  20px;height: 120px;float: left;}
.Z1S2a	{width:  20px;height:  20px;background-color: #FED634;}
.Z1S2b	{width:  20px;height:  80px;background-color: #FED634;}
.Z1S2c	{width:  20px;height:  20px;background-color: #FED634;}
.Z1S3	{width: 610px;height: 120px;background-color: #FFFFE8;float: left;}

.Z2	{width: 750px;height:  20px;}
.Z2S1	{width: 120px;height:  20px;float: left;}
.Z2S1a	{width:  20px;height:  20px;background-color: #FED634;float: left;}
.Z2S1b	{width:  80px;height:  20px;background-color: #FED634;float: left;}
.Z2S1c	{width:  20px;height:  20px;background-color: #FED634;float: left;}
.Z2S2	{width:  20px;height:  20px;background-color: #FED634;float: left;}
.Z2S3	{width: 610px;height:  20px;float: left;}
.Z2S3a	{width:  20px;height:  20px;background-color: #FED634;float: left;}
.Z2S3b	{width: 560px;height:  20px;background-color: #FED634;float: left;}
.Z2S3c	{width:  20px;height:  20px;background-color: #FED634;float: left;}

.Z3	{width: 750px;height: 400px;}
.Z3S1	{width: 120px;height: 400px;background-color: #FFFFE8;float: left;}
.Z3S2	{width:  20px;height: 400px;float: left;}
.Z3S2a	{width:  20px;height:  20px;background-color: #FED634;}
.Z3S2b	{width:  20px;height: 360px;background-color: #FED634;}
.Z3S2c	{width:  20px;height:  20px;background-color: #FED634;}
.Z3S3	{width: 450px;height: 400px;background-color: #FFFFE8; border:1px solid #000000;}



#feld_01{position:relative;background:#00FF00; top:275px; left:240px; width:200px; height:25px;}
#feld_02{position:relative;background:#00FF00; top:10px; left:10px; width:430px; height:125px;}
#feld_03{position:relative;background:#00FF00; top:125px; left:10px; width:200px; height:25px;}
#feld_04{position:relative;background:#00FF00; top:150px; left:10px; width:200px; height:25px;}
#feld_05{position:relative;background:#00FF00; top:175px; left:10px; width:200px; height:25px;}
#feld_06{position:relative;background:#00FF00; top:200px; left:10px; width:200px; height:25px;}

Wäre schön wenn es sich mal jemand anschaun könnte.
Auch wenn andere Fehler noch drin sind wäre ich über Ratschläge erfreut.

Hab mir das alles ein wenig einfacher vorgestellt.

MfG

Dexter

Ich würde Dir dringend empfehlen, Dein Konzept zu überdenken.
Warum muss jede Zelle eine eigene Klasse haben? Ist das wirklich notwendig? Das jedenfalls macht so ne extreme Codewüste.
Mal auf die Schnelle, wie ich das realisieren würde (nur der Container mit den "Zellen"):

Code:

<!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">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Der Rahmen der Box */
#box{
	border: 1px solid #000;
	width: 500px;
	padding: 1em;
	background: #ffc;
}
/* farben für testcase */
#box div{
	background: #9f0;
	border: 1px solid #000;
}

/* Die beiden "Spalten" */
#links, #rechts {
	width: 45%;
	margin: 0px;
	padding: 0px;
}
/* Der Fluss */
#links  {float: left;}
#rechts {float: right;}

/* Die einzelnen "Zellen"*/
p {
	height: 20px;
	background: #FF9900;
	padding: 1em;
	margin: 1em;
}
</style>
</head>

<body>
<div id="box">
<div id="oben">
<p>Header</p>
  </div>
  <br />

  <div id="links">
  <p>zelle 1</p>
  <p>zelle 2</p>
  <p>zelle 3</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>

  <div id="rechts">
  <p>zelle 1</p>
  <p>zelle 2</p>
  </div>

<br style="clear:both" />
</div>

</body>
</html>

(Rahmen und Farben hab ich mal grell gewählt, damit man sofort sieht was wo liegt.)
Schliesslich sieht man in Deinem Screenshot, dass die einzelnen Zellen relativ zum Layout liegen: nicht, wie Du das deklarierst 235,45 Pixel vom oberen Browserrand, sondern schlicht 10 Pixel vom vorherigen Objekt entfernt! (Zahlen willkürlich

)

Edit: Code optimiert und Fehler berichtigt...
-> http://quizzers.info/temp/blubb.htm

hondocrx

Hi Dexter!

Danke erstmal.

Die große Anzahl der Klasse ist eigentlich nicht notwendig.

Mach das aber zum ersten mal mit den DIVs und anhand der Namen der Elemente kann ich zur Zeit einfacher deren Position Feststellen.
So ist halt Z1S2a und Z1S2c das gleiche.
Da fehlt mir einfach noch der Überblick und ich kan die eigentlichen Möglichkeitend er Der DIVs mit CSS nicht außnutzen.

Auß Deinem Beispiel konnte ich ganz gut was übernehmen.

Werd mal sehen wie ich es besser umsetzen kann un mich dann noch einmal melden.

MfG

hondocrx

Ich habe nun den Code soweit es mir möglich war bereinigt.

Nun fehlt mir nur noch die Möglichkeit 2-3 Elemente im DIV - 'box' frei zu positionieren.
Die Anzahl und größe wird dynamisch ermittelt

Nur doch dieses eine Problem und wir können hier zumachen.

MfG

MiH

position: relative;
das bezieht sich immer auf den elternelement (hier: box).

hondocrx

Hatte ich ausprobiert und es ging nicht.
War aber ein Fehler von mir. Hatte die Definition mit 'clas' und nicht 'class' eingefügt.

Hab die Felder mal probeweise so definiert

Code:

.a1{position:relative;background:#00FFFF;top:10px;left:0px; width:25px; height:25px; border: 1px solid #000;}
.a2{position:relative;background:#FF7F7F;top:10px;left:30px; width:25px; height:25px; border: 1px solid #000;}
.a3{position:relative;background:#FFFF00;top:10px;left:65px; width:25px; height:25px; border: 1px solid #000;}

Aufruf

Code:

  <div class="a1">1</div>
  <div class="a2">2</div>
  <div class="a3">3</div>

Die Felder werden im richtigen Abstand von Links angezeigt.
Sie sollen aber auch alle die gleiche Höhe von oben haben (top:10px).

Angezeigt wird es aber so:

GELÖSCHT

Und wieder mal drei Fragezeichen

Bin kurz davor alles wieder auf Tabellen umzustellen.

cu hondocrx

Dexter

Du hast den float vergessen.

Edit: Oder:

Code:

.box div {display: inline;}

Dein Code etwas übersichtlicher:

Code:

.a1{background:#0ff;left:0px; }
.a2{background:#FF7F7F;left:30px; }
.a3{background:#FFFF00;left:65px; }
.box div {
	display: inline;
	border: 1px solid #000;
	position: relative;
	height: 25px;
	width: 25px;
	top: 10px;
}

Edit²: Auch noch sehr schön, statt jeder einzelnen Box die Position anzugeben:

Code:

.box div{margin-right: 30px;}

hondocrx

Float bedeutet doch eigentlich Textumfluß.

Wobei benötige ich aber einen Textumfluß wenn ich Elemente frei Positionieren möchte. Die Position des Elementes wird dynamisch ermittelt. So könnte es ja auch mal passieren das sich Flächen von Elementen ganz oder Teilweise überschneiden.

Irgendwie komme ch da mit meiner Logik nicht mehr weiter

Ich gebe jetzt erstmal auf und schmeiß den Scheiß hin.
Vielleicht setzt ich mich später noch mal dran.

Danke für Eure Hilfe.

schönen Abend noch.

Dexter

Ich sehe in Deinen Beispielen keine wirkliche Positionierung, ich sehe keine Notwendigkeit einer festen Positionierung.
Insofern reden wir wohl von 2 unterschiedlichen Geschichten: Du von Pixelgenauer Positionierung (wird immer Probleme machen!) und ich von relativem Layout, was extrem flexibel zu warten ist und vor allem: im Code sehr überschaubar im Gegensatz zu Deinen Positionierungsversuchen.

Wo klemmt's denn jetzt genau? Mein letztes Beispiel (vom "Edit") macht doch so ziemlich genau was Du möchtest?
Ok, ich erklär mal mein Beispiel:
.box div
^^^^^ Alle divs im Container Box erhalten die Eigenschaften
display: inline;
^^^^^^^^^ Alle Divs sind im Textfluss (also nebeneinander (was Deine Frage nach dem Textfluss beantwortet), bis die "Zeile" zu Ende ist, dann wird umgebrochen. Schlicht wie normaler Text.)
...
margin-right: 30px;
^^^^^^^^^^^^^Jeder Container hat rechts zum nächsten Container 30 Pixel Abstand.

hondocrx

@Dexter

Geb erstmal auf!
Jetzt sind wieder Tabellen drin.
Mir läuft sonst die Zeit davon.

Werd mich aber nochmal dransetzen.
Hab esmir leichter vorgestellt.

MfG

Anzeige

Anmelden

Weitere Tipps