|
|||
bild über 2 div-tags positionieren
Hallo zusammen,
ich möchte in einem div-tag einen kurzen text schreiben und darunter dann zwei spalten haben. das ganze soll dann ungefähr so aussehen: Skizze Grundaufbau der rote kasten ist mein großer div-tag, in dem oben der text stehen soll und die beiden unteren spalten dürften ja auch klar sein. bis dahin noch machbar, aber: oben rechts soll ein relativ großes bild hochkant eingefügt werden, das sich also über den in der skizze roten kasten UND über den grünen teilweise drüberlegt. das könnte man einfach mit einem absolut positionierten objekt machen. der text in dem roten und in dem grünen kasten soll sich aber nach dem bild richten, also das zeilenende bei dem anfang vom bild machen. das ganze sollte dann so aussehen: Skizze geplantes Aussehen hat jemand einen sinnvollen lösungsansatz für mein problem? wäre sehr dankbar!!! Geändert von MoJo (11.06.2006 um 19:02 Uhr) |
Sponsored Links |
|
||||
Hier mal ein Beispiel mit überwiegend festen Höhen, das Prinzip verdeutlicht. Entscheidend ist letztlich nur die img-Regel ganz unten. Funktioniert wie gesagt nur bei fester Höhe des oberen Bereiches (denn danach richtet sich der negative margin des Bildes).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <link rel="stylesheet" type="text/css" href="css_standard.css" media="all" /> </head> <body> <div id="container"> <div id="top">Text</div> <div id="links">Text</div> <div id="rechts"><img src="bild.jpg" alt="" /> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div> </div> </body> </html> Code:
* { margin: 0; padding: 0; border: none; } body { background-color: #fff; color: #000; font-size: 0.8em; line-height: 1.5em; font-family: Verdana, Arial, Helvetica, Geneva, sans-serif; } #container { width: 700px; background-color: red; border: 1px solid #000; margin: 20px auto; } #top { height: 150px; } #links { height: 500px; width: 350px; float: left; background-color: yellow; } #rechts { height: 500px; width: 350px; float: left; background-color: green; } #container:after { content: "."; display: block; height: 0; clear: left; visibility: hidden; } img { position: relative; float: right; margin: -140px 0 5px 10px; } |
|
|||
Klappt super! Danke!
Eine Frage noch: Für was ist die css-definition #container:after ? Wenn es nur wegen dem clearen ist, dann ist für die beantwortung vll folgendes wichtig: ich habe nach dem div-tag "container" einen weiteren div-tag "footer", der auch "cleart", da meine navigation etc und auch der "container" float:left als eigenschaft haben. brauche ich den :after also oder nicht? |
|
||||
#container:after dient nur dazu, #container die Floats einschließen zu lassen. Wenn Du Deinen clearenden Footer in #container legst, brauchst Du das :after nicht. Falls der Footer aber wirklich außerhalb liegt (wie Du schreibst), mußt Du unterhalb der Floats (die sich in #container befinden) noch clearen.
EDIT: Ich sehe gerade, daß Du auch #container floatest. Dann brauchst Du gar nichts zu tun, denn Floats schließen in ihnen liegende Floats automatisch ein. Das ist auch eine sehr gute Methode: Float Nearly Everything. Dann laß alles wie es ist, d.h. kein :after und kein "clear" innerhalb von #container, sondern einfach nur den clearenden Footer außerhalb von #container, wie gehabt. Geändert von heiko_rs (12.06.2006 um 17:57 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Bild in Div positionieren mit Position | saschaopp | CSS | 2 | 28.01.2009 11:40 |
Bilder im div mit float positionieren | henmey | CSS | 4 | 25.01.2009 02:53 |
Bildergalerie? Bild soll in einem Div, text in anderem Div erscheinen? | caja13 | CSS | 11 | 10.09.2008 17:31 |