Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di bluesy
    Registrato dal
    Oct 2007
    residenza
    Verona
    Messaggi
    12

    Sovrapporre 2 immagini in 1 div

    Sperimento molto per tentare di imparare a gestire i css, a volte però perdo il filo del ragionamento e non riesco ad ottenere cose che in verità credo siano molto semplici.
    Vorrei fare in modo che in un Div (ad esempio nell'Header di una pagina) appaia un'immagine ripetuta in orizzontale 2 o 3 volte, una seconda immagine (un Titolo) dovrebbe invece apparire 1 sola volta, sempre centrata nell’Header e sovrapposta all’immagine ripetuta.
    Evidentemente mi sono perso, nei vari tentativi riesco solo a far apparire a turno 1 sola delle 2 immagini, mai entrambe.
    Potete darmi un consiglio per tornare sulla retta via?
    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Nei CSS2 si puo` definire un'unica immagine di sfondo per ogni blocco.
    Per cui per sovrapporre due sfondi, occorre sovrapporre due blocchi.

    Pero` vedo un errore semantico in cio` che scrivi (o perlomeno in cio` che capisco dal tuo scritto)
    Gli sfondi CSS devono essere usati come sfondi, cioe` come elementi grafici di abbellimento, non possono portare informazioni.
    Per inserire un'immagine che porta informazioni, DEVI usare il tag <img>, e specificare l'alt opportuno (sempre che sia accettabile scrivere un titolo tramite un'immagine: dal punto di vista dell'accessibilita` e` un errore).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it L'avatar di bluesy
    Registrato dal
    Oct 2007
    residenza
    Verona
    Messaggi
    12
    Intanto grazie per la gentile e veloce risposta, credo di non poter inserire qui l'Url, anche se non è un sito commerciale, per cui cercherò di descrivere il problema che vorrei risolvere.
    Nella testata delle mie pagine web c'è un'immagine (640 x 167 pixel) che potrebbe stare benissimo da sola, ma nella quale, in una posizione più o meno centrale, appare anche il titolo del sito. Avevo creato un'immagine che includesse il titolo ovviamente per essere più libero nella scelta del Font, e far apparire questo sempre uguale su qualsiasi PC. Ho impostato nel CSS la ripetizione orizzontale per riempire tutto lo spazio dell'header, però con schermi molto grandi o determinate risoluzioni nella parte destra dello schermo s'intravvede per forza anche una parte del titolo.
    Volevo eliminare questo "errore", avevo pensato di lasciare l'immagine che praticamente fa da sfondo nell'header senza la parte con la scritta del titolo e inserire quest'ultimo come seconda immagine fluttuante e speravo di poter gestire la cosa con una regola nel foglio di stile, ma se ho ben capito posso farlo solo creando un nuovo blocco per l'immagine Titolo e con le relative impostazioni nel CSS per posizionarlo.
    Mi scuso per la lunga spiegazione, spero non abbia confuso ancor di più la situazione, e ancora grazie.

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Mi sonoperso ... Un bel link vale piu` di mille parole.

    Il link si puo` inserire se:
    - non porta a siti vietati dalla policy del sito (pornografia, discriminazione razziale, ...)
    - non e` inserito solo per farsi pubblicita` (spam).

    Mi pare che nel tuo caso serva essenzialmente per sipegare il problema ...
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it L'avatar di bluesy
    Registrato dal
    Oct 2007
    residenza
    Verona
    Messaggi
    12
    Ok, grazie.
    Questo è l'indirizzo con le pagine dove vorrei risolvere il problema: www.seranto.it (è comunque un sito amatoriale senza fini di lucro e assolutamente in regola con le leggi).

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Ora non so se quello che vuoi inserire e` la scritta "Seranio & Band in a Box" oppure qualcos'altro.

    Comunque nel tuo caso potresti fare:
    codice:
    <div id="header">
      <h1><span>Seranio & Band in a Box</span></h1>
    </div>
    con il CSS:
    codice:
    #container {
    	/*margin: 0 30px;*/
    	width: 100%;     /* necessario per poter centrare dopo */
    	position: relative;
    	/* left: 30px; right: 30px;   non ricordo se e` necessario con il position, al posto del margin */
    }
    #header {
    	background-image: url(../images/header.jpg);
    	background-repeat: repeat-x;
    	height: 167px;
    	position: relative;
    	width: 100%
    }
    #header h1 {
    	background-image: url(../images/....jpg);
    	background-repeat: no-repeat;
    	top: 50%;
    	left: 50%;
    	margin-top: -83px
    	height: 167px;
    	margin-left: -(la meta` del width)px;
    	width: ...px;
    }
    #header h1 span {
    	margin: -500px;
    	/* qualcosa per formattare la scritta (per i browser testuali) */
    }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Utente di HTML.it L'avatar di bluesy
    Registrato dal
    Oct 2007
    residenza
    Verona
    Messaggi
    12
    Grazie mille per la dettagliata risposta, ho provato ad inserire i codici così come li hai scritti e tutto funziona con Explorer ma non con Firefox che mi sposta l'header molto in basso. Comunque ho capito qual era l'errore per cui non riuscivo (quasi me ne vergogno a dir il vero!) e adesso con un mix tra il codice che mi hai suggerito e quello che stavo tentando di usare tutto funziona. Ora per colmo di sfortuna mi si è guastato il PC con i software che uso per le pagine web, ma appena risolto i problema finirò il lavoro.
    Grazie ancora

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.