Een hoek-banner maken

Je komt ze soms tegen, een banner (of hoe het ook moge heten) die helemaal in de hoek staat in een schuine positie. Maar hoe komt hij daar zonder het design te moeten aanpassen ?

Een banner in de hoek zetten.

Benodigheden.

  1. XHTML
  2. CSS
  3. Een afbeelding

Een afbeelding.

Een voorbeeld van een hoek banner

Zoals gewoonlijk heb ik een voorbeeld gemaakt en mag je deze afbeelding “stelen”, download daarvoor het PSD-bestand , dan kan je het aanpassen naar je wensen.

Even voor alle duidelijkheid: Als je de afbeelding bewerkt, sla hem dan op als een .gif, omdat IE nog steeds geen .png ondersteund, en ook omdat we dan geen extra CSS moeten toepassen om .png wel te doen werken op IE.

Keuze mogelijkheden genoeg.

Je kan deze afbeelding plaatsen waar je maar wil, links-boven, rechts-boven, onderaan zou ik je afraden, daar zien niemand hem direct.

Onze Xhtml structuur

Plaats volgende code ergens tussen je <body>, omdat we deze gaan absolute positioneren met CSS heeft de structurele plaats geen invloed

<div id="ribbon"
onclick="document.location='http://www.uwlink.be'">
</div>

Ja, dat is het, had je meer verwacht ?

Eeuuhhm…is het dat Sorry om je te moeten teleurstellen maar

Ik weet wel dat structuur en behavior nu niet gescheiden zijn, maar daar gaan we ons nu eens lekker niets van aantrekken.

Den Css toepassen

In dit voorbeeld heb ik een achtergrondkleur toegepast in de afbeelding, dus ook als de achtergrondkleur gezet in het document, dit kan je natuurlijk aanpassen naar je wensen.

Om de afbeelding links-boven te hebben:

body, html {
background-color: #D6CACC;
}
#ribbon {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
cursor: hand;
cursor: pointer;
background : url(pad/naar/je/afbeelding.gif) no-repeat fixed;
}

Om de afbeelding rechts-boven te hebben:

body, html {
background-color: #D6CACC;
}
#ribbon {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
cursor: hand;
cursor: pointer;
background : url(pad/naar/je/afbeelding.gif) no-repeat fixed;
}

Een voorbeeld.

Om te bewijzen dat het ook echt werkt heb ik dit voorbeeld gemaakt, en geen zorg, het ziet er in Opera, FireFox en Internet Explorer allemaal hetzelfde uit.