Positionierungs-Problem

[pmmueller]

Wenn man Elemente einer Webseite absolut positioniert, folgen diese nicht mehr dem normalen Fluss des Dokuments.

Das stimmt, und du hast Recht, dass man absolute Positionierung mit Bedacht einsetzen sollte, denn man sollte nicht einfach alle Elemente absolut positionieren, so wie man es auf einer Papierseite tun würde. Und genau da beginnen die Probleme, denn viele Leute haben CSS halt nur durch Trial and Error gelernt und setzen Positionierung (oder auch float) ein, ohne die Grundlagen wirklich verstanden zu haben.

Absolute Positionierung ist aber in Zusammenarbeit mit einem positionierten Elternelement eine völlig geniale und oft unterschätzte Möglichkeit, flexible Strukturen zu erzeugen. Nimm zum Beispiel den Slogan auf little-boxes.de rechts oben im Header. Der ist absolut positioniert, aber relativ zum Kopfbereich. Stabil und einfach.

 

[pmmueller]

IE NetRenderer - Browser Compatibility Check -

Danke für den Link. Kannte ich noch nicht. Völlig genial sind ja die gemischten Darstellungen von IE6/7.

 

[Maxi]

Noch ne Frage :mrgreen:

Warum wird mein Counter jetzt nicht zentriert, bei den w3c-Buttons hab ich das gleiche angewendet und da gehts...

Neuer Link: Startseite - maxi.internet-paten.de

 

[pmmueller]

Okay, einen noch ;)

Warum wird mein Counter jetzt nicht zentriert

Weil die Tabelle mit den Stats nicht in dem p-Element mit der Klasse center liegt.

Eine Möglichkeit ist, um die Tabelle ein div zu legen und dem per Inline-Style eine Zentrierung zu geben:

<div class="headline">Counter</div>
<p class="center"><script type="text/javascript" src="http://www.trendcounter.de/count.php?id=5866"></script></p>

[B]<div style="text-align: center">[/B]
<table style="display: inline;" border="0" cellpadding="0" cellspacing="0">
<!-- Rest der Tabelle entfernt --> 
</table>
<!-- noscript entfernt --> 
[B]</div>[/B]<!-- Ende des div zum Zentrieren der Tabelle -->

Eine kurze Anmerkung noch zu deinem HTML :
Statt einer Konstruktion wie <div class="heading> ... </div> wäre es sinnvoller, eine Überschrift wie <h2> </h2> zu nehmen, und die dann per CSS zu gestalten. "Navigation", "Counter" und "w3c" _sind_ Überschriften, und dafür gibt es die Elemente h1 bis h6. Das wäre dann auch mehr im Sinne des w3c.

 

[Maxi]

Woher nimmst du diese Tabelle? In meinem Quelltext steht nichts davon.

<p class="center"><script type="text/javascript" src="http://www.trendcounter.de/count.php?id=5866"></script></p>
<noscript><a href="http://www.trendcounter.de" target="_blank"><img src="http://www.trendcounter.de/count_c.php?id=5866" alt="counter kostenlos" border="0" /></a></noscript>

 

[pmmueller]

Woher nimmst du diese Tabelle?

Aus dem Quelltext, den mein Firefox mir anzeigt ;-)

 

[Maxi]

Da sehe ich sowas auch nicht bzw. habe es auch nicht geschrieben ;-)

Ist aber egal, Thema ist erledigt ;-)