<span> e <img> e CSS

[AnFrusch@pepp]

ciao, la mia situazione è questa,

<div>
<span><img src="......></span>
<h2>
<span>Ma ciao!!</span>
</h2>

</div>

vorrei, tramite fogli di stile, riuscire a sovrapporre h2 e il relativo span, allo span con l'immagine.

Non riesco bene a capire il funzionamento, la dinamica.. ho provato a gestire la cosa con i margin dei due span (mettendo in negativo quello del testo ma cmq mi si piazza sotto)..
c'è un modo per ottenere l'effetto che voglio?
PS: senza mettere l'immagine come bg allo span.

Ciao!

[Marcolino's]

Due o tre cosette, primo non puoi definire <h1><span> ... </span></h1> l'header serve principalmente per creare una frase in evidenza e non deve portare altri elementi del linguaggio al suo interno, quindi la dizione corretta è: <span><h1> ... </h1></span>, anche perchè se vuoi realizzare ciò che intendi tu, lo <span> non sarà mai sovrapposto in quanto sottostà all'header e non alla pagina.
Un foglio di stile semplificato per ciò che vuoi fare tu può essere questo:

img.logo {
position: absolute;
border: none; 
top: 50px;
left: 50px;
z-index: 1
}
h1.logo {
position: absolute;
top: 53px;
left: 60px;
z-index:2
}

Che applicato alla pagina in questo modo:

[img]mia immagine[/img]
<h1 class='logo'>Ma ciao!</h1>

Realizza ciò che vuoi fare tu.
Ovvio le misure non le conosco e quindi sarai tu a doverle definire esattamente.

[AnFrusch@pepp]

Originariamente inviato da Marcolino's
Due o tre cosette, primo non puoi definire <h1><span> ... </span></h1> l'header serve principalmente per creare una frase in evidenza e non deve portare altri elementi del linguaggio al suo interno, quindi la dizione corretta è: <span><h1> ... </h1></span>, anche perchè se vuoi realizzare ciò che intendi tu, lo <span> non sarà mai sovrapposto in quanto sottostà all'header e non alla pagina.

qui si potrebbe discutere, prova a vedere qui: http://pro.html.it/articoli/id_416/i...pag_2/pag.html

per il resto vedrò di farlo funzionare, grazie.

[cristiano_longo]

Concordo con Marcolino. <span> serve a creare una "sottosezione" in un testo in-linea(come DIV nel block-level).

... credo ...

[cristiano_longo]

Dall'articolo che hai citato, neanche questo

<div id="ombra">
    <h2>Html.it</h2>
</div>

a mio avviso ha molto senso. Sarebbe meglio una cosa del tipo

    <h2 id="ombra">Html.it</h2>

[AnFrusch@pepp]

a mio avviso ha molto senso. Sarebbe meglio una cosa del tipo
code:

<h2 id="ombra">Html.it</h2>

[/QUOTE]

..sapresti argomentare questa cosa??
annidare due tag adesso non ha senso?

l'effetto viene creato prorio dal livello a mio avvsio.. poi che abbiano scritto <h2> piuttosto che un [b] ha poca importanza.. mi sembra che tu abbia una visione troppo chiusa circa l'uso dei tag.

buona giornata...

[Marcolino's]

Originariamente inviato da AnFrusch@pepp
qui si potrebbe discutere, prova a vedere qui: http://pro.html.it/articoli/id_416/i...pag_2/pag.html

per il resto vedrò di farlo funzionare, grazie.

No ha ragione anFrush ho sbagliato io, <span> è un inline element, mentre <h1> è un block level element e può contenere altri inline lement come appunto <span>, la lista completa degli inline e dei block level la trovate qui sotto:
block-level elements
inline lements

Mentre l'esempio di html.it viene validato, come si vede nella pagina del validatore W3C Validator

Ma non è finita:
Anche io avevo consigliato di non ricorrere ai livelli perchè per un esempio banale ricorrere ai livelli avrebbe complicato il codice, invece è giusto farvi ricorso perchè è bene distinguere e mettere ordine, quindi il tuo codice diventa:

<div>
<img src="......>
<h2>Ma ciao!!</h2>
</div>

solo perchè è inutile usare uno <span> qui, dato che le stesse impostazioni che davi a <span> le puoi dare direttamente a <img> e <h2>, magari usando delle classi per distinguerli dagli altri elementi uguali della pagina o usando impostazioni inline: <img style=' ... per capirci.

[Marcolino's]

Originariamente inviato da AnFrusch@pepp

..sapresti argomentare questa cosa??
annidare due tag adesso non ha senso?

l'effetto viene creato prorio dal livello a mio avvsio.. poi che abbiano scritto <h2> piuttosto che un [b] ha poca importanza.. mi sembra che tu abbia una visione troppo chiusa circa l'uso dei tag.

buona giornata...

diaciamo che si può fare anche come dice cristiano, ma nell'esempio viene usata una proprietà particolare dei fogli di stile, cioè quella di implementare una specie di oggetto <h2> facente parte solo dell'identificativo div#ombra {}.
Infatti nell'esempio prima viene definita la classe div#ombra e poi viene definita l'oggetto h2 dentro la summenzionata classe, ovvero div#ombra h2 {}.
Attenzione ho usato la parola classe non perchè non sappia che nelle proprietà css # identifichi un identificatore e non una classe, ma perchè volevo chiaramente fare riferimento alla programmazione a oggetti.
I fogli di stile funzioano secondo principi analoghi, infatti si chiamano a cascata proprio perchè chi segue modifica le proprietà di chi lo precede ereditandone gli elementi comuni.

In parole povere nell'esempio riportato da html.it se io avessi scritto un altro <h2> dopo aver chiuso il livello </div> questo sarebbe apparso normale e non avrebbe preso le proprietà di quello definito dentro il livello.
Un poco arzigogolato? Forse ma non è sempre facile spiegare certi concetti.

[AnFrusch@pepp]

sono giunto alla stessa conclusione, grazie Marcolino's!!
ora o stasera mi uardo i link che ci hai passato.

Tnx!

[Marcolino's]

Originariamente inviato da AnFrusch@pepp
sono giunto alla stessa conclusione, grazie Marcolino's!!
ora o stasera mi uardo i link che ci hai passato.

Tnx!

:gren: