nicht angemeldet
Liebes Forum,
als ich neulich ein etwas umständlicheres Layout mit floatenden Boxen erstellen wollte, ist mir aufgefallen, dass man in den Möglichkeiten hier doch stärker eingeschränkt ist als ich bisher dachte, oder dass ich - viel wahrscheinlicher - das Thema noch immer nicht ganz durchdrungen habe.
Zur Veranschaulichung habe ich mal versucht, die berühmte Google-404-Seite möglichst originalgetreu nachzubauen - nur eben ohne Tabellen -, weil das Grundproblem immer wiederkehrt. Herausgekommen ist dabei erstmal folgender Code:
<!doctype html>
<html lang=en-US>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<title>404 Not Found</title>
<style> [code lang=css]
* { margin: 0; padding: 0; }
body { background: white; border-bottom: 4px solid #3366cc; color: black; font: 16px Arial, sans-serif; margin: .5em; padding-bottom: 1em; }
#logo { float: left; font: bold 3em Times New Roman, Times, serif; margin-bottom: .333em; padding: .125em .042em; }
#logo b, #logo b + b + b + b { color: #0039b6; }
#logo b + b, #logo b + b + b + b + b + b { color: #c41200; }
#logo b + b + b { color: #f3c518; }
#logo b + b + b + b + b { color: #30a72f; }
#site { background: #3366cc; color: white; font-weight: bold; margin-top: 1.75em; padding: .125em; }
#main { margin: 0 40px; }
h1 { clear: left; font: bold 2em Arial, sans-serif; margin: .67em 0; }
</style>
<p id="logo"><b>G</b><b>o</b><b>o</b><b>g</b><b>l</b><b>e</b>
<p id="site">Error
<div id="main">
<h1>Not Found</h1>
<p>The requested URL <code>/</code> was not found on this server.
</div>
[/code]
Typischerweise würde ich bei diesem Problem für #site ein margin-left setzen, soweit klar. Hier aber will ich genau das vermeiden, da ich #logo den notwendigen Platz, nicht mehr und nicht weniger, einräumen will. Ich könnte #site selber links floaten lassen, hätte dann aber das Problem, dass die Box nur noch so breit ist wie der Text ("Error").
Und noch ein Problem gibt es: Auf #site habe ich einen margin-top liegen; kann ich verhindern, dass auch das floatende #logo diesen margin-top übernimmt - möglichst auf elegantere Weise als mit negativem margin-top?
Eine (m.E.) schmutzige Lösung wäre eben der margin-top: -.583em; für #logo und dazu ein weißer Hintergrund, damit man nicht sieht, dass #site dahinter liegt. Dadurch würde das linke padding von #site erstmal verlorengehen, was man aber auch noch hinbiegen könnte. Aber das hier ist ja auch nur ein recht trivialer Fall - meine Frage ist also vielmehr, ob ich hier prinzipiell Float-technisch ein Brett vorm Kopf habe oder ob ich mich noch vertiefend bilden muss, um solche Probleme zu lösen, oder ob ich hier einfach an die Grenzen von CSS2 stoße und auf CSS3 warten muss ...
Für Antworten wäre ich sehr dankbar!
karl