Indice del forum Olimpo Informatico
I Forum di Zeus News
Leggi la newsletter gratuita - Attiva il Menu compatto
 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

    Newsletter RSS Facebook Twitter Contatti Ricerca
* [CSS] Due immagini come sfondo di uno stesso <div>
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet
Precedente :: Successivo  
Autore Messaggio
Stemby
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)

MessaggioInviato: 20 Ago 2009 18:48    Oggetto: * [CSS] Due immagini come sfondo di uno stesso <div> Rispondi citando

Sono piuttosto niubbo coi CSS, comunque un passettino alla volta sto riuscendo a fare ciò che mi serve.

Per ora non sono riuscito a trovare una soluzione soddisfacente solamente per una cosa: sostanzialmente voglio mettere nella testata del sito soltanto il logo, centrato. Questo logo usa gli stessi colori dello sfondo del sito, quindi devo per forza mettergli al di sotto uno sfondo che contrasti. Accanto al logo voglio mettere una banda (una semplice striscia nera) alta 80px che si adatti alla larghezza dello schermo.

Ovviamente non è possibile assegnare 2 diverse immagini come background-image dello stesso <div>.

Per ora ho risolto in modo "sporco" creandomi una versione del logo con già incluso lo sfondo di contrasto (dimensioni totali: 196x180px), e questo codice:
Codice:

<div id="header"><img src="images/logo_header.png" alt="Logo dell'associazione" /></div>

Codice:

#header {
   background-image: url(images/bar.png);
   background-repeat: repeat-x;
   background-position: center 60px; /* (180 - 80)/2 + 10 */
   height: 190px; /* 180 + 10 */
}

#header img {
   margin-top: 10px;
   position: absolute;
   left: 50%;
   margin-left: -98px;
}


Come già spiegato, quello che vorrei avere nel file XHTML è invece
Codice:

<div id="header"><img src="images/logo.png" alt="Logo dell'associazione" /></div>


Dal punto di vista del navigatore, va già tutto bene; però come soluzione non mi piace, perché se si manda in stampa la pagina, ovviamente viene stampato il logo fasullo con sfondo annesso, e non il vero logo. Stessa cosa se si usa un browser che non supporta i CSS.

Esiste un'alternativa o debbo forzatamente accontentarmi?

Grazie!
Top
Profilo Invia messaggio privato
SverX
Supervisor Macchinisti
Supervisor Macchinisti


Registrato: 25/03/02 12:16
Messaggi: 11809
Residenza: Tokelau

MessaggioInviato: 21 Ago 2009 14:01    Oggetto: Rispondi citando

e fare un div con sfondo il logo dentro un altro div con sfondo l'immagine di fondo? Rolling Eyes
Top
Profilo Invia messaggio privato HomePage
Stemby
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)

MessaggioInviato: 22 Ago 2009 08:35    Oggetto: Rispondi citando

SverX ha scritto:
e fare un div con sfondo il logo dentro un altro div con sfondo l'immagine di fondo? Rolling Eyes

Grazie per la risposta!

Sì, ci avevo pensato, solo che al momento non so farlo... immagino che ci sia la regola "position" implicata, per far sovrapporre i due div, è così?

Tra l'altro "l'immagine di sfondo" è solo una striscia nera, quindi credo che basti impostare "backgroud-color: black", una volta definite le misure del box, per ottenere il risultato voluto, risparmiando anche il download di un'immagine, per quanto minuscola.

Continuo a studiare, ma nel frattempo ogni dritta è benvenuta!

Grazie ancora Very Happy


[EDIT]
Ne approfitto anche per chiarirmi un altro dubbio: qualcuno sa spiegarmi perché questo codice funziona
Codice:

#header img {
   margin-top: 10px;
   position: absolute;
   left: 50%;
   margin-left: -98px;
}


mentre quest'altro
Codice:

#header img {
   margin: 10px auto 0;
}

no? Più precisamente, mi abbassa l'immagine di 10px, ma non me la centra rispetto all'header (che è largo tutta la pagina), bensì me la tiene tutta a sinistra.
[/EDIT]

[RIEDIT]
All'ultimo quesito credo di saper dare una risposta: l'elemento img è un elemento inline. Correggetemi se mi sbaglio. Ostacolo sormontabile usando display=block.
[/RIEDIT]
Top
Profilo Invia messaggio privato
Stemby
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)

MessaggioInviato: 22 Ago 2009 20:18    Oggetto: Risolto! Rispondi citando

Fatto! Ho risolto con questo codice:
Codice:

#header {
   margin-top: 10px;
   /* background-color: black; */
   background-image: url(images/bar.png);
   background-repeat: repeat-x;
   background-position: center 50px; /* (180 - 80)/2 */
   min-width: 540px; /* 500 (photo) + 20*2 (padding) */
}
#header img {
   display: block;
   margin: 0 auto;
   color: black;
   background-color: white;
   padding: 10px 11.5px;
   border: 10px solid;
   /* unofficial border-radius rules */
   -moz-border-radius: 15px;
   -khtml-border-radius: 15px;
}


Pro: ho quello che voglio, in più lo sfondo di contrasto del logo lo creo interamente in CSS.
Contro: uso una regola CSS3 non ancora ufficializzata, implementata con sintassi proprietarie, quindi il mio file .css non è validabile.

Ma va bene così: è una piccola cosa che non influisce sull'usabilità; chi si ostina ad usare IE si dovrà accontentare degli spigoli vivi.


Solo una cosina ancora: mi piacerebbe evitare di usare anche l'altra immagine (bar.png) e fare proprio tutto in CSS. Se/quando riuscirò posterò l'ulteriore evoluzione del codice. Nel frattempo, come sempre, ogni dritta è benvenuta Smile
Top
Profilo Invia messaggio privato
SverX
Supervisor Macchinisti
Supervisor Macchinisti


Registrato: 25/03/02 12:16
Messaggi: 11809
Residenza: Tokelau

MessaggioInviato: 24 Ago 2009 10:17    Oggetto: Rispondi citando

Stemby ha scritto:
Sì, ci avevo pensato, solo che al momento non so farlo... immagino che ci sia la regola "position" implicata, per far sovrapporre i due div, è così?


Non sono un esperto di CSS, -tutt'altro-, ma credo che per avere un div dentro l'altro basta dichiararli così nell'HTML:
Codice:
<div><div> ... </div></div>

e se poi posizioni in modo assoluto quello 'esterno', quello interno lo seguirà, no?
Top
Profilo Invia messaggio privato HomePage
Stemby
Eroe in grazia degli dei
Eroe in grazia degli dei


Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)

MessaggioInviato: 24 Ago 2009 19:52    Oggetto: Rispondi

SverX ha scritto:

Non sono un esperto di CSS, -tutt'altro-, ma credo che per avere un div dentro l'altro basta dichiararli così nell'HTML:
Codice:
<div><div> ... </div></div>

e se poi posizioni in modo assoluto quello 'esterno', quello interno lo seguirà, no?

No, alla fine ho risolto facendo al contrario (posizione assoluta per l'elemento interno):
Codice:

<div id="header">
   <div id="logo"><img src="images/logo.png" alt="Logo dell'associazione" /></div>
<!-- end header --></div>


Codice:

#header {
   margin: 60px 0;
   background-color: black;
   height: 80px;
   min-width: 540px; /* 500 (photo) + 20*2 (padding) */
}

#header img {
   position: absolute;
   top: 10px;
   left: 50%;
   margin-left: -98px;
   color: black;
   background-color: white;
   padding: 10px 11.5px;
   border: 10px solid;
   /* unofficial border-radius rules */
   -moz-border-radius: 15px;
   -khtml-border-radius: 15px;
}


Mettendo il riferimento assoluto al div esterno, tutto quanto viene estratto dal flusso e quindi ciò che segue fa casino. Ma forse perché sono imbranato io, e magari si risolve con un float / clear o qualcosa di simile.

Farò qualche tentativo, perché pur essendo piuttosto soddisfatto, non mi piace il modo con cui ora il logo viene centrato.


[EDIT]
Ok, ce l'ho fatta! Questa volta credo che sia definitivo. Quello che volevo ottenere è esattamente questo:
Codice:

#header {
   margin: 60px 0; /* (180 - 80)/2 + 10 */
   background-color: black;
   height: 80px;
   min-width: 540px; /* 500 (photo) + 20*2 (padding) */
}

#header img {
   display: block;
   margin: 0 auto;
   position: relative;
   top: -50px;
   background-color: white;
   padding: 10px 11.5px;
   border: 10px solid;
   /* unofficial border-radius rules */
   -moz-border-radius: 15px;
   -khtml-border-radius: 15px;
}

L'XHTML è tale e quale a prima.

Notte!
[/EDIT]
Top
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Rispondi    Indice del forum -> Linguaggi per Internet Tutti i fusi orari sono GMT + 2 ore
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi