zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bild über 2 div-tags positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.06.2006, 18:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Beitrag 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.06.2006, 18:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Deine Skizzen sind leider nicht aufrufbar, aber anhand Deiner Beschreibung denke ich, daß Du mal mit float: right; und negativem margin-top herumprobieren könntest.

Schöne Grüße,
Heiko
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.06.2006, 19:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

Jetzt aufrufbar?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.06.2006, 20:01
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ja, jetzt geht's. Falls die Höhe des oberen Bereiches feststeht, ist es ganz leicht: Das Bild in die rechte (grünliche) Spalte legen, rechts floaten lassen und mit negativem margin-top nach oben verschieben (für den IE noch position: relative; hinzufügen).
Mit Zitat antworten
  #5 (permalink)  
Alt 11.06.2006, 20:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

@heiko:

ich hab grad nochmal deinen Tipp versucht zu verstehen, komme aber nicht wirklich weiter. wie hast du das genau gemeint?

gruß
Mit Zitat antworten
  #6 (permalink)  
Alt 11.06.2006, 20:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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; }
Mit Zitat antworten
  #7 (permalink)  
Alt 12.06.2006, 17:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 12.06.2006, 17:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

#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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:13 Uhr.