posizione box contenente banner

netreb

posizione box contenente banner

Salve ragazzi,

su una pagina wordpress ho inserito un banner pubblicitario proprio sotto il menù.

Essendo il banner di larghezza minore al menù ho creato via css un box (di larghezza uguale al menù) con colore background uguale al banner.

Questo il codice:

.boxbanner {
background: #231f20;
width: 930px;
height: 90px;
margin: -20px 0px 20px 210px;
text-align: center;
}

Il problema si presenta quando apro la pagina su dispositivi mobili (telefono, tablet...). La posizione infatti risulta errata, troppo spostata a destra (presumo per la proprietà margin).

Qualcuno potrebbe suggerirmi il modo per evitare questo problema?

Grazie mille.

netreb

Ho risolto copiando alcune proprietà del menù tra cui z-index e auto (per i margini destro e sinistro).

.boxbanner {
background: #231f20;
width: 930px;
height: 90px;
margin: -20px auto 20px auto;
padding: 0;
z-index: 9999;
text-align: center;

}

Non ho idea del perchè ma funziona.:)

lorenzoroma

@netreb said:

Ho risolto copiando alcune proprietà del menù tra cui z-index e auto (per i margini destro e sinistro).

>
.boxbanner {
    background: #231f20;
      width: 930px;
      height: 90px;
      margin: -20px auto 20px auto;
    padding: 0;
    z-index: 9999;
      text-align: center; 
}

>```
Non ho idea del perchè ma funziona.:)



Il secondo "auto" è inutile, con "margin: -20px auto 20px" i browser attribuiscono automaticamente il valore auto al margine sinistro.
Prima avevi dato: "margin: -20px 0px 20px 210px;" cioè 0px al margine destro (quando il valore è 0 è inutile mettere px, 0 è 0 sempre),
e poi 210px al margine sinistro; ora con "auto" in pratica imposti una distanza automatica (e uguale) per il margine destro e quello sinistro, quindi lo centri.

Padding può servire se il .boxbanner eredita un'impostazione di padding.

Lo z-index invece serve quando ci sono due o più elementi che si sovrappongono e non mi sembra questo il caso, da quel che hai scritto.

netreb

Grazie mille Lorenzo,

chiarissimo.