Problem med bilder (xhtml strict/css)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Dec 2004

Problem med bilder (xhtml strict/css)

Hej, jag har en div som jag vill ska innehålla två bilder. Den ena bilden täcker hela div:ens höjd och ska vara positionerad i mitten. Den andra bilden (egentligen tre bilder av lite olika storlek som kommer växlas) ska vara högerjusterad med en 10 pixels padding mot right och top.
Följande kod ger nästan rätt resultat:

<img src="images/dno.gif" style="float: right; padding-top: 10px; padding-right: 10px;"/> <img src="images/header-image.jpg" style="display: block; margin-left: auto; margin-right: auto;"/>

Problemet är att bilden i mitten blir förskjuten av padding-right den med. Hur gör man så det blir som jag vill ha det? Jag är ingen webprogrammerare och fastnade på den här sista detaljen.

Trädvy Permalänk
Medlem
Plats
Falun
Registrerad
Dec 2003
Citat:

Ursprungligen inskrivet av hivemind
Hej, jag har en div som jag vill ska innehålla två bilder. Den ena bilden täcker hela div:ens höjd och ska vara positionerad i mitten. Den andra bilden (egentligen tre bilder av lite olika storlek som kommer växlas) ska vara högerjusterad med en 10 pixels padding mot right och top.
Följande kod ger nästan rätt resultat:

<img src="images/dno.gif" style="float: right; padding-top: 10px; padding-right: 10px;"/> <img src="images/header-image.jpg" style="display: block; margin-left: auto; margin-right: auto;"/>

Problemet är att bilden i mitten blir förskjuten av padding-right den med. Hur gör man så det blir som jag vill ha det? Jag är ingen webprogrammerare och fastnade på den här sista detaljen.

Padding är vad man skulle kunna kalla en inre marginal. Innehållet i objektet får en marginal mot kanten av objektet. I detta fall är det en bild, alltså inget innehåll. Du ska använda margin istället. Rätta mig om jag har fel och du har tänkt något annat.

Lite enklare att se om du länkar sidan, förutsatt att den är online.

ηλί, ηλί, λαμά σαβαχθανί!?

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Dec 2004
Citat:

Ursprungligen inskrivet av Leedow
Padding är vad man skulle kunna kalla en inre marginal. Innehållet i objektet får en marginal mot kanten av objektet. I detta fall är det en bild, alltså inget innehåll. Du ska använda margin istället. Rätta mig om jag har fel och du har tänkt något annat.

Lite enklare att se om du länkar sidan, förutsatt att den är online.

Tyvärr är den inte online just nu, men jag vet inte riktigt vad som var otydligt: Jag har två bilder: jag vill att ena ska vara centrerad i mitten. Jag vill att den andra ska vara på högersidan, men med 10 pixlars avstånd mot toppen och högerkanten. Koden jag visade flyttar båda bilderna åt vänster, dvs den i mitten är inte längre i mitten.

Klarare? Jag vet inte hur jag annars ska säga det.

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007
Citat:

Ursprungligen inskrivet av hivemind
Tyvärr är den inte online just nu, men jag vet inte riktigt vad som var otydligt: Jag har två bilder: jag vill att ena ska vara centrerad i mitten. Jag vill att den andra ska vara på högersidan, men med 10 pixlars avstånd mot toppen och högerkanten. Koden jag visade flyttar båda bilderna åt vänster, dvs den i mitten är inte längre i mitten.

Klarare? Jag vet inte hur jag annars ska säga det.

#din_div { position: relative; } #mittenbild { margin: 0 auto; } #högerbild { position: absolute; top: 10px; right: 10px; }

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Dec 2004
Citat:

Ursprungligen inskrivet av Teknocide

#din_div { position: relative; } #mittenbild { margin: 0 auto; } #högerbild { position: absolute; top: 10px; right: 10px; }

Hej teknocide och tack för koden, tyvärr blir det inte riktigt rätt i min set-up. Mittenbilden hamnar på vänster sida, men högerbilden ser ut att hamna helt rätt. Så här ser min kod ut:

div#header { border-bottom: solid black; width: 100%; height: 100px; position: relative; } <div id="header"> <img src="images/header-image.jpg" style="margin: 0 auto;"/> <img src="images/dno.gif" style="position: absolute; top: 10px; right: 10px;"/> </div>

Vad gjorde jag för fel? Är det kanske några av mina andra stilar på den div:en som stör eller är det nåt annat som är galet?

Trädvy Permalänk
Medlem
Plats
i din garderob
Registrerad
Sep 2007

Ah, nä det är att img är ett inline-element som rör till det. Jag snackade om det senast igår och idag har jag glömt bort det igen

Följande ser till att dina img-element blir block:

#header img { display: block; }

PS: ett oflutet/statiskt positionerat block-element tar alltid upp 100% av vidden som default; du kan ta bort width: 100%; i CSS:en för din div.

Bilanaloger är som Volvo — varenda svenne kör med dem

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Dec 2004
Citat:

Ursprungligen inskrivet av Teknocide
Ah, nä det är att img är ett inline-element som rör till det. Jag snackade om det senast igår och idag har jag glömt bort det igen

Följande ser till att dina img-element blir block:

#header img { display: block; }

PS: ett oflutet/statiskt positionerat block-element tar alltid upp 100% av vidden som default; du kan ta bort width: 100%; i CSS:en för din div.

Ah, tack nu ser det bra ut och jag har tagit bort width: 100%; som du tipsade om, tack så mycket!