zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild links vom DIV und außerhalb des Textflusses

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.03.2009, 02:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2006
Beiträge: 32
DoktorW befindet sich auf einem aufstrebenden Ast
Frage Bild links vom DIV und außerhalb des Textflusses

Hallo Leute,

ich versuche gerade ein Layout nach diesem Muster aufzubauen:



Hier der bisherige Code dazu: Test

In der rechten dunkelroten Spalte (#content) stehen die Texte und in der linken Seite die Überschriften und Bilder. Das mit der Überschrift funktioniert schon. Dazu habe ich sie rechts ausgerichtet und mit position:relative; nach links verschoben, sodass sie außerhalb der dunkelroten Box liegt.

Mit dem Bild will ich jetzt praktisch das Selbe anstellen (so soll es dann aussehen: klick). Aber weil das Bild ja links neben dem Text stehen soll, muss es noch so formatiert werden, dass es keinen Platz im Textfluss beansprucht. Mit position:absolute; ging es nicht, da ich das Bild dann nicht relativ positionieren kann. Mit position:relative; (so wie mit der Überschrift) ging es auch nicht, da es im Textfluss Platz beansprucht (dann bleibt der Platz rechts neben dem Bild leer).

Wie bekomme ich das hin?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.03.2009, 08:28
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

mach doch in #container zwei div's (#links und #rechts).
Diese läßt du floaten.

Erstmal brauchst du weder position:relative noch absolute.
In #links steht die h1 und das img.

Wenn die nacheinander im Quelltext stehen ordnen sie sich auch untereinander an.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.03.2009, 11:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2006
Beiträge: 32
DoktorW befindet sich auf einem aufstrebenden Ast
Standard

Das wäre die unsaubere (Not-)Lösung. Ich möchte aber das CSS an das Markup anpassen und nicht umgekehrt, aber trotzdem danke
Mit Zitat antworten
  #4 (permalink)  
Alt 21.03.2009, 11:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Float und negativer Margin für das Bild.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.03.2009, 13:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2006
Beiträge: 32
DoktorW befindet sich auf einem aufstrebenden Ast
Standard

Damit funktioniert es im Firefox und IE7 super, tausend Dank.

Die aktuelle Version: Test

Der IE6 hat aber damit ein Problem. Er erkennt zwar den negativen marigin, aber er zeigt den Abschnitt des Bildes, das über das Div hinausgeht nicht an.

(position:absolute; würde nicht helfen, weil das Bild dann nicht mehr vom #container-Div eingeschlossen wird und ich das unbedingt brauche.)
Mit Zitat antworten
  #6 (permalink)  
Alt 21.03.2009, 13:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von DoktorW Beitrag anzeigen
Der IE6 hat aber damit ein Problem. Er erkennt zwar den negativen marigin, aber er zeigt den Abschnitt des Bildes, das über das Div hinausgeht nicht an.
Das ist ein altbekannter Bug. Lesestoff: Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung
Mit Zitat antworten
  #7 (permalink)  
Alt 21.03.2009, 15:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.11.2006
Beiträge: 32
DoktorW befindet sich auf einem aufstrebenden Ast
Standard

Mit position:relative; gehts einwandfrei, tausend Dank.
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
Bild auf div überlappend positionieren Shiaso CSS 7 13.06.2010 15:03
div Border links und rechts als Bild Johannes CSS 1 24.11.2008 20:16
Holy Grail und der Internet Explorer! ONeill CSS 23 01.06.2006 19:20
Div passt sich nicht an größe des Background-Image an? Sombreo CSS 13 09.07.2004 03:37
1 div links, 2 div's untereinander daneben jensr CSS 9 01.07.2004 00:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:36 Uhr.