Adattare la pagina web creata ad ogni monitor

[serenaaa]

Buongiorno a tutti,
mi affido al vostro sapere e alla vs gentilezza!
vorrei un suggerimento su come potere adattare la pagina web creata alla grandezza del monitor,
Mi spiego meglio...dal mio pc vedo la mia pagina perfettamente al centro del mio schermo,
da alcuni altri monitor più piccoli, o anche dal mio portatile, capita che escano le odiose barre di scorrimento...
come fare per fare si che le pagine web si adattino ai monitor sui quali vengono visualizzate??
grazie

 

[Nefyt]

Potresti usare un framework client come bootstrap http://twitter.github.com/bootstrap/

 

[serenaaa]

Ti ringrazio , io però uso dreamweaver ed ê già tanto ;-)
Non esiste un codice, qualche trucchetto per ovviare a questo problema?

 

[WpStyle]

Se lo crei in un div a 960/970px più o meno lo vedi in tutti i monitor...
se poi vuoi che si veda correttamente anche nei dispositivi tipo iphone e tablet il consiglio di @Nefyt è una soluzione.

 

[serenaaa]

Grazie dei consigli, proverò a seguire la dritta di Nefyt,
giusto per avere una idea ..
una volta creato il sito con dreamwever come faccio ad
utilizzare "Bootstrap" ?
è un programma che devo scaricare?
o mi genera un codice che andrò poi ad inserire in dreamwever?
ancora grazie

 

[Jonn]

Io farei un DIV contenitore con all'interno tutti i div position quali:

- Header
- Nav Left
- Content
- Nav Right
- Footer

In questo modo basta impostare i margini destro e sinistro su auto con i css:

div.name {margin: 0px auto 0px auto;}

Questo per centrare la pagina lateralmente, se vuoi centrarla in verticale invece non so proprio come aiutarti se non minimamente dicendoti che:
La premessa è che i contenuti non vadano ad influire sulle dimensioni della struttura, per esempio con l'ausilio della proprietà overflow:scroll; in CSS ed impostando dimensioni fisse nei div, una soluzione a parer mio poco professionale, ma che potrebbe funzionare è creare un div con dimensioni width:100%; e height:100%;(che non so se vale per la finestra l'height anche se non credo) e poi metterci all'interno l'intera struttura della pagina, non ho ancora capito bene il funzionamento e quali sono gli elementi blocco quindi per questo non sono sicuro.

Comunque se posso darti un consiglio:
Io eviterei il centramento verticale semplicemente perchè è limitativo nell'evolversi del sito durante la creazione di contenuti, è più laborioso nell'adattamento grafico.

Ciao

 

[WpStyle]

Twitter Bootstrap è un framework CSS.
Si tratta di un sito completo che volendo puoi importare in dreamwever.
Devi prima importare Bootstrap e poi lavorarci su per creare il sito,
Per capire meglio di cosa si tratta ti conviene andare sul sito likato da Nefyt e partire dal link Get started nel menu in alto e passo passo leggerti tutte le altre pagine del menu.
Scaricandolo dal bottone Download Bootstrap avrai solo le cartelle img, css e js senza nessuna pagina di riferimento da cui partire, ti consiglio appena sotto il bottone di cliccare su Examples, sceglierne uno crearti una pagina index.html in dreamwever e copiarne il codice sorgente.

 

[Jonn]

Ho voluto dare un'occhiata anche io a Twitter Bootstrap,
di primo acchito mi sembra una soluzione molto professionale, comoda, carina e semplice....
nulla da aggiungere (ahah! )

 

[WpStyle]

Di soluzioni responsive come boostrap ce ne sono diverse, basta fare una ricerca "framework html5" in GG.
Per esempio:http://foundation.zurb.com/

È oltre a tutte le varie funzionalità trovo interessante il sistema a griglie (grid) che ti riduce notevolmente l'uso del float nel css.

 

[serenaaa]

Grazie a tutti delle spiegazioni! proverò a vagliare le varie soluzioni

 

[Salvo Salvi]

e se io non gli imposto un width fisso ma lascio un width:auto; in quel caso come si vede?

 

[Jonn]

Il width auto penso che estenda la larghezza per tutta la dimensione del div che lo contiene e che gli altri div nello stesso contenitore gli permettano.
PENSO! è da provare.