padding sposta l'immagine di background?

**RuggeriExtreme** · 15-12-2012, 19:43

Salve a tutti,
la pagina in questione è questa:
http://pegi3d.altervista.org/

ho un div con position:relative che si allunga in base a quanto scrivo e il background si ripete verticalmente, vorrei sapere perchè il padding aggisce anche sull'immagine di background spostandola a destra o a sinistra.. io vorrei che il padding aggisse solo ed esclusivamente sul testo per specificare che dal bordo del div ci dev'essere un margine vuoto non scritto...
c'è un modo semplice o devo creare altri div interni e posizionarli? ç_ç grazie per l'aiuto.

**Prill** · 15-12-2012, 20:04

Il padding di un elemento non influisce sull'immagine di sfondo dello stesso elemento ma solo sui contenuti al suo interno

**RuggeriExtreme** · 15-12-2012, 20:30

se inserisco padding-left: 20px; si sposta l'immagine di background...

**RuggeriExtreme** · 15-12-2012, 21:02

un altro problema... questo div relativo non ha un div contenitore... perchè non va a capo da solo? se scrivo molto testo dovrebbe fermarsi ed andare a capo una volta finito il div.. invece esce fuori dal DIV e continua..

codice:

    position:relative;
    width:900px;
    top:100px;
    background-image: url('/images/bg_content.png');
    background-repeat: repeat-y;
    margin: 0 auto;

perchè?

**RuggeriExtreme** · 15-12-2012, 21:24

risolti entrambi i problemi

rimane quello della scelta lingue dove la z-index proprio non va...

**Prill** · 15-12-2012, 21:29

Prima di andare a verificare i singoli problemi sarà il caso di aggiungere un Doctype e correggere gli errori nella pagina. Togli quel tag body subito dopo il tag html e mettilo dopo </head>

**RuggeriExtreme** · 15-12-2012, 21:35

se potresti gentilmente spiegarmi il perchè di questa azione, inoltre, ci sono altri errori?

scusa cos'è il doctype e a cosa serve?

**RuggeriExtreme** · 15-12-2012, 21:42

ho messo questa dichiarazione prima del tag html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ho capito a cosa serve ma non ho capito perchè è indispensabile, a livello grafico non è cambiato nulla.

ho messo il body sotto l'head, grazie.

ho capito che serve a definire quale linguaggio di markup stiamo utilizzando al browser, quanto vorrei aver tempo di imparare html 5 *-*. Ho letto che basta inserire <!DOCTYPE html> per iniziare a usare html5.

**Prill** · 15-12-2012, 22:27

Avere un doctype, con l'indirizzo della dtd, serve a dire al browser: usa questo linguaggio di marcatura le cui regole sono definite a quell'indirizzo. Serve a ridurre i margini di interpretazione del browser (ogni browser interpreta e rielabora a proprio modo) e ad avere risultati più affidabili.
L'html5 non è ancora pienamente supportato e va anche bene usare html 4.1 o xhtml.

Venendo al problema, inserisci un div che contenga tutti gli altri e a quello assegna un position:relative:

codice:

#wrapper {
position:relative
}

cambia per .languagebar il posizionamento da relativo ad assoluto e inserisci lì lo z-index

codice:

.languagebar {
    position: absolute;
    width:100%;
    height: 40px;
    top:0;
    left:0;
    background-image: url('images/barra_language.png');
    background-repeat: repeat-x;
    opacity: 0.5;
    z-index:300
}

passa anche la pagina al validatore del w3c perché presenta altri errori (un tag a non può contenere un div, dai piuttosto al link un display:block e le dimensioni volute - ma poiché è preferibile non avere un link vuoto, metti al suo interno direttamente l'immagine che usi come sfondo e non sarà necessario neanche il display block e lo specificarne le dimensioni)

**RuggeriExtreme** · 16-12-2012, 02:28

Originariamente inviato da Prill
Avere un doctype, con l'indirizzo della dtd, serve a dire al browser: usa questo linguaggio di marcatura le cui regole sono definite a quell'indirizzo. Serve a ridurre i margini di interpretazione del browser (ogni browser interpreta e rielabora a proprio modo) e ad avere risultati più affidabili.
L'html5 non è ancora pienamente supportato e va anche bene usare html 4.1 o xhtml.

Venendo al problema, inserisci un div che contenga tutti gli altri e a quello assegna un position:relative:

codice:

#wrapper {
position:relative
}

cambia per .languagebar il posizionamento da relativo ad assoluto e inserisci lì lo z-index

codice:

.languagebar {
    position: absolute;
    width:100%;
    height: 40px;
    top:0;
    left:0;
    background-image: url('images/barra_language.png');
    background-repeat: repeat-x;
    opacity: 0.5;
    z-index:300
}

passa anche la pagina al validatore del w3c perché presenta altri errori (un tag a non può contenere un div, dai piuttosto al link un display:block e le dimensioni volute - ma poiché è preferibile non avere un link vuoto, metti al suo interno direttamente l'immagine che usi come sfondo e non sarà necessario neanche il display block e lo specificarne le dimensioni)

non ho capito a cosa ti riferisci per altri errori.. non ci sono a che contengono div...

funziona, sei un grande anche se non ho capito il perchè... qual'è il validatore del w3c? comunque ho passato un a mettendo un display:block per trasformarlo in blocco come vedi i pulsanti li ho gestiti in maniera molto dinamica e veloce da caricare. Non penso che sia sbagliato mettere in a un displayblock

Discussione: padding sposta l'immagine di background?

Strumenti discussione

Ricerca discussione

Visualizza

padding sposta l'immagine di background?

Permessi di invio