Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Grafik relativ in einem DIV positionieren geht nicht
zurück: Einen Button nach Klick nicht mehr nutzen können weiter: CSS Problem mit Wrapper Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Feedback Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Eberh@rd
Ergonomie-Junkie


Verfasst am:
25. März 2012, 12:34
Rufname:

Grafik relativ in einem DIV positionieren geht nicht - Grafik relativ in einem DIV positionieren geht nicht

Nach oben
       

Hi Forum,

ich hätte da mal wieder gerne ein kleines Problem mit CSS.

In meinem Content-DIV befinden sich eine Anzahl von horizontalen Blöcken namens
Code:
<div class="ref clearfix">
Innerhalb dieser Blöcke wiederum ist jeweils ein Bild und etwas Text positioniert, soweit kein Problem.

Nun will ich in jedem der Blöcke noch eine kleine klickbare Grafik positionieren mit den folgenden Eigenschaften:
Code:
<a href="#2">
<img
style="
width: 42px;
height: 42px;
position: absolute;
top:222px;
left:0px;
z-index:0;
"
title="Runter"
alt=""
src="img/DOWN.png">
</a>
Diese soll an einer bestimmten Stelle relativ zur linken oberen Ecke des jeweiligen übergeordneten Blocks ("ref clearfix") positioniert werden.

Positioniere ich die Grafik wie oben mittels "absolute", dann wird diese (im Gegensatz zur Angabe bei SELFHTML) aber nicht relativ zum übergeordneten Block ("ref clearfix") positioniert, sondern relativ zum Browserfenster.

Wenn ich die Grafik andererseits mittels "relative" positioniere, dann richtet sich die Grafik zwar korrekt innerhalb des übergeordneten Blocks ("ref clearfix") aus. Allerdings werden die anderen Inhalte des übergeordneten Blocks komischerweise von der Grafik "in deren ursprünglicher Position" verdrängt (obwohl sich die Grafik dort gar nicht befindet, da ich sie mittels "top:222px;" weiter runter geschoben habe).

Mit anderen Worten, genau an der Stelle im übergeordneten Block, wo die Grafik wäre, wenn sie nicht das Attribut "top:222px;" hätte, bleibt ein leerer Bereich, der die anderen Inhalte des Blocks nach unten verschiebt -- obwohl die Grafik dort ja gar nicht ist.

Liegt das vielleicht an den Attributen des übergeordneten Blocks? Dessen Style lautet wie folgt:
Code:
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
.clearfix     { display: block; }
/*The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use clearfix to fix it*/

.ref{
   border-bottom:1px dotted #333;
   margin-top:10px;
   width:100%
}
Also nochmal zusammengefasst, wie kann ich meine kleine Grafik innerhalb des übergeordneten Blocks relativ positionieren, ohne dass die Grafik die anderen Elemente des übergeordneten Blocks verdrängt?

Vielen Dank schon vorab,

Grüße Eberh@rd
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
25. März 2012, 14:21
Rufname:
Wohnort: Aachen

AW: Grafik relativ in einem DIV positionieren geht nicht - AW: Grafik relativ in einem DIV positionieren geht nicht

Nach oben
       

Hallo Eberh@rd,

so ganz bin ich mit deiner Problembeschreibung nicht klar gekommen. Soweit ich das verstanden habe möchtest du eine kleine Grafik in deinen Container "ref clearfix" einfügen, die auf einen Anker im (nächsten) Container verlinken soll. Und sie soll die Inhalte des Containers nicht verdrängen. Bei der Angabe "top:222px;" nehme ich an, dass sich die Grafik eher unten im Container befindet. Jedenfalls dort fängt es mit dem Verständnis an zu haken. Du beschreibst dann, dass die Inhalte nach unten verschoben werden und die Grafik nicht dort ist, wo eine Lücke entstanden ist. Ohne HTML-Code fällt es mir schwer vorzustellen, wo die Grafik denn nun hin soll.

So als ersten Gedankengang hätte ich daraus ein Inline-Element mit entsprechenden margins und/oder paddings gemacht, aber es fehlt mir, wie gesagt, gerade mal die Vorstellung über die Position.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Eberh@rd
Ergonomie-Junkie


Verfasst am:
28. März 2012, 20:47
Rufname:


AW: Grafik relativ in einem DIV positionieren geht nicht - AW: Grafik relativ in einem DIV positionieren geht nicht

Nach oben
       

Eberh@rd am 25. März 2012 um 21:50 hat folgendes geschrieben:
Hallo womaninweb und danke für die Antwort,

ja es ist so wie von Dir nachvollzogen: die mit "relative" positionierte Grafik belegt seltsamerweise zwei Plätze: einmal den Platz, wo sie wäre, wenn sie "inline" positioniert wäre (dieser Platz ist leer, aber man kann dort trotzdem auf den Grafik-Link draufklicken!), und dann nochmal den Platz, an dem die Grafik mittels "position: relative; top:222px; left:0px;" tatsächlich positioniert und auch sichtbar ist (auch da kann man draufklicken).

Aber ich habe das gemäß Deiner Anregung inzwischen geändert, und die Grafik einfach inline im Text positioniert. Das klappt sehr gut.

Danke für diesen Tipp!

Grüße Eberh@rd

Ich muss doch nochmal auf die Problematik zurückkommen.

Voraussichtlich muss ich die Grafik nun doch aus dem Textfluss herauslösen und relativ zum enthaltenden DIV "fixiert" positionieren.

Aber entweder verstehe ich die Positionierungsarten von CSS nicht, oder es stimmt sonst irgendwas nicht. Bei mir nimmt die Grafik immer noch zwei Plätze gleichzeitig ein: erstmal den Platz in der Abfolge der Elemente im Quelltext, und dann noch den Platz, wo sie mittels "position:xyz" stationiert ist.

Unten mal ein Screenshot, aus dem das hervorgeht.
Man erkennt, dass die Grafik mittels "position:relative" positioniert ist (grüner Pfeil). Dennoch nimmt sie zusätzlich auch noch den Platz ein, wo sie wäre, wenn man "position:relative" weglassen würde (orangener Pfeil).

Versehe ich die Grafik zusätzlich mit einem Hyperlink, dann kann man auch beide Stellen (orange und grün) anklicken!

Wie könnte ich also meine Grafik relativ zum umgebenden DIV positionieren, ohne dass irgendwelche sonstigen Elemente, insbesondere Text, durch die Grafik verdrängt werden?

Vielen Dank schonmal für alle Tipps,

Grüße Eberh@rd.
--
PS: "position:absolute" funktioniert auch nicht, da die Grafik dann immer relativ zum Gesamtcontent positioniert ist anstatt zum umgebenden DIV.
Nachtrag: Eberh@rd am 29. März 2012 um 09:35 hat folgendes geschrieben:
OK ich habs.

Es geht mit position:absolute für die kleine Grafik -- aber nur dann, wenn das übergeordnete DIV position:relative hat.

Gefunden hier: Learn CSS Positioning in Ten Steps (unter Ziffer/Tab #4)

SelfHTML ist offenbar falsch bzw. unvollständig hierzu!

Grüße Eberh@rd.



Screenshot.png
 Beschreibung:
 Dateigröße:  33.62 KB
 Angeschaut:  1810 mal

Screenshot.png


Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Macromedia Dreamweaver Forum: Hyperlinks relativ zum Stammordner 4 wpoth 2188 24. Aug 2012, 18:57
wpoth Hyperlinks relativ zum Stammordner
Keine neuen Beiträge MS Expression Web Forum: Formatierungs-Verschiebung im Browser durch Nutzung von DIV 3 ladwest 867 09. Mai 2012, 17:53
womaninweb Formatierungs-Verschiebung im Browser durch Nutzung von DIV
Keine neuen Beiträge PHP & JavaScript Forum: Grafik auswechseln in Abhängigkeit von einer Scrollposition 0 Eberh@rd 1019 28. März 2012, 18:07
Eberh@rd Grafik auswechseln in Abhängigkeit von einer Scrollposition
Keine neuen Beiträge HTML & CSS Forum: Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV? 2 Gast 2890 13. März 2012, 10:32
Eberh@rd Grafik mit scrollbarem DIV koppeln -- außerhalb des DIV?
Keine neuen Beiträge Macromedia Dreamweaver Forum: div problem 1 Gast 911 01. März 2012, 10:57
womaninweb div problem
Keine neuen Beiträge MS Expression Web Forum: Grafik einfügen mit Bildvorschau möglich? 0 gubheinicke 1568 31. Mai 2011, 19:33
gubheinicke. Grafik einfügen mit Bildvorschau möglich?
Keine neuen Beiträge HTML & CSS Forum: div Container dem Browser Fenster anpassen 5 Sugarfree 5518 14. Apr 2011, 16:23
womaninweb div Container dem Browser Fenster anpassen
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2444 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge HTML & CSS Forum: grafik etwas verschieben... zu hülf! :-) 2 Computer-Beratung 4500 12. Feb 2010, 15:19
Computer-Beratung grafik etwas verschieben... zu hülf! :-)
Keine neuen Beiträge HTML & CSS Forum: Spalte+Grafik die 2te 1 Mihawk 1580 28. Dez 2009, 13:03
Gast7 Spalte+Grafik die 2te
Keine neuen Beiträge MS Expression Web Forum: Div Positionieren 4 HBM00 885 14. Jul 2009, 15:56
HBM00 Div Positionieren
Keine neuen Beiträge HTML & CSS Forum: Navigation in div verrutscht je nach Version 2 chopsui 1594 04. Jun 2009, 21:54
chopsui Navigation in div verrutscht je nach Version
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Expression Web