zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Grafik unten rechts im div?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.08.2006, 15:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2006
Beiträge: 5
rene090965 befindet sich auf einem aufstrebenden Ast
Standard Grafik unten rechts im div?

Hallo und einen guten Tag, nach 3 tagen vergeblicher Mühe bin ich nun bei euch gelandet und ich hoffe hier auf eine Lösung meines Problems.

gegeben sei folgender Sachverhalt;eine Box mit textinhalt und einer grafik die immer rechts unten sitzen soll wobei der Text um die Grafik fließen soll:

Code:
<div class="smallfont">
<img style="float:left;margin: 0 2px 2px 0;" src="test/demopic.gif" alt="This is a Demo-Picture" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat <br /><br />nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</div>
mit diesem Code sitzt die Grafik oben links und der text geht schön rechts dran vorbei, aber wie schaffe ich es diese Grafik nun nach unten rechts zu verlagern(also im prinzip nur zu spiegeln),versucht habe ich vieles, meine Lösung bisher war ein negatives margin-top,was aber dazu führt das der text im ie darunter und im FF darüber einfach hinweg geht und nicht umbricht an der grafik(aber zumindest sitzt die Grafik schonmal dort wo sie hingehören soll ) :

Code:
<div class="smallfont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat <br /><br />nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi <img style="float:right;margin-top: -50px;" src="test/demopic.gif" width="50px" height="50px" alt="This is a Demo-Picture" /></div>
vielleicht weiß hier jemand zufällig wie ich diesem problem lösen kann???..danke schonmal im Vorraus für eure mühe..mfg rene'
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.08.2006, 15:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Um das Bild nach rechts zu bekommen, kannst Du float:right benutzen. Um das Bild nach ganz unten zu bringen, weiß ich im Moment hingegen nichts.

Vielleicht kann man ausnutzen, dass der Text den ganzen Div ausfüllt und somit das Bild an die untere Kante "drückt" (Erst den Text, dann das Bild)
__________________
... Meine Meinung
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.08.2006, 15:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2006
Beiträge: 5
rene090965 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von slayer2205
Um das Bild nach rechts zu bekommen, kannst Du float:right benutzen. Um das Bild nach ganz unten zu bringen, weiß ich im Moment hingegen nichts.

Vielleicht kann man ausnutzen, dass der Text den ganzen Div ausfüllt und somit das Bild an die untere Kante "drückt" (Erst den Text, dann das Bild)
So hab ich das ja bereits mit dem float:right und dem margin-top: -50px nach unten rechts bekommen, einziges problem wäre noch der text der nicht an der grafik vorbei geht sondern wie schon erwähnt unter(IE) bzw. über(FF) der grafik einfach weiter geht, so als ob diese grafik garnicht existiert...mfg rene'
Mit Zitat antworten
  #4 (permalink)  
Alt 08.08.2006, 16:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Schick doch mal nen Code oder nen Link..
__________________
... Meine Meinung
Mit Zitat antworten
  #5 (permalink)  
Alt 08.08.2006, 16:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2006
Beiträge: 5
rene090965 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von slayer2205
Schick doch mal nen Code oder nen Link..
hallo slayer,diesen hab ich doch schon bereits im ersten Posting getippt

Code:
<div class="smallfont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat <br /><br />nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi <img style="float:right;margin-top: -50px;" src="test/demopic.gif" width="50px" height="50px" alt="This is a Demo-Picture" /></div>


so sitzt die Grafik unten rechts aber der text geht einfach darunter bzw. im Firefox darüber weiter und bricht nicht an der grafik um...mfg rene'

ps:einen Link kann ich dir im moment nicht geben da ich derzeit nur local hier teste.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.08.2006, 17:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.02.2006
Beiträge: 359
ONeill befindet sich auf einem aufstrebenden Ast
Standard

Gib dem div ein position: relative und dem img ein position: absolute mit right:0 und bottom:0;

Vieleicht geht es so.

EDIT: Gerade getestet. Dabei fließt der Text unter das Bild.

Geändert von ONeill (08.08.2006 um 17:40 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 08.08.2006, 18:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von rene090965
hallo slayer,diesen hab ich doch schon bereits im ersten Posting getippt
Ich weiß - ich meinte nur ein bisschen mehr

@oNeil - Logisch, damit nimmst Du das Bild ja aus dem Fluss..
__________________
... Meine Meinung
Mit Zitat antworten
  #8 (permalink)  
Alt 08.08.2006, 18:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.08.2006
Beiträge: 5
rene090965 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von slayer2205
Ich weiß - ich meinte nur ein bisschen mehr

@oNeil - Logisch, damit nimmst Du das Bild ja aus dem Fluss..
mehr isses eigentlich nicht mehr, oben und unten sind dann halt noch die Abschlußgrafiken dieser box dran was aber ja nix mit dem inhalt der contentbox zutun hat denk ich mal.
@ONeill,so funktioniert das ganze net*örgss* die positionierung is ja krass dann in beiden Browsern und wie du schon schriebst, der text geht unter der grafik einfach weiter und bricht nicht um,ich denke mal die lösung mit dem margin-top:-50px war da schon besser,man muß nun nurnoch irgendwie den text dazu bewegen an der garfik umzubrechen
mfg rene'
Mit Zitat antworten
  #9 (permalink)  
Alt 08.08.2006, 18:25
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.02.2006
Beiträge: 359
ONeill befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von slayer2205
@oNeil - Logisch, damit nimmst Du das Bild ja aus dem Fluss..
Ja, hatte mich in der Doc verlesen und dachte es bleibt im Fluss.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.08.2006, 18:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von rene090965
mehr isses eigentlich nicht mehr, oben und unten sind dann halt noch die Abschlußgrafiken dieser box dran was aber ja nix mit dem inhalt der contentbox zutun hat denk ich mal.
@ONeill,so funktioniert das ganze net*örgss* die positionierung is ja krass dann in beiden Browsern und wie du schon schriebst, der text geht unter der grafik einfach weiter und bricht nicht um,ich denke mal die lösung mit dem margin-top:-50px war da schon besser,man muß nun nurnoch irgendwie den text dazu bewegen an der garfik umzubrechen
mfg rene'
Ich denke, das wird nicht funktionieren, da das Bild dann außerhalb des Elternelement des Textes ist..
__________________
... Meine Meinung
Mit Zitat antworten
Sponsored Links
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 rechts & links an mittig positioniertem DIV anbringen skrippi CSS 12 24.01.2013 14:23
Div mit Grafik abschließen Hagbard-Celine CSS 6 12.08.2012 12:37
div von links nach rechts scrollen salt&indigo CSS 8 13.07.2012 16:27
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Elemente in einem Div Container links & rechts ausrichte oliwa CSS 8 16.07.2004 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:01 Uhr.