Just nu i M3-nätverket
Jump to content

Positionering igen


chrille112

Recommended Posts

Hej

 

Jag håller på att göra en panel där det ska ligga erbjudanden på varandra. Varje erbjudanden ska innehålla en bild och en pris-flash.

Bilden ska ligga top 5 left 5, och prisflashen ska ligga ovanpå bilden top 5 right 5.

 

		<div id="adContainer">
			<div class="ad"><img src="images/products/48602_small.jpg" width="94" height="100"><div class="price">24,90</div></div>
			<div class="ad"><img src="
images/products/4258_small.jpg" width="100" height="57"><div class="price">78,00</div></div>
		</div>

 

Jag har inte riktigt lyckats med css:en för detta....

 

#adContainer				{ position: relative; width: 155px; float: left; margin: 0; margin-left: 5px; padding: 0;}
#adContainer .ad			{ width: 100%; margin: 0; padding: 0px; border: 1px solid black; background-color: white; }
#adContainer img			{ position: relative; display: block; top: 0px; left: 0px; padding: 3px; z-index: 1; }
#adContainer .price			{ position: relative; width: 68px; height: 40px; top: 5px; right: 5px; background-image: url('../images/price_flash_small.png'); font-size: 13pt; font-weight: bold; text-align: center; line-height: 40px; display: block; z-index: 99; }

 

Någon som har idéer..?

 

Mvh, Chrille

 

Link to comment
Share on other sites

Jag skulle gjort följande;

Lagt bilden i som en bakgrundbild i ett absolutpositionerat lager, sen i lagret skulle jag lägga min flash som då automatiskt lägger sig över bilden eftersom den är satt till bakgrundsbild. Sen kan man med hjälp av css (eller tabeller för den delen) placera sin flash rätt i lagret.

tänk bara på att flash och transparens inte går hem hos Mac.

 

Vidare skulle jag akta mig för att positionera något lager relativt då det kan tolkas och visas rätt olika hos de olika läsarna/os. Kör med absolute istället eller skit i det är min rekommendation.

 

Lycka till.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...