Stile titolo come nell'esempio allegato. come fare?

**spiadadda** · 03-12-2009, 15:55

Ciao a tutti,
vorrei creare uno stile per i titoli un pò particolare e più precisamente come nell'immagine allegata.
In pratica come potrete vedere voi stessi il mio intendo è quello di inserire una semplice riga orizzontale alla destra del titolo e che vada ad occupare quindi lo spazio lasciato vuoto (a destra del ttitolo) dal testo che costituisce il titolo stesso.

E' possibile farlo? Qualche idea o suggerimento?

Se è possibile mi piacerebbe utilizzare il tag H1(soprattutto per una questione di indicizzazione nei motori) ma se proprio non si può non fa nulla e va bene in qualsiasi altro modo.

Ciao

**Mich_** · 03-12-2009, 16:33

Ci sono alcuni modi di realizzarlo. Ecco un paio di esempi

1.

codice:

<h1>tuotitolo<span> </span></h1>

h1 {
  width: 100%;     /* oppure vedi tu, ma deve essere definito */
  font: ...;
}
h1 span {
  background-image: url(...);   /* l'immagine di un puntino */
  background-repeat: repeat-x;
  background-position: center left;
}

2.

codice:

<h1<span>tuo titolo</span></h1>

h1 {
  width: 100%;     /* oppure vedi tu, ma deve essere definito */
  font: ...;
  background: ... /* vedi sopra quello dello span */
}
h1 span {
  background: white;  /* o colore che vuoi */
}

Nota che i due metodi sono diversi: nel primo l'immagine e` ripetuta nello span aggiunto, nel secondo l'immagine e` nell'h1 e coperta dal testo nello span

**spiadadda** · 03-12-2009, 16:58

Grazie 100 per il suggerimento.

Ero riuscito ad arrivare anche io al secondo metodo, ma il primo che hai postato mi sembra davvero migliore poichè ti permettere di aggiungere la riga (mediante il <span>) solo quando vuoi e non sei obbligato ad avere la riga in tutti i titoli.

Ma funziona il primo metodo? Io ho provato e riprovato e non mi compare nulla...

**spiadadda** · 03-12-2009, 17:06

Ecco il codice css:

codice:

h1{	
	width: 100%;
	border: 0px;
	line-height: 18px;
	padding: 0px;
	font-size: 16px;
	font-style: normal;
	color: #CC6699;
	text-align: left;
	margin: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 30px;
}
h1 span{
	background-image: url(/immagini/prova.jpg);
	background-repeat: repeat-x;
	background-position: left center;
}

Codice HTML

codice:

<h1>Titolo di Prova <span> </span></h1>

Ma la linea non viene visualizzata..... sbaglio io?

**Mich_** · 03-12-2009, 17:10

Anzitutto ci deve essere qualcosa dentro lo span (uno spazio dovrebbe bastare, ma se non si vede nulla prova con un &nbsp;), altrimenti i browser possono ignorare l'oggetto.
E poi occorre anche definire qualche dimensione. Probabilmente puo` bastare:

codice:

h1 span{
	background-image: url(/immagini/prova.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	display: block;
	margin: auto 0;
}

**spiadadda** · 03-12-2009, 17:19

facendo

codice:

h1 span{
	background-image: url(/immagini/prova.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	display: block;
	margin: auto 0;
}

e aggiundendo <span> </span>, la linea viene visualizzata ma a causa della classe la linea viene visualizzata come blocco e quindi visualizzata non più sul lato destro ma su una nuova riga. Ora sta a far visualizzare la linea a destra del titolo e non su una nuova riga.

**Mich_** · 03-12-2009, 17:37

Ha pure ragione ..
Occorre aggiungere
float: left;
(e a questo punto il display si puo` anche togliere, dato che un oggetto float e` sempre block).

Poi forse occorre aggiungere un pleonastico
display: inline;
che serve solo per dare un contentino ad IE6 (evitare uno dei suoi bachi)

**spiadadda** · 03-12-2009, 17:50

No non vuole proprio funzionare!

Aggiungendo il float non viene visualizzata

**Mich_** · 03-12-2009, 18:25

Ho provato anch'io e in effetti non va.
Invece l;'altro metodo funziona al primo colpo.

Ecco il mio codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>prova</title>
    <style type="text/css">
    /*<![CDATA[*/
	html, body {
	    width: 100%;
	}
	h1.uno {
	    width: 100%; 
	    float: left;
	    font-size: 2em;
	    background: red;
	}
	h1.uno span {
	    background-image: url(puntino.png);
	    background-repeat: repeat-x;
	    background-position: center left;
	    background-color: green;
	    float: left;
	    display: inline;
	    margin: auto 0;
	}
	h1.due {
	    width: 100%; 
	    font-size: 2em;
	    background-image: url(puntino.png);
	    background-repeat: repeat-x;
	    background-position: center left;
	    background-color: red;
	}
	h1.due span {
	    background-color: green;
	    padding: 0 .2em;
	}

    /*]]>*/
    </style>
</head>
<body>
<h1 class="uno">Titolo di Prova 1<span></span></h1>


spazio</p>
<h1 class="due"><span>Titolo di Prova 2</span></h1>


ciao</p>
</body>
</html>

Discussione: Stile titolo come nell'esempio allegato. come fare?

Strumenti discussione

Ricerca discussione

Visualizza

Stile titolo come nell'esempio allegato. come fare?

Permessi di invio