|
| Precedente :: Successivo |
| Autore |
Messaggio |
Stemby
Eroe in grazia degli dei
Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)
|
 Inviato: 20 Ago 2009 18:48 Oggetto: * [CSS] Due immagini come sfondo di uno stesso <div> |
 |
|
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 |
|
 |
SverX
Supervisor Macchinisti
Registrato: 25/03/02 12:16
Messaggi: 11809
Residenza: Tokelau
|
| Inviato: 21 Ago 2009 14:01 Oggetto: |
|
|
e fare un div con sfondo il logo dentro un altro div con sfondo l'immagine di fondo?  |
|
| Top |
|
|
Stemby
Eroe in grazia degli dei
Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)
|
| Inviato: 22 Ago 2009 08:35 Oggetto: |
|
|
| SverX ha scritto: | | e fare un div con sfondo il logo dentro un altro div con sfondo l'immagine di fondo? |
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 
[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 |
|
|
Stemby
Eroe in grazia degli dei
Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)
|
| Inviato: 22 Ago 2009 20:18 Oggetto: Risolto! |
|
|
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  |
|
| Top |
|
|
SverX
Supervisor Macchinisti
Registrato: 25/03/02 12:16
Messaggi: 11809
Residenza: Tokelau
|
| Inviato: 24 Ago 2009 10:17 Oggetto: |
|
|
| 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 |
|
|
Stemby
Eroe in grazia degli dei
Registrato: 29/07/08 23:55
Messaggi: 78
Residenza: Missaglia (LC)
|
| Inviato: 24 Ago 2009 19:52 Oggetto: |
 |
|
| 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 |
|
|
|
|
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
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
