Technik einfach und verständlich erklärt.
Sie können nützliches zu einem interessanten Thema berichten? Dann schreiben sie selbst einen Artikel auf Technikpedia!
 
Technik von Profis erklärt
Auf www.technikpedia.de können Sie Informationen zu verschiedenen Themen aus der Technik und Informatik finden. Durch verschiedene Editoren sind die Artikel besonders informativ und aussagekräftig.
HTML CSS Style: Element auf ein anderes verschieben…
…, ohne dass ein störender Platzhalter zurück bleibt
Das Problem:
Sie wollen bei der HTML-Seitengestaltung ein Element über ein anderes verschieben. Das Problem dabei kann manchmal sein, dass das verschobene Bild an der ursprünglichen Stelle einen unschönen Platzhalter hinterlässt.
Zur besseren Beschreibung habe ich folgendes, an der Praxis angelehntes, Problem konstruiert: (siehe Skizzen)
In einem Element (schwarzer Rahmen) befinden sich 2 weitere Elemente, zum Beispiel ein Bild (blauer Rahmen) und ein kleines weiteres Bild (roter Rahmen).
Die beiden inneren Elemente (rot und blau) sind mittig im äußeren Element (schwarz) ausgerichtet. (Bild 1)
Das kleine Bild (zum Beispiel eine Lupe), soll jetzt auf das große Bild platziert werden.
Bekannt ist, dass dies mit der Style-Möglichkeit „position“ geschehen kann. Bei dem HTML-Element, dass man verschieben möchte fügt man zum Beispiel folgendes CSS-Angabe hinzu:
style=“position: relative; left:50px; top:40px;“
Das bewirkt, dass das Element relativ zu seiner aktuellen Position um 50 Pixel nach unten und 40 Pixel nach rechts verschoben wird.
Häufig kommt es vor das man den Platz (auf Bild 2), wo sich das kleine Bild (roter Rahmen) ursprünglich befunden hatte als störend empfindet.
Wie kann man diesen Platz verschwinden lassen?
Die Lösung:
Des Rätsels Lösung ist ein sogenannter negativer Margin. Man fügt dem verschobenen Element einen negativen Abstand (margin) hinzu.
Beispiel:
Das kleine Element (roter Rahmen) hat eine Höhe von 20px. So fügt man ihm folgendes hinzu:
style=“margin-top: -20px;“
Dies bewirkt, dass der Abstand um 20 Pixel nach oben hin verkleinert wird. Somit verschwindet der störende Abstand.
Diese Lösung habe ich mit mehreren Browsern getestet.
Sie funktioniert mit: Mozilla Firefox 3.0.5, Internet Explorer (IE) 7.0, Google Chrome 1.0.153.43, Safari 3.2.1
Sie funktioniert nicht mit: Opera 9.6.3
Dazu würde ich gerne mal die Quelltexte sehen. Denn so wie der Artikel da steht, ist er völliger Humbug.
Spätestens bei „Das bewirkt, dass das Element relativ zu seiner aktuellen Position“ sträuben einem sich die Haare. Die CSS-Angabe „relativ“ bezieht sich auf die Position des Elternelements, nicht auf die Aktuelle Position. Im genannten Beispiel also auf die Position des blauen Rahmens. Aber auch nur dann, wenn sich der rote Rahmen semantisch innerhalb des blauen Rahmens befindet. Konkret also:
div class=“schwarzer rahmen“
div class=“blauer rahmen“
div class=“roter rahmen“
/div
/div
/div
Befindet sich der rote Rahmen semantisch außerhalb des blauen Rahmens, bezieht sich die relative Positionierung auf den schwarzen Rahmen bzw. auf das Body-Element und somit i.d.R. auf das Browserfenster.
Zudem gib es keinen logischen Grund warum der blaue Rahmen nicht nach oben rutschen sollte wenn vor ihm semantisch kein Element mehr steht. Dies passiert nur dann, wenn der blaue Rahmen irgendwie positioniert wurde (relativ, absolut, usw). Aber dann würde er sich nicht verschieben nur weil der rote Rahmen einen negativen Margin erhält.
Das Beispiel oben bewirkt lediglich das der rote Rahmen nach unten geschoben wird und dann mit dem negativen Margin wieder nach oben. Man könnte den rote rahmen auch weniger weit nach unten verschieben und würde so das gleiche Ergebnis erhalten. Oder den blauen Rahmen gleich nach oben verschieben.
OK. Das war alles vielleicht wissenschaftlich nicht ganz korrekt ausgedrückt.
Der Quelltext sieht so aus:
Das kleine Bild entspricht dem roten Rechteck in der Skizze, das große Bild entspricht dem blauen Rechteck und das äußere div entspricht dem schwarzen Rechteck.
Ohne der Angabe von „margin-top: -16px;“ wäre ein unschöner Platz über dem großen Bild.
Ralf, ich würde mich freuen, wenn du den Quelltext so abänderst, dass er css-technisch wieder Sinn ergibt! Danke.
Na jetzt wird es ein wenig klarer was du vor hattest. Aber dann stellt sich mir erst einmal eine logische Frage: Warum wird das kleine Bild im Quelltext vor dem großen eingefügt wenn es im Design doch nach dem großen erscheinen soll? Schau dir das mal mit abgeschalteten CSS an, du findest kein einziges Element dort wo es sein soll.
Also erst einmal eine logische Reihenfolge erstellen:
Schaltet man jetzt das CSS ab, dann steht schon mal alles da, wo es in etwa hingehört.
Als nächstes gewöhnen wir uns ab Bilder mit Textformatierungen zu positionieren. BR-Tags und P-Tags sind Absatzformatierungen (BR = Break Line (Zeilenumbruch); P = Paragraph (Absatz)). Dein Fehler ist einfach der, das du neben dem Bild noch einen Zeilenumbruch hinter dem Bild hast. Du verschiebst zwar das Bild, jedoch nicht den Zeilenumbruch. Also steht vor dem großen Bild noch ein Zeilenumbruch der das große Bild nach unten rückt. Mach das [br] weg, schon rutscht das große Bild dahin, wo es hin soll.
Nun möchtest du wahrscheinlich zwei Grafiken über einander legen. Also die Lupe über das Produktbild, so wie man es in vielen Online-Shops sieht.
Bilder positioniert man am besten mit CSS. Das machen wir uns leicht indem wir beide Bilder an die gleiche Stelle rücken.
Der Div-Container bildet den Rahmen in dem wir uns bewegen. Damit die Positionierung funktioniert, muss er eine andere Positionierung als die Standard-Einstellung (static) bekommen. Ich habe hier mal „relative“ gewählt, so verhält sich der Div-Container wie ein Text-Absatz. Man könnte ihn auch absolut positionieren. Oder auf der Seite fixieren.
Dann muss man dem Div-Container noch eine Breite und Höhe geben, die verliert er nämlich mit der relativen Positionierung. Würde man dem Div-Container keine Positionierung geben, würde er immer die volle Fensterbreite einnehmen und sich in der Höhe dem Inhalt anpassen.
Dann kommen die Bilder in den Div-Container. Und zwar genauso wie man Fotos auf einem Schreibtisch anordnen würde. Erst das unterste Bild, dann das Bild darüber. In unseren Fall also erst das große Produktbild, dann die kleine Lupe.
Mit den CSS-Anweisunngen „position:absolute; bottom:0; right:0“ sage ich den Bildern das sie am Rand des Div-Containers (absolut zum Div-Container) positioniert werden sollen. Bottom:0 und right:0 besagen lediglich das sie 0 Pixel vom unteren (bottom) und 0 Pixel vom rechten (right) Rand positioniert werden sollen. Man könnte hier auch top und/oder left verwenden, zusätzlich noch Angaben wie weit vom Rand des Div-Containers entfernt.
Dein ursprüngliches Problem war also kein CSS-Problem, sondern lediglich ein vergessener BR-Tag. Da bei dir zufällig die Schriftgröße 16 Pixel betrug, passte es zufällig. Hättest du die Schrift vergrößert oder verkleinert, wäre die Grafik nicht da gelandet wo sie hin sollte.
Denkbar wäre auch folgende Lösung:
Hier habe ich einfach den Hintergrund des Div-Containers mit dem Produktbild gefüllt. Dann habe ich im Div-Container das kleine Bild unten rechts positioniert. Fertig ist die Laube.
Zum einen spart das ein wenig Quellcode (Tipparbeit&Bandbreite). Zum anderen kann man dann die Produktbilder nicht mehr mit einem einfachen Rechtsklick „klauen“. Man müsste im Quelltext die URL des Bildes suchen und dann das Bild runter laden, zuviel Aufwand für die meisten Bilderklauer.
Dies ist aber quasi eine Hardcore-Variante die auf alle Angaben verzichtet die verzichtbar sind. Würde man den Div-Container auch nur einen Pixel breiter machen als die Breite des Produktbildes, gäbe das schon unschöne Effekte.
Hallo Ralf,
vielen Dank für den umfangreichen Beitrag. Du hast mir ein wenig die Augen geöffnet. Jetzt ist mir die CSS-Philosphie ein wenig klarer geworden. Ich denke halt noch zu sehr in den „alten“ css-freien Strukturen.
Ja genau, ich wollte die Lupe über das Bild legen, wie man es in vielen Onlineshops sieht, ohne die Lupe in das Bild fest einbrennen zu müssen.
Du hast Recht. Ich hab das übersehen. Daher der Platz. Ich bin davon ausgegangen, dass die 16Pixel Platz von der Bildhöhe des kleinen Bildes her rühren und nicht meine Zeilenhöhe ist.
Und Ja das formatieren mit und Tags hatte ich an dieser Stelle mißbraucht.
Ralf, dein Ideen sind sehr gut. Ich werde das weiter verfolgen und nochmal überdenken.
Vielen Dank nochmal!