css adattivo alle impostazioni schermo

**xanadu86** · 21-03-2008, 16:05

Salve ragazzi,
ho un problema....vorrei adattare il css del mio sito web a seconda delle impostazioni dello schermo dell'utente.
In partenza ho creato un css per una risoluzione 1280 x 800 ma volevo fare un controllo per adattare la pagina a seconda delle impostazioni dello schermo del navigatore...come posso fare?
devo creare più css? ma come faccio a sapere quale deve essere richiamato?

Grazie a tutti!

**gengix** · 21-03-2008, 16:53

Devi creare un layout fluido:

http://css.html.it/guide/lezione/55/layout-fluido/

**xanadu86** · 21-03-2008, 19:30

ma se voglio una formattazione centrale per ogni risoluzione come posso fare?
mi spiego meglio...le pagine del sito le vorrei centrate...insomma stile html.it per intenderci...

**gengix** · 21-03-2008, 21:41

C'è un po' di contraddizione in quello che dici.
Se un layout è fluido e quindi si estende per tutta la risoluzione dello schermo, nn è che sta a sinistra o a destra o in basso, occupa tutto lo schermo e quindi è centrato per forza.
Se opti per un layout fisso e cioè dai agli elementi delle dimensioni con misure assolute come ad esempio i px, è chiaro che nn può adattarsi alle diverse risoluzioni, 600px sono 600px dappertutto.
Infine esiste il layout elastico che si adatta alle dimensioni del font impostate dall'utente.
Di qui nn si scappa =).

**gengix** · 21-03-2008, 21:43

Altrimenti realizzi un layout dove il contenitore è largo tipo 700px, lo centri in mezzo alla pagina e stai tranquillo che anche chi utilizza una risoluzione a 800px di larghezza lo vede bene.

**fcaldera** · 21-03-2008, 23:10

Originariamente inviato da xanadu86
ma se voglio una formattazione centrale per ogni risoluzione come posso fare?
mi spiego meglio...le pagine del sito le vorrei centrate...insomma stile html.it per intenderci...

ok però per centrare qualcosa devi saperne la larghezza, da qui non si scampa
tale larghezza può essere espressa in pixel o in valori percentuali. Nel primo caso ottieni per forza un layout fisso in cui varia solo lo spazio a destra e a sinistra (in base alla larghezza della finestra del browser dell'utente)

Usando valori percentuali invece puoi avere un layout fluido però questo implica che tutto il layout sia dimensionato così, ad es:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
          <style>
          html, body{
            margin: 0;
            padding : 0;
            width: 100%;
            text-align: center;
          }        


          #cnt {
               width: 85%;
               background: #c2c6c8;
               margin: 0 auto;
               text-align: left;
          } 
          </style>
        <title></title>
    </head

<body>
   <div id="cnt">
      


         contenitore fluido largo l'85% della finestra del browser. Si allarga o si restringe in base
         alla larghezza del browser. 
      </p> 
   </div>
</body>
</html>

Puoi usare eventualmente min-width e max-width per regolare meglio la larghezza minima e massima (tenendo conto delle compatibilità con IE)

**xanadu86** · 22-03-2008, 11:07

ok risolto grazie raga

Discussione: css adattivo alle impostazioni schermo

Strumenti discussione

Ricerca discussione

Visualizza

css adattivo alle impostazioni schermo

Permessi di invio