Positionierung einer Box

[holger21]

Hallo

Erklärt mich bitte nicht für völlig unfähig, wenn ich euch mein kleines Problem schildere.

Ich bin gerade dabei meine alte HP vom Framedesign auf CSS zu trimmen und stoße da leider schon am Anfang auf ein kleines Hindernis. Ich habe vor unten am Fensterrand drei Boxen einzubringen. In diesen Boxen soll einfach nur ein Text stehen, also keine Funktionen oder so. ;-)

Die erste Box soll sich am linken Rand orientieren, die zweite soll mit ihrem Zentrum absolut gemittet sein und die dritte am rechten Rand ausgerichtet sein. Diese drei Boxen sollen auf sämtlichen Seiten vorhanden sein, die die HP irgendwann hergibt.

Die erste und die dritte Box sind nicht das Problem, allerdings beiße ich mir an der zweiten seit einigen Stunden die Zähne aus.

Hier der Code aus der css Datei:

/*box 1*/
.Update{
 position:absolute;
 bottom:5px;
 width:150px; height:60px;
 left:5%;
 }

/*box 2*/
.Spruch{
 bottom:10px;
 width:300px; height:55px;
 margin-left:auto; margin-right:auto;
 }

/*box 3*/
.counter{
 position:absolute;
 bottom:5px;
 width:150px; height:60px;
 right:5%;
 }

Getestet wird die Seite mit Firefox 1.07 und Opera 8.51.
Mit den Angaben zur "position" komme ich irgendwie nicht weiter und weiß auch nicht so recht, ob die da was verloren haben.

Also noch mal in Kurzform:
Ich möchte die Mitte einer Box in der unteren Mitte des Bildschirms fixieren.

Wäre schön, wenn mir jemand helfen könnte. ;-)

Gruß
Holger

P.S. Online ist das ganze noch nicht, daher kann ich auch leider keine URL zum ansehen anbieten.

[Detlef G.]

Hallo Holger

Hier der Code aus der css Datei:
...

/*box 2*/
.Spruch{

Bei Elementen, die genau einmal auf der Seite vorkommen wäre eine Id wohl
passender als eine Klasse.

bottom:10px;

Das ist ohne position wirkungslos.

width:300px; height:55px;
margin-left:auto; margin-right:auto;

Das wäre mit position:absolute wirkungslos

Du könntest es so lösen:

/*box 2*/  
.Spruch{  
 position:absolute;  
 bottom:10px;  
 left:50%;  /* damit ist die linke untere Ecke positioniert */  
 width:300px; height:55px;  
 margin-left:-150px;  /* damit wird sie nach links verschoben */  
 }  

Bedenke aber:

• wenn zu wenig Platz ist, werden die Boxen überlappen,
• wenn der Inhalt der Boxen zu groß wird, wird er aus den Boxen
    heraustreten.

Ich frage mich aber, ob du das wirklich absolut am unteren Fensterrand
positionieren willst, denn wenn der Inhalt der Seite hoch für das Fenster
wird, würde der Inhalt von den Boxen überlagert.
Empfehlen würde ich dir, dich intensiv mit "CSS-basierte Layouts" und auch
mit "Footer aller Art - feststehende Elemente realisieren" zu beschäftigen.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Ich frage mich aber, ob du das wirklich absolut am unteren Fensterrand
positionieren willst

genau wie ich. Und ohne dies wird die Positionierung - oder besser Ausrichtung - ja auch sehr einfach:
<p id="footer"><span>Update</span><img alt="counter" /> Spruch ... </p>
#footer {text-align:center;}
#footer span {float:left;}
#footer img {float:right;}

Wobei das eigentlich selbst bei absoluter Positionierung des Footers klappen müßte, wenn noch eine Breite angegeben wird.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Und ohne dies wird die Positionierung - oder besser Ausrichtung - ja auch sehr einfach:
<p id="footer"><span>Update</span><img alt="counter" /> Spruch ... </p>
#footer {text-align:center;}
#footer span {float:left;}
#footer img {float:right;}

Nur wissen wir nicht, wie es genau aussehen soll, Holger schrieb von Boxen,
woraus ich schloss, dass er nicht nur Bereiche meinte, sondern dass diese
auch Rahmen oder andere Hintergrundfarben haben. Und auch, wenn .counter
ein img wahrscheinlich macht, schrieb er "In diesen Boxen soll einfach nur ein Text stehen".

Wobei das eigentlich selbst bei absoluter Positionierung des Footers klappen müßte, wenn noch eine Breite angegeben wird.

Ja, da wir nicht genauer zu wissen, welches Verhalten dieser Boxen er genau
wünscht oder woraus der Rest der Seite besteht, habe ich davon abgesehen,
ihm ein entsprechendes Beispiel zu posten und ihm stattdessen die Links
gegeben.

Auf Wiederlesen
Detlef