nicht angemeldet
Abstand nach links in Abhängigkeit von der Breite
Hallo,
ich habe ein Bild (<img>) innerhalb einer Überschrift (<h1>). Ich wollte, dass das Bild einen Abstand zum linken Rand (beispielsweise 8em) besitzt. Jedoch sollte dieser Abstand bis auf 0 schrumpfen, falls der Viewport nicht mehr groß genug ist, das Bild (inklusive Abstand) komplett darzustellen.
Der Abstand des Bildes zum linken Rand soll maximal bis auf 0 schrumpfen, danach wird das Bild eben rechts abgeschnitten.
Meine Frage ist nun, ob das irgendwie mittels CSS zu bewerkstelligen ist.
Ich habe natürlich schon experimetiert mit width, min-width, floats etc., bin aber zu keinem Ergebnis gekommen, aus dem ich irgendwelche Schlüsse hätte ziehen können, außer dass sich Opera und Firefox jedesmal völlig unterschiedlich verhalten (wobei ich hier noch keinem von beiden Fehlverhalten unterstellen möchte ;)
Danke schonmal im Voraus für jegliche Hilfe
-
Hi fraga,
Du könntest mit JS die Breite des Viewports auslesen und entsprechend eine Styleanweisung schreiben. Klingt für mich nicht nach einer guten Idee...
Viele Grüße
Mathias Bigge-
Du könntest mit JS die Breite des Viewports auslesen und entsprechend eine Styleanweisung schreiben.
Eigentlich wollte ich auf JS ja verzichten, da es sich hier ja weniger um interaktive Elemente als vielmehr um ein Designproblem handelt, welches meiner Meinung nach in den Aufgabenbereich von CSS fallen würde.
Aber wenn sich mein Anliegen nicht mit purem CSS regeln lässt, werde ich vielleicht doch ein kleines Skript schreiben.
-
-
Hallo,
ich habe ein Bild (<img>) innerhalb einer Überschrift (<h1>). Ich wollte, dass das Bild einen Abstand zum linken Rand (beispielsweise 8em) besitzt. Jedoch sollte dieser Abstand bis auf 0 schrumpfen, falls der Viewport nicht mehr groß genug ist, das Bild (inklusive Abstand) komplett darzustellen.
Wenn der Abstand nicht _genau_ maximal 8em sein muss, könntest Du, mit margin-left in % für das Bild, ein ähnliches Verhalten erzeugen. Bei Viewportverkleinerung verringert sich die Ausgangsgröße für die Prozentangabe bei margin-left, bei Viewportvergrößerung vergrößert sie sich. Allerdings, bei kleinen Viewports natürlich nicht auf 0, sondern nur auf nahe 0 und bei großen Viewports nicht auf _genau_ 8em.
viele Grüße
Axel
-
Wenn der Abstand nicht _genau_ maximal 8em sein muss, könntest Du, mit margin-left in % für das Bild, ein ähnliches Verhalten erzeugen.
Danke, so habe ich es erstmal umgesetzt, auch wenn es nicht genau das ist, was ich wollte. Das Bild ist nämlich relativ groß, so dass der Abstand nach links nicht "schnell" genug schrumpft.
Ist es denn nicht möglich, _genau_ das von mir beabsichtigte Verhalten mittels CSS umzusetzen?-
Hallo,
Ist es denn nicht möglich, _genau_ das von mir beabsichtigte Verhalten mittels CSS umzusetzen?
Doch. Mit max-width für das H1-Element und text-align:right, so dass das Bild rechtsbündig im H1 steht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
* {font-size:101%;}
h1 {max-width:28em; text-align:right;}
h1 img {width:20em; height:3em;}
-->
</style>
</head>
<body>
<h1><img src="Beispiel.jpg" alt="ein Bild"></h1>
</body>
</html>Leider kann der IE ja in der aktuellen Version kein max-width, und für den Workaround wäre wieder aktiviertes JavaScript nötig.
viele Grüße
Axel
-
Hallo,
vielen Dank erstmal. Das ist ein sehr interessater Ansatz. Und funktioniert auch erstmal soweit.Allerdings hat
h1 img {width:20em; height:3em;}
ja zur Folge, dass das Bild so gut wie immer skaliert wird. Und das sieht eben doch etwas hässlich aus.
-
-
-
-
So, ich hab es nun hinbekommen (für nicht-IEs). Funktioniert aber nur in diesem speziellen Fall, da es mir möglich war dem body ein max-width zuzuweisen und die Überschrift zu positionieren. Wollte ich zwar ursprünglich nicht, aber nur so scheint es möglich zu sein.
Danke nochmal für die Antworten und Denkanstöße!