Adattare sito a risoluzione schermo

**Sauron_x** · 29-05-2012, 00:21

Salve a tutti!

Dunque, nel mio sito ho aggiunto una foto gallery tramite un frame. Tutto ok, il problema è che sul notebook con risoluzione 1280X800 si vede sballato.

Per intenderci si sposta anche l'header.

Però regolando il margine sinistro della foto gallery per questa risoluzione si aggiusta tutto.

Quindi non so se dipenda da dare dei valori al frame della fotogallery oppure a tutto il contenuto.

Io attualmente lavoro a 1920X1080 e alla fotogallery ho dato un margine sinistro di 450 pixel che a 1920X1080 va benissimo, su altre risoluzioni ho paura di no.

Vi inserisco il codice html e css che ho messo:

HTML

codice:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="FreeUser" />
    <link href="style.css" rel="stylesheet" type="text/css" />

	<title>Rainbow</title>
</head>

<body>





 
<div id="container">  
 <div id="header">[img]img/logo.png[/img] <form id="cerca" action="" method="post" name="cerca">
 Cerca nel sito<input type="text" name="cerca" size="25px"/>
    </form></div>

      <div id="menu">
      <ul>[*]Home[*]Forum[*]Chat[*]Download [*]Contatti[/list]
    </div>
   
    <div id="col1"></div>
    <div id="corpo"><iframe id="photogallery" src="gallery2/index.html" width="1024px" height="768px"></iframe></div>
    <div id="footer"></div>
  </div>   
  


   
</body>
</html>

CSS

codice:

* {
    
    margin: 0;
    padding: 0;
    
}

body {
    
    background-color: #09151a;
    
}


#container {
    
    
}

#header {
    
    height: 150px;
    background-color: #323232;
}

#cerca {
    
    text-align: right;
    margin: -40px 0px 0px 0;
    margin-right: 30px;
    font-weight: bold;
}

#menu {
        
       height: 50px;
       background-color: #9c0707;
}

#menu ul {
    
    
}

#menu li {
    
    display: inline;
}

#menu a {
    
    font-size: 25px;
    text-decoration: none;
    color: black;
    font-weight: bold;
    line-height: 1.5em;
    padding: 0px 15px 0 15px;
    height: 50px;
    line-height: 50px
    
}

#menu a:hover {
    
    color: white;
    background-color: #323232;
}

#photogallery {
    
margin: 20px 0px 20px 450px;

}

Il contenitore alla fine non so manco se serva dato che avrei intenzione di adattare il contenuto a tutta la pagina.

Che ne pensate?

Grazie mille a chiunque abbia voglia di rispondermi

**Sauron_x** · 29-05-2012, 10:31

Ho provato a lavorare in percentuale come qualcuno suggeriva ed in effetti funziona.

Però in che modo posso rimpicciolire il contenuto quando è necessario? Su risoluzioni inferiori chiaramente.

**ricman** · 29-05-2012, 11:58

Però nel codice che scrivi non vedo percentuali... vabbè.. Se è tutto in percentuale non avrai barre di scorrimento e il sito si adatterà alle varie risoluzioni.

A me personalmente non piace, perchè, a meno che non sia un sito particolare, ogni risoluzione ti mostrerà gli oggetti spostati senza seguire un layout che sia sempre lo stesso.

**Sauron_x** · 29-05-2012, 12:14

Ciao, i valori in percentuale li ho inseriti dopo, ora sembra ok ma non è il risultato che vorrei ottenere.

Nel senso che se io metto più contenuti, tipo gallery, menu vari e altri contenuti all'interno, l'utente alla fine se ha una risoluzione abbastanza bassa si ritroverà a navigare nel sito scrollando tutta la pagina.

Non c'è quindi un modo per rimpicciolire il tutto a seconda delle risoluzioni?

Ora io a 1920X1080 il layout lo vedo benissimo, ma a 1280X800 ho quasi occupato tutto il layout con la gallery e appena metto un menu verticale dovrei usare lo scroll orizzontale per spostarmi.

Qualche idea?

**ricman** · 30-05-2012, 02:19

Originariamente inviato da Sauron_x
Qualche idea?

Facile ma noioso da realizzare...

Prendi il JS, misuri la risoluzione, proponi un file.css anzichè un altro a seconda della risoluzione

**Sauron_x** · 30-05-2012, 12:32

Hmmm quindi javascript e css.

Puoi postarmi il javascript che si adatti alle mie esigenze?

Inoltre con i css cosa devo farci? Ne devo scrivere più di uno e adattarlo alla risoluzione?

Come posso lavorare su questo?

**ricman** · 30-05-2012, 13:41

Ecco qui tutte le risposte
http://javascript.html.it/articoli/l...a-risoluzione/

**Sauron_x** · 30-05-2012, 15:39

Grazie mille, ho provato ma non funziona.

Ho seguito tutto attentamente ma non va.

Penso che abbia qualche problema con i nuovi stili.

Sotto head ho messo:

codice:

 <link href="default.css" rel="stylesheet" type="text/css" title="default" />
    <link href="thin.css" rel="alternate stylesheet" type="text/css"  title="thin"/>
    <link href="wide.css" rel="alternate stylesheet" type="text/css"  title="wide"/>
    <link href="wider.css" rel="alternate stylesheet" type="text/css" title="wider"/>
    
    <script src="scripts/dynamiclayout.js" type="text/javascript"></script>

Ho creato poi per prova solo il css più stretto (Twin)

CSS TWIN

codice:

/* ----- Regole CSS per il layout stretto (thin) ----- */



#header{
width:50%;
}
#menu{
width:50%;
}

#photogallery {
width: 50%;
}

Ho provato con una risoluzione 1280 X 720 sul mio notebook ma nulla. Non da nessun risultato.

Cosa sbaglio? Penso di sbagliare qualcosa nel css

**ricman** · 31-05-2012, 00:12

Se hai chiamato il file "twin" forse ha solo sbagliato a scrivere (è thin).
Se i nomi sono giusti devi controllare meglio il thin a che risoluzione agisce (io non ho letto i dettagli dell'articolo)

**Sauron_x** · 31-05-2012, 02:52

Originariamente inviato da ricman
Se hai chiamato il file "twin" forse ha solo sbagliato a scrivere (è thin).
Se i nomi sono giusti devi controllare meglio il thin a che risoluzione agisce (io non ho letto i dettagli dell'articolo)

Ho sbagliato io a scrivere, i nomi sono giusti.

Il file twin agisce a risoluzioni inferiori a 750, ho provato ma non produce nessun risultato a 1280 X 720.

L'articolo dice che non è necessario lavorare sul foglio di stile primario ma per le altre risoluzioni si può adattare il contenuto con pochi selettori ma non riesco a capire cosa sbaglio.

Discussione: Adattare sito a risoluzione schermo

Strumenti discussione

Ricerca discussione

Visualizza

Adattare sito a risoluzione schermo

Permessi di invio