nicht angemeldet
Floatendes Layout realisieren: Logo ohne feste Breite
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
-
Du suchst für #site nach der overflow Eigenschaft.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Du suchst für #site nach der overflow Eigenschaft.
Oh Mann, hätte ich mal früher gefragt. Diese kleine Eigenschaft ist also verantwortlich. Dankeschön!
karl
-
-
Hi,
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.
Dann setze overflow:hidden für #site.
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?
Nein, m.E. nicht wirklich ohne krude Workarounds.
Liegt an den Eigenschaften von float.MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi ChrisB,
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.
Dann setze overflow:hidden für #site.
Hervorragend, genau das ist es. Und ich wäre nie drauf gekommen, weil ich overflow aus (scheinbar) anderem Kontext kenne. Gut, dass ich endlich mal gefragt habe!
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?
Nein, m.E. nicht wirklich ohne krude Workarounds.
Liegt an den Eigenschaften von float.Schade. Naja, dann halt negativer margin-top, tut's ja auch. Mit CSS3 wird bestimmt alles hübscher. ;)
Lieben Dank für die kompetente Antwort an Pfingstsonntag!
karl
-