2 biler åvanpå en bild, olika positioner

6 svar · 444 visningar · startad av Hampan90 11 maj 2008

Hampan90Medlem sedan feb. 2007137 inlägg

Frågan11 maj 2008 09:38#1

Hallå, har ett litet problem åt er här :D

Jag har en bild som sedan ska få runda hörn av att jag lägger 2 png:s åvanpå denn bild. PNG har vita hörn och är i övrigt genomskinliga. Så när de ligger åvanpå bilden så kommer bilden att få runda hörn.

Men, de ska ju ligga åvanpå bilden, och i en viss position. Den ena PNG högst upp, den andra längst ner.
Hur ska jag göra detta?
Min nuvarnade kod funkar, men då måste bilden vara 220px hög, men jag vill att den ska kunna vara hur hög som hälst.

Kod:

<div class="big_picture big_picture_bottom">
     <img src="Images/images/info.jpg" class="big_image" alt="" />
     <div class="big_image_corner_top"><img src="Images/layout/big_picture_top.png" alt="" /></div>
     <div class="big_image_corner_bottom"><img src="Images/layout/big_picture_bottom.png" alt="" /></div>
    </div>

CSS:

.big_picture{ width: 565px; }
.big_image{ z-index:0; }
.big_image_corner_top{ height: 10px; font-size:10%; position:relative; top:-225px; }
.big_image_corner_bottom{ height: 10px; font-size:10%; position:relative; top:-23px;  }

tantenMedlem sedan nov. 20051 596 inlägg

11 maj 2008 10:42#2

Låter som det hela är en bakgrund?
Ett förslag är att du gör om din bild och lägger in de runda hörnen där de ska vara redan i bildprogrammet. Mindre risk att det blir konstigt i olika webläsare och eventuella zoomningar då. Sedan bör man undvika alla sorters bilder som inte är relevanta för innehållet direkt i html. Bättre att ha dem i css...
sedan

<div id="sidan">
<div class="topdelen"></div>
<div class="expanderanerdelen">innehållet i headers och paragrafer</div>
<div class="bottendelen"></div>
</div>

och cssväldigt kort med alltihop centrerat och bredden du hade på bilden.

#sidan{ margin: 0 auto; width: 565px; }
.topdelen{ background: url(bilder/toppen.png) no-repeat top; height: 10px; }
.expanderanerdelen{ background: url(bilder/mitten.png) repeat-y top; }
.bottendelen{ background: url(bilder/botten.png) no-repeat top; height: 10px; }

Hampan90Medlem sedan feb. 2007137 inlägg

11 maj 2008 11:08#3

Det är ingen bakgrund, utan en bild. En bild som är rellevant för sidan.

Anledningen är att bilderna som är på sidorna ska ha rundade hörn, utan att den som lägger upp bilderna på sidan behöver kunna nått om Photoshop...

tantenMedlem sedan nov. 20051 596 inlägg

11 maj 2008 11:12#4

Aha såg resten av ditt inlägg nu... tror du kan få problem med det... Inget jag kan svara på direkt, men... ska du få någonting sånt att fungera så råder jag dig att se till att du har IE6 på datorn, för dessa placeringar med -placeringar osv skiljer sig mycket från andra webläsare + att du ska ha med fixar för IE6... så det inte blir grått i stället för transparans... mer om det kan du läsa i andra inlägg här från något, några år tillbaka i tiden...

jarvkloMedlem sedan juli 20013 378 inlägg

11 maj 2008 20:50#5

Hampan90 skrev:

Min nuvarnade kod funkar, men då måste bilden vara 220px hög, men jag vill att den ska kunna vara hur hög som hälst.

Hmm...

En lösning är att ändra angrepssättet så att du använder position: relative och position:absolute tillsammans.

Bägge är ju i någon mening "relativ positionering"...

Om du ställer in den <div> du har som "container" för alla bilderna till att använda "position:relative" utan att ange nya koordinater, kommer den att bete sig som en "förälder" till bilderna på så sätt att en positionering av dem med position:absolute då kommer att räkna koordinater gentemot föräldern istället för gentemot webbläsarfönstret...

Med lite fiffigt utnyttjande av top, left, right och bottom kan du sedan placera ut de överlappande "hörnbilderna" fritt oberoende av hur hög den första bilden i div:en egentligen är...

Exempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ett av Jarvklos exempel</title>
<style type="text/css">
body {background-color: #ccc;}
.big_picture{ width: 565px; position:relative; }  /* Etablera "positionering" på föräldern */
.big_image{ z-index:0; width:100%;}
.big_image_corner_top{ position:absolute; top:0; left:0; } /* absoluta koordinater gentemot föräldern */
.big_image_corner_bottom{ position:absolute; bottom:0; right:0;} /* absoluta koordinater gentemot föräldern */
</style>
</head>
<body>
<div class="big_picture">
     <img src="enbild.jpg" class="big_image" alt="" />
     <div class="big_image_corner_top"><img src="testbild.gif" alt="" /></div>
     <div class="big_image_corner_bottom"><img src="testbild.gif" alt="" /></div>
</div>

</body>
</html>

Testa!
Nu är iofs inte grafiken jag använder i exemplet så upphetsande, men använder du genomskinliga gif-bilder istället för genomskinliga png-bilder så funkar det här även i MSIE6 såvitt jag har kunnat testa...

Kör du genomskinliga png-bilder för hörnen åker du på problemet att MSIE6 inte hanterar detta och att de "fixar" som finns kan kännas lite grötiga (men det är en annan historia ;) )

Lycka till :bire

Hampan90Medlem sedan feb. 2007137 inlägg

11 maj 2008 20:58#6

Aha, man kunde göra så.. Jag funderade på det där med absolute, men som sagt, då tillämpar den ju sig efter wbbläsarfönstret... Men då vet jag detta trick med att den låser sig vid den andra diven. Då löser det sig :)
Tack!

PS, jag har lite javascript som fixar så att PNG även funkar i IE6

jarvkloMedlem sedan juli 20013 378 inlägg

11 maj 2008 21:03#7

Kanon!

Lycka till :bire