grafik mit gleichem abstand zum linken und rechten rand

[Lisa]

hallo!

ich hab eine grafik, die ich mit einem abstand von 50px vom linken und 50px vom rechten rand in mein html-dokument einbauen moechte. wie kann ich das machen?? ich bekomme es nur mit einer seite hin..

lg,
lisa

[Phil]

Hallo,

rein theoretisch gesehen, garnicht. Ein Bild hat eine feste Größe, in Pixeln. Soll dieses Bild jetzt genau 50px von beiden Seiten entfernt sein, müsstest du ja erstmal die Bildschirmauflößung deiner Besucher beinflussen können, oder via Javascript ein fenster in einer bestimmten Größe öffnen.

du kannst dem Bild aber den entsprechenden zu den äußeren Elementen verpassen:

style="margin-left: 50px; margin-right: 50px;"

Gruß

Phil

[Chräcker Heller]

Hallo,

Ein Bild hat eine feste Größe, in Pixeln.

äh, ja? ich müste doch auch beim image-Tag %-Werte eingeben (habs jetzt nicht ausprobiert), dann skaliert der Browser das Bild entsprechend. Bei einfarbigen Bildern, unsichtbaren Gifs oder Bildern, die nur aus waagerechten monochromen Streifen besteht könnte das "optisch" gehen...

Chräcker

[Siechfred]

Hallo Chräcker.

ich müste doch auch beim image-Tag %-Werte eingeben (habs jetzt nicht ausprobiert), dann skaliert der Browser das Bild entsprechend.

Ja, entsprechend der Bildgröße, denn die Prozentangaben beziehen sich bei Bildern IIRC immer auf deren Originalgröße, nicht auf die Dimensionen des übergeordneten Elementes (siehe W3C: replaced elements).

Bei einfarbigen Bildern, unsichtbaren Gifs oder Bildern, die nur aus waagerechten monochromen Streifen besteht könnte das "optisch" gehen...

IMHO müsstest du hier "kacheln" oder einfach die entsprechende Hintergrundfarbe definieren.

Freundschaft!
Siechfred

[Cheatah]

Hi,

Ja, entsprechend der Bildgröße, denn die Prozentangaben beziehen sich bei Bildern IIRC immer auf deren Originalgröße, nicht auf die Dimensionen des übergeordneten Elementes

nö, siehe http://www.w3.org/TR/CSS21/visudet.html#x5.

Cheatah

[Siechfred]

Hallo Cheatah.

nö, siehe http://www.w3.org/TR/CSS21/visudet.html#x5.

Oder vielleicht doch: http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width?

Freundschaft!
Siechfred

[Cheatah]

Hi,

Oder vielleicht doch: http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width?

wir reden davon, den Wert der width-Eigenschaft _nicht_ auf 'auto' zu lassen, sondern in Prozent anzugeben.

Cheatah

[Siechfred]

Hallo Cheatah.

wir reden davon, den Wert der width-Eigenschaft _nicht_ auf 'auto' zu lassen, sondern in Prozent anzugeben.

Ich gebe mich geschlagen. Vielleicht sollte ich mich wirklich besser aus CSS-Threads raushalten :-)

Freundschaft!
Siechfred

[Cheatah]

Hi,

Vielleicht sollte ich mich wirklich besser aus CSS-Threads raushalten :-)

tu's bitte nicht. Aus Fehlern - auch und gerade aus Verständnisfehlern - wird man schließlich klug; auch, wenn ich an das Archiv denke, aus den Fehlern anderer. CSS ist komplex genug, um Irrtümer und Missverständnisse zu provozieren - wie soll man diese ausräumen, wenn man sie nicht mal erkennt?

Ich selbst habe aus Fehlern am meisten gelernt. Sowohl aus meinen eigenen, als auch aus denen, auf die ich dann eingegangen bin. Wenn Du Dich aus CSS-Threads raushälst, verdummen wir also beide ;-)

Chea "Boah, bin ich heute wieder diplomatisch! *g*" tah

[Cheatah]

Hi,

Ein Bild hat eine feste Größe, in Pixeln.

das Replaced Element, in welchem sich das Bild befindet, hat auch eine Größe, welche nichts mit der seines Inhaltes zu tun haben muss.

Soll dieses Bild jetzt genau 50px von beiden Seiten entfernt sein, müsstest du ja erstmal die Bildschirmauflößung deiner Besucher beinflussen können, oder via Javascript ein fenster in einer bestimmten Größe öffnen.

Beides ist Unfug; ersteres schon allein wegen des Begriffes "Bildschirmauflösung".

du kannst dem Bild aber den entsprechenden zu den äußeren Elementen verpassen:

Oder es einfach so positionieren, wie es das W3C vorsieht.

Cheatah

[Pidder Lüng]

Hallo Lisa,

während Phil und Chräcker ihre Antworten gepostet haben, habe ich noch ausprobiert. Daher jetzt etwas redundant, doch gleichwohl:

Die Style-Angabe: width:100%;margin-left:50px;margin-right:50px bezogen auf das Bild um das es geht müsste den von dir gewünschten Effekt bewirken.

Viele Grüße

Pidder Lüng

[Cheatah]

Hi,

Die Style-Angabe: width:100%;margin-left:50px;margin-right:50px bezogen auf das Bild um das es geht müsste den von dir gewünschten Effekt bewirken.

damit wäre das Bild-Element 100 Pixel breiter als das umgebende Element.

Cheatah

[Pidder Lüng]

Hallo Cheatah,

wird der margin tatsächlich addiert? Mag sein, habe ich jetzt nicht nachgelesen, sondern nur "quick and dirty" ausprobiert und auch nur im IE (weil grad an einem rechner, wo nichts anderes drauf ist). Und da gehts bei folgendem Quellcode:

<title>Ein test</title>
<style type="text/css">
body {background-color:red}
img {width:100%;margin-left:50px;margin-right:50px}
</style>
<p>Hallo, Welt!</p>
<p>
<img src="narzissen.jpg" alt="narzissen">
</p>

Gruß

Pidder Lüng

[MudGuard]

Hi,

wird der margin tatsächlich addiert?

Ja.

Mag sein, habe ich jetzt nicht nachgelesen, sondern nur "quick and dirty" ausprobiert und auch nur im IE

Ganz schlechte Idee - weil der von den aktuellen Browsern (ok, IE ist nicht aktuell, und ob es ein Browser ist, wird auch von einigen angezweifelt) die CSS-Umsetzung mit den meisten Fehlern hat.

Insbesondere hat er in den meisten Versionen/Modi einen Bug, der genau diese Berechnung der Boxgröße falsch macht.

cu,
Andreas

[Pidder Lüng]

Hallo Andreas,

Ganz schlechte Idee - weil der von den aktuellen Browsern (ok, IE ist nicht aktuell, und ob es ein Browser ist, wird auch von einigen angezweifelt) die CSS-Umsetzung mit den meisten Fehlern hat.

ok, ich gebe mich geschlagen - und auch, weil ich bei meinem Test nicht einmal den Standard Compliant Modus benutzt habe...

Gruß

Pidder Lüng