CSS: gestire i ribbon

I ribbon sono delle immagini di sfondo che creano l'effetto di una banda avvolta intorno ad un contenitore (da cui il nome, che significa fiocco). Con i CSS non dobbiamo fare altro che usare il posizionamento relativo per permettere all'elemento che ha quest'immagine di sfondo di posizionarsi oltre i limiti del suo genitore. Vediamo come.

Partiamo da questa struttura HTML:

<div id="container">
  <h1 id="title">Titolo</h1>
  <ul id="navigation">
  	<li><a href="#">Home</a></li>
  	<li><a href="#">About</a></li>
  	<li><a href="#">Servizi</a></li>
  	<li><a href="#">Prodotti</a></li>
  	<li><a href="#">Info</a></li>
  	<li><a href="#">Contatti</a></li>
  </ul>
</div>

Per prima cosa assegniamo degli stili alla pagina, al titolo e al contenitore generale:

body {
	margin: 0;
	padding: 0;
	background: #423e34;
}

#container {
	width: 604px;
	height: 599px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -299px 0 0 -302px;
	background: url(img/box.png) no-repeat;
	font: 100% Georgia, serif;
}

#title {
	margin: 0;
	font-weight: normal;
	font-size: 2.5em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding-top: 30px;
	color: #fff;
}

Il contenitore è largo 604 pixel, ma il ribbon è largo 716 pixel. Per posizionarlo esattamente dobbiamo sottrarre alla larghezza del ribbon la larghezza del contenitore e poi dividere il valore ottenuto per due. In questo caso il risultato è 56 pixel. Useremo quindi questo valore in modo negativo con la proprietà left:

#navigation {
	margin: 2em 0 0 0;
	padding: 0;
	list-style: none;
	height: 73px;
	width: 716px;
	position: relative;
	background: url(img/menu.png) no-repeat;
	left: -56px;
	text-align: center;
	line-height: 50px;
}

#navigation li {
	display: inline;
	padding-right: 1em;
}

#navigation a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
}

#navigation a:hover {
	color: #000;
	text-shadow: 1px 1px 1px #fff;
}

Ricordate che il contenitore dell'elemento avente il ribbon non dovrebbe avere la proprietà overflow impostata su hidden, perchè se così fosse l'elemento non verrebbe mostrato nella sua interezza.

Potete visionare l'esempio finale in questa pagina.