CSS Rolover in responsive HTML tabel

[Verwijderd]

Ik wil enkele rollover buttons toevoegen op de frontpage van mijn website in ontwikkeling dev.grannysfinest.com. De website is responsive waardoor er een andere layout is voor mobile, tablet en desktop.

Om deze responsive banners mee te laten schalen met de grootte van het scherm heb ik deze in een tabel geplaatst met 3 kolommen waarbinnen iedere afbeelding geschaald is op 100% van de breedte. Zodoende schalen ze mee met de breedte van het scherm. Zie hieronder de html tabel met banners zonder rollover effect:

HTML:

<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="http://www.grannysfinest.com/wp/wp-content/uploads/2014/06/Seasonal_Banner1.jpg" alt="Seasonal banner" name="Banner" width="100%" /></td>
<td><img src="http://www.grannysfinest.com/wp/wp-content/uploads/2014/06/MeetDesigner_Banner-copy.jpg" alt="Seasonal banner" name="Banner" width="100%" /></td>
<td><img src="http://www.grannysfinest.com/wp/wp-content/uploads/2014/06/Knitkit_Banner.jpg" alt="Seasonal banner" name="Banner" width="100%" /></td>
</tr>
</tbody>
</table>

Nu wil ik de banners een css rollover meegeven zodat ze meer interactief worden. Hiervoor heb ik in de css een id aangemaakt zoals onderstaand:

Cascading Stylesheet:

#seasonal
{
  display: block;
  width: 100%;
  height: 607px;
  background: url("http://www.grannysfinest.com/wp/wp-content/uploads/2014/07/Seasonal_Banner_2.jpg") no-repeat 0 0;

}

#seasonal:hover
{ 
  background-position: 0 -607px;
}

#seasonal span
{
  position: absolute;
  top: -999em;
}

Mijn vraag is hoe kan ik deze banner laten meeschalen en toch in 1 keer laten inladen?

[JunkieXP]

A. Misschien een Sprite gebruiken (de 2 afbeeldingen combineren en de CSS de zichtbare positie laten veranderen?

B. De afbeelding in een "display: none;" element inladen, al zullen veel browsers hier niet meer in trappen geloof ik.

[Verwijderd]

Optie A had ik gemaakt, zie de CSS file. De uitdaging hierbij zit hem juist in de schaalbaarheid. Doordat er niet met een vaste afmeting wordt gewerkt maar met een % wordt deze optie lastiger.

[Bosmonster]

Zijn tabellen voor opmaak weer terug?

[Verwijderd]

Hallo Bosmonster, wat is je suggestie?

[Bosmonster]

Wat doet de rollover van die banner? Het is een andere afbeelding, maar is dit ook echt nodig vraag ik me als eerste af?

Zeker in responsive wil je de footprint van je site zo klein mogelijk houden en dan complete foto's als rollover gaan preloaden (terwijl op mobiel je niet eens een hover-effect hebt) is dan natuurlijk nogal zonde.

Wat de tabel betreft, je kunt natuurlijk ook gewoon de afbeeldingen naast elkaar floaten (of middels inline-block). Tabellen zijn niet bedoeld voor opmaak.

[ Voor 19% gewijzigd door Bosmonster op 07-07-2014 10:24 ]

[Verwijderd]

Ik wil de banners een "klik hier" tekst meegeven om meer interactie te realiseren. Heb dit nu inderdaad in de afbeelding verwerkt maar kan me voorstellen dat dit ook anders kan.

[Bosmonster]

Een dergelijk vermoeden had ik al.

Je kunt de tekst er ook overheen positioneren en alleen die tekst met css aan/uitzetten. Kun je er zelfs nog een leuke transitie aan meegeven.

Begin eens met het eerste, namelijk de tekst er met css overheen proberen te plaatsen. Dit kun je bereiken met position:relative op de parent en position:absolute op de tekst. (Dit werkt alleen niet op een tabel, dus dat zul je eerst ook moeten aanpassen).

[Verwijderd]

Hier zit inderdaad de moeilijkheid. Ik heb weinig ervaring met responsive design en het ontbreekt me aan fantasie om hier met een goede oplossing te komen waarmee de afbeeldingen meeschalen maar ik toch gebruik kan maken van de px afmetingen in plaats van %.

[rnenator]

Wat html/css only suggesties:
- vaste width container meegeven en in je mediaquerie die background-position juist instellen.
- de rollover met inladen op een plek buiten de layout, position absolute, top - 2000,
- de background-position procentueel aanpassen.
- de rollover als achtergrond van de img inladen en de img display none op hover

[ Voor 4% gewijzigd door rnenator op 07-07-2014 10:33 ]

[Verwijderd]

Als je bootstrap gebruikt of less:

Die hebben een tag content-width in css, misschien is dat iets wat je zoekt.