nicht angemeldet
Tabellen ersetzen durch div -Container
Hallo Gemeinde,
jetzt "divtle" ich schon seit ein paar Tagen rum um komme irgendwie nicht dahin wo ich will.
Seite mit einem Hauptbereich:
<div id="haupt">
<div id="textblock">
Variabler Text
</div>
<div id="textblock">
Variabler Text
</div>
</div>
Ich kriege diese verflixten texblöcke nicht so definiert, dass sich der untere nach unten schiebt bzw. überhaupt unter den oberen hängt.
Beide sind mit position:absolute definiert und sollten sich nach dem Mutter richten. Das macht aber nur der obere. Ich habe noch keine position:hänge_dich_unter_deinen_bruder Definition finden können. Gibt's das überhaupt oder hängen alle <div>s immer nur an der Mutter.
Wäre für ein paar Tips dankbar
Holger
-
Hi,
<div id="haupt">
<div id="textblock">
Variabler Text
</div>
<div id="textblock">
Variabler Text
</div>
</div>Ich kriege diese verflixten texblöcke nicht so definiert, dass sich der untere nach unten schiebt bzw. überhaupt unter den oberen hängt.
Beide sind mit position:absolute definiert
Warum?
Einfach NICHT positionieren.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Hallo Holger,
Beide sind mit position:absolute definiert und sollten sich nach dem Mutter richten. Das macht aber nur der obere. Ich habe noch keine position:hänge_dich_unter_deinen_bruder Definition finden können. Gibt's das überhaupt oder hängen alle <div>s immer nur an der Mutter.
Nimm das jetzt bitte nicht persönlich, aber ich frage mich mich immer wieder, warum so viele Leute meinen, ein tabellenloses Layout auf die Beine stellen zu müssen, ohne sich anscheinend auch nur ansatzweise mit CSS auseinadergesetzt zu haben.
Man sollte nicht CSS-basiertes Layout machen, weil es gerade "in" ist (wer weiss, was in einem Jahr in ist), sondern weil man es für die bessere Alternative hält. Diese Erkenntnis setzt allerdings voraus, dass man verstanden hat, was da überhaupt passiert. Und das hast du offensichtlich nicht.
Was du falsch gemacht hast, hat MudGuard ja schon gesagt. Lass die absolute Positionierung bleiben und dann setze dich mal mit dem Boxmodell auseinander.
Aber nichts für ungut. Das musste mal raus. ;)
Schönes Wochenende.
MfG Mülli
--
Viva Colonia!-
Hallo Mülli,
Und das hast du offensichtlich nicht.
Sagen wir nicht genug, wie es scheint. Und was macht man wenn man nicht weiter weiß? Man fragt.
Was du falsch gemacht hast, hat MudGuard ja schon gesagt. Lass die absolute Positionierung bleiben...
ist raus, aber leider keine Änderung.
...und dann setze dich mal mit dem Boxmodell auseinander.
'mag kein Formel 1
Aber nichts für ungut. Das musste mal raus. ;)
Hast ja recht ... im Prinzip
Schönes Wochenende.
Dito und Danke
Holger
-
-
Hallo,
jetzt "divtle" ich
ein typische anfängerfehler
... du verwendest div-container, wo keine erforderlich bzw. syntaktisch falsch sind.Seite mit einem Hauptbereich:
<div id="haupt">
<div id="textblock">
Variabler Text
</div><div id="textblock">
Variabler Text
</div>
</div>
Ich kriege diese verflixten texblöcke1. Welche Textblöcke? Zeichne Textblöcke auch als solche aus <p> </p>, sonst begehst du den selben "Mißbrauch" wie bei Layout-Tabellen.
2. Eine ID darf/sollte nur 1x im Dokument vorkommen. Definiere stattdessen die Klasse "textblock"und so könnte es aussehen (vereinfacht).
<html>
<head>
<title> titel </title>
<style type="text/css">
#haupt {
border:1px solid black;
background-color:#eee;
width:70%;
padding:2%; }
.textblock {
border-bottom:1px dashed red;
background-color:#fff;
padding:10px;
margin:0; }
</style>
</head><body>
<div id="haupt">
<p class="textblock">
text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT
</p>
<p class="textblock">
text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT
</p>
</div
</body>
</html>mfg NAG
--
signatur-
und so könnte es aussehen (vereinfacht).
Nicht ganz, denn auch Klassen sind nur nötig, wenn man spezielle Bereiche oder Markierungen setzten möchte, die mit HTML Tags nicht auszuzeichnen sind.
Also simpler:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> titel </title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
padding-left:15%;
padding-right:15%;
background-color:#eee;
color: #000;
}p
{
border-bottom:1px dashed red;
background-color:#fff;
padding:10px;
margin:0;
color:#000;
}</style>
</head><body>
<p>
text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT
</p><p>
text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT text Text tExt teXt texT
</p></body>
</html>Struppi.
-
Hallo,
Also simpler:
woher weißt du, dass sich außerhalb von div#haupt keine weiteren textabsätze befinden, und wo ist überhaupt div#haupt ;) du hast lediglich ein weiteres beispiel gegeben.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">zu meiner entschuldigung :)
und so könnte es aussehen (vereinfacht)
mfg NAG
--
signatur-
woher weißt du, dass sich außerhalb von div#haupt keine weiteren textabsätze befinden, und wo ist überhaupt div#haupt ;) du hast lediglich ein weiteres beispiel gegeben.
Naja, wenn es #haupt gibt (und vielleicht noch #menu usw), dann sollte man es auch so schreiben:
#haupt p (oder p#haupt)
ich wollte nur darauf Hinweisen, das die Klassen nicht nötig sind und man durchaus meistens auf Klassen verzichten kann.
Struppi.
-
-
-