nicht angemeldet
Positionierung verschachtelter DIV-Container
Gunnar BittersmannHallo,
gern möchte ich mein erstes tabellenfreies Layout bauen. Ich möchte die Inhalte mit DIV-Container platzieren. Das gelingt zwar, aber die Inhalte stehen dann doch nicht an der gewünschten Stelle. Ich habe die Fehlersuche zwar noch nicht aufgegeben, würde mich aber über etwas Motivation freuen. Vielleicht weiß ja jemand von Euch Rat.
Im Beispiel wird die rechte Spalte zwar korrekt erzeugt (sieht man an den Hintergrundgrafiken) aber die Inhalte stehen dennoch nicht an den gewünschten Stellen ("Info" soll in den Kopf und "Termine, News" darunter in den grauen Bereich - vertikal ausgerichtet wie die linke Spalte)
Der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Test</TITLE><LINK REL="STYLESHEET" HREF="test.css" MEDIA="all">
</HEAD>
<BODY>
<DIV CLASS="content">
<DIV CLASS="contentmain">
<DIV CLASS="contentmaintop">
<H2 CLASS="headline">Thema</H2></DIV>
<DIV CLASS="contentmainbody">
<P CLASS="text">Lorem ipsum dolor sit amet, consectetuer adipiscing ...</P> </DIV></DIV>
<DIV CLASS="contentright">
<DIV CLASS="contentrighttop">
<H2 CLASS="headline">Info</H2> </DIV>
<DIV CLASS="contentrightbody">
<P CLASS="text">Termine, News </P></DIV> </DIV></DIV> </BODY>
</HTML>
Und das ist der CSS-Schnippsel:
.content {
padding-top:20px;
width: 657px;
}
.contentmain {
width: 657px;
float: left;
}
.contentmaintop {
background-image: url(images/contentmaintopback.gif);
background-repeat: no-repeat;
width: 657px;
height: 61px;
}
.contentmainbody {
background-image: url(images/contentmainbodyback.gif);
background-repeat: repeat-y;
width: 617px;
padding: 20px;
}
.contentright {
width: 293px;
position: relative;
left: 657px;
}
.contentrighttop {
background-image: url(images/contentrighttopback.gif);
background-repeat: no-repeat;
width: 293px;
height: 61px;
}
.contentrightbody {
background-image: url(images/contentrightbodyback.gif);
background-repeat: repeat-y;
width: 253px;
padding: 20px;
}
Anzusehen auch unter http://www.marcolivetti.de/test/test.htm
Vielen Dank
Marc
-
@@Marc Olivetti:
nuqneH
Hallo,
gern möchte ich mein erstes tabellenfreies Layout bauen. Ich möchte die Inhalte mit DIV-Container platzieren.Und was versprichst du dir davon, anstatt Tabellenlayout eine solch üble div-Suppe zu kochen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Und was versprichst du dir davon, anstatt Tabellenlayout eine solch üble div-Suppe zu kochen?
Ich will gern wissen, ob oder wie man Elemente eben ohne Tabellen - womöglich auch noch verschachtelt - oder transparente Grafiken gezielt plazierrt.
Marc
-
Hi,
Ich will gern wissen, ob oder wie man Elemente eben ohne Tabellen - womöglich auch noch verschachtelt - oder transparente Grafiken gezielt plazierrt.
Das kommt darauf an, was du unter „gezielt platzieren“ verstehst.
Wenn das für dich nur bedeutet, Inhalte pixelgenau per absoluter Positionierung auf/in den Viewport zu nageln, dann hast damit du in den meisten Fällen vermutlich immer noch kein sinnvolleres Layout erreicht, als mit Tabellen.
Eine solch pauschale Frage lässt sich nicht mal eben so beantworten. Sinnvolles Layouten mit CSS erfordert neben Kenntnis der einzelnen Möglichkeiten vor allem Erfahrung.
Für den Einstieg würde ich dir den Artikel im Weblog ans Herz legen, Grundlagen für Spaltenlayout mit CSS - der vermittelt schon einige der Grundlagen.
Und danach gilt vor allem, selber weiter informieren und Erfahrungen sammeln.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Für den Einstieg würde ich dir den Artikel im Weblog ans Herz legen, Grundlagen für Spaltenlayout mit CSS - der vermittelt schon einige der Grundlagen.
Toller Beitrag - darin steht genau, was ich suchte. Dankeschön. :-)
-
-
-