Marc Olivetti: Positionierung verschachtelter DIV-Container

Beitrag lesen

SELF-Forum

Positionierung verschachtelter DIV-Container

Marc Olivetti
– Informationen zu den Bewertungsregeln

Hallo,
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

Beitrag melden
–
Informationen zu den Bewertungsregeln