Zentrierte Blöcke und nebengestellte Kästchen

1 Sebastian (Gast)

Hallo,

ich möchte zwei Textblöcke zentriert übereinanderstellen und rechts neben den unteren Block noch einen.

Das unter- und nebeneinanderstellen ist schon mal unter diesem Link zu sehen, aber eben rechts am Rand klebend.

Meine HTML-Seite sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Anordnung</title>
        <style type="text/css" media="all">@import "style/style.css";</style>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta name="robots" content="index,follow,noarchive" />
    </head>
    <body>
        <div id="kopf">Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
        <div id="text">Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
        <div id="rechts">Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
    </body>
</html>

und das CSS so:

#kopf {
    background-color: #0000FF;
    width: 300px;
}

BODY {
	margin: 0px;
}

#text{
    background-color: #00FF00;
    width: 300px;
    margin: auto;
    float: left;
}

#rechts{
    background-color: #FF0000;
    width: 300px;
    float: left;
}

Wäre schön, wenn jemand Licht in das Dunkel meiner Unwissenheit bringen koennte. :-)

Danke, Sebastian

2 Jörg Kruse

Hallo Sebastian,

float:left zund margin:auto funktionieren wohl nicht zusammen

soll sich der Block #rechts direkt an #text anschließen?

ich sehe eine Möglichkeit, die allerdings voraussetzt, dass #text eine feste Höhe erhält:

#kopf {
   background-color: #0000FF;
   width: 300px;
   margin: auto;
}

BODY {
margin: 0px;
}

#text{
   background-color: #00FF00;
   width: 300px;
   height: 100px;
   margin: auto;
}

#rechts{
   background-color: #FF0000;
   width: 300px;
   margin:auto;
   position:relative;
   left:300px;
   top:-100px;
}

der Block #rechts wird relativ positioniert, und von der zentralen Position (margin:auto;) um die Breite von #text nach rechts verschoben (left:300px;), nach oben um die Höhe von #text (in diesem Beispiel top:-100px;)

3 Sebastian (Gast)

Danke fuer die Hilfe, Joerg!

Leider wird der Text in #text dynamisch mit variabler Textlaenge generiert.

Allerdings ist die Hoehe von Kopf feststehend. Das dies hilfreich sein koennte, war mir nicht klar.
Ich werde mal ueberlegen, ob ich durch Vertauschen der Reihenfolge das #rechts-Kaestchen relativ zum #kopf-Kaestchen setzen kann. Wenn es funktioniert, schreib ich es hier :-)

Sebastian

4 Jörg Kruse

OK :)

und falls es mit position:relative nicht funktioniert, kannst du es mit position:absolute versuchen, und #rechts an den body ausrichten

5 Sebastian (Gast)

So, ich hab einen Weg gefunden. Das rechte Kaestchen wird an den Kopf relativ angehangen. Ich kenne die Höhe des Kopfes und deshalb kann ich direkt darunter den Text befestigen:

#kopf {
  background-color: #0000FF;
  width: 300px;
  height: 100px;
  position:relative;
  margin: auto;
}

BODY {
margin: 0px;
}

#text{
  background-color: #00FF00;
  width: 300px;
  left: 50%;
  top: 100px;
  margin-left:-150px;
  position: absolute;
}

#rechts{
  background-color: #FF0000;
  width: 300px;
  position:relative;
  margin: auto;
  left: 300px;
}

Die Reihenfolge der Blöcke musste dafür umgestellt werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <title>Anordnung</title>
        <style type="text/css" media="all">@import "style/style.css";</style>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta name="robots" content="index,follow,noarchive" />
    </head>
    <body>
        <div id="kopf">KOPF Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
        <div id="rechts">RECHTS Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
       <div id="text">Text Hier steht kein Text, der aus irgendwelchen Gruenden interessant sein koennte. Er ist also voellig uninteressant. Ja, genau. Nix wichtiges steht hier.</div>
    </body>
</html>

Danke nochmal! Sebastian

nach oben

Zentrierte Blöcke und nebengestellte Kästchen

Beitrag schreiben (als Gast)