Quesito elementare su contenitore centrato

**lessicoitaliano** · 16-03-2018, 10:01

Buongiorno a tutti, mi scuso per la banalità della mia domanda.

Se creo uno script HTML di questo tipo:

codice:

<body>
 <div id="contenitore_fluido_90pc">
 <div>
    PROVA
  </div>
 </div>        <!-- Chiusura contenitore_fluido    -->

e nel css scrivo:

codice:

#contenitore_fluido_90pc {        /* contenitore fluido sito responsive */
    position: absolute;
    padding-right: 15px;  
    padding-left: 15px;  
    margin-right: auto;  
    margin-left: auto;
    background-color: #dff9e4;
    width: 90%;
}

Mi aspetterei di vedere una colonna centrata di colore verdino larga il 90% dello schermo: ma questo non succede. Chi vuole spiegarmi perché?

Grazie mille...

**fcaldera** · 16-03-2018, 10:59

Originariamente inviata da lessicoitaliano

Buongiorno a tutti, mi scuso per la banalità della mia domanda.

Se creo uno script HTML di questo tipo:

<body>
<div id="contenitore_fluido_90pc">
<div>
PROVA
</div>
</div> 

e nel css scrivo:

#contenitore_fluido_90pc { /* contenitore fluido sito responsive */
position: absolute;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color: #dff9e4;
width: 90%;
}

Mi aspetterei di vedere una colonna centrata di colore verdino larga il 90% dello schermo: ma questo non succede. Chi vuole spiegarmi perché?

Grazie mille...

perché il posizionamento assoluto rimuove dal flusso l'elemento e l'algoritmo che si occupa di visualizzarlo lo sposta completamente a sinistra. Per questo motivo i margini automatici a destra e a sinistra non possono funzionare. quindi o rimuovi il posizionamento oppure centri il contenitore spostandolo da sinistra per il 5%

Le specifiche che possono interessarti sono https://www.w3.org/TR/CSS21/visuren....tioning-scheme e https://www.w3.org/TR/CSS21/visudet....replaced-width (per capire quali regole determinano il posizionamento di un elemento absolute)

**Roby140569** · 16-03-2018, 11:03

Se modifichi così il CSS, vedi la colonna al centro.

codice:

#contenitore_fluido_90pc {
  background-color: #dff9e4;
  width: 90%;
  margin:0 auto;
}

**lessicoitaliano** · 16-03-2018, 11:55

Grazie per l'utilissima e circostanziata spiegazione che, insieme a quella di Roby140569, mi ha risolto il dubbio.
Buona giornata.

**lessicoitaliano** · 16-03-2018, 11:57

Grazie per l'utilissima e circostanziata spiegazione che, insieme a quella di fcaldera - che ha fornito anche un importante chiarimento teorico - mi ha risolto il problema.
Buona giornata.

**lessicoitaliano** · 16-03-2018, 12:07

Salve, sono di nuovo lessicoitaliano.

In attesa di trovare il "coraggio" per andare a studiare le specifiche del W3C che mi hai suggerito

, spero di poter approfittare ancora della tua competenza per porre una domanda di carattere più generale-teorico: accingendomi a ricostruire il mio sito in modo che sia responsive e mobile-friendly, ritieni che sia una scelta valida quella di posizionare in modo assoluto il contenitore generale di tutti gli elementi HTML (quello che discende direttamente da BODY), oppure no?

Saluti, LI

**fcaldera** · 16-03-2018, 13:55

Originariamente inviata da lessicoitaliano

Salve, sono di nuovo lessicoitaliano.

In attesa di trovare il "coraggio" per andare a studiare le specifiche del W3C che mi hai suggerito

, spero di poter approfittare ancora della tua competenza per porre una domanda di carattere più generale-teorico: accingendomi a ricostruire il mio sito in modo che sia responsive e mobile-friendly, ritieni che sia una scelta valida quella di posizionare in modo assoluto il contenitore generale di tutti gli elementi HTML (quello che discende direttamente da BODY), oppure no?

Saluti, LI

non esistono a priori modi corretti o sbagliati di posizionare le cose, nel momento in cui sai esattamente cosa stai facendo e sai come gestirle, però esistono vantaggi ed opportunità di scegliere un modo oppure un altro

Per esempio, quale vantaggio avresti a posizionare in absolute il contenitore generale?

**lessicoitaliano** · 16-03-2018, 18:03

Originariamente inviata da fcaldera

non esistono a priori modi corretti o sbagliati di posizionare le cose, nel momento in cui sai esattamente cosa stai facendo e sai come gestirle, però esistono vantaggi ed opportunità di scegliere un modo oppure un altro

Per esempio, quale vantaggio avresti a posizionare in absolute il contenitore generale?

Sì, capisco (o, almeno, mi sforzo di farlo).

Nel mio caso, sopra al logo in cima alla home page, che occupa la parte superiore di un box posizionato in modo assoluto, devo inserire a dx e a sn due bandierine, italiana e inglese, ancorate alle rispettive versioni. Risolvo il problema attribuendo alle icone-bandierine uno z-index maggiore di quello del logo.

Una ragione di carattere più generale, poi, e che il mio contenitore assoluto deve essere "una certezza", rispetto alla quale io possa posizionare tutti i contenuti...

Discussione: Quesito elementare su contenitore centrato

Strumenti discussione

Ricerca discussione

Visualizza

Quesito elementare su contenitore centrato

Sito responsive: conviene il posizionamento assoluto del contenitore generale?

Permessi di invio