Come adattare tutto il contenuto della pagina a tutti gli utenti?

**playROK** · 10-01-2011, 20:22

Ciao raga. Non sono un gran esperto ne di HTML ne di CSS perciò vi pongo questa domanda:
come faccio ad adattare tutti i contenuti del mio sito a tutti gli utenti?
Perché io ho uno schermo in 1280x1024 e quindi è pensabile con non tutti abbiano la stessa risoluzione del mio monitor.
Quindi se io visualizzo il mio sito web su un monitor da 1920x1080, lo sfondo sono riuscito a capire come adattarlo a tutti, ma il contenuto? Il contenuto in effetti non è centrato, ed è mostrato a lato dello schermo! Come fare?

**sandrone65** · 10-01-2011, 20:36

Beh, è un argomento proprio vasto, forse faresti meglio a leggerti le guide alla realizzazione di layout presenti questo sito, è tutta documentazione eccellente (e gratuita).
Comunque una soluzione semplice e diffusissima è quella di inserire i contenuti in un DIV centrato con margin:auto; dimensionato a 960px.
In questo modo chi naviga a 1024x768 vedrà il sito quasi a tutto schermo, chi naviga a 1280 lo vedrà ben centrato e chi naviga a 1920... beh navigherà in finestra, no?

**playROK** · 17-01-2011, 00:05

per dimensionato cosa intendi??? per il div dico...

**sandrone65** · 17-01-2011, 11:25

Un container centrato e dimensionato a 960px

#container {
margin:auto;
width:960px;
background:url(../images/bg.jpg);
}

**playROK** · 17-01-2011, 19:25

ma ci dovrei mettere anche lo sfondo al div?
perché io il sito l'ho strutturato con 2 immagini (header e immagine dei contenuti) in modo da essere visualizzate bene nello schermo.
Ci sarebbe anche un menù css che facendo come dici te viene tagliato...

**sandrone65** · 17-01-2011, 19:44

Container significa contenitore, quindi per centrare i contenuti sullo schermo evidentemente devi metterli dentro al container centrato. Però naturalmente tutto dipende da come stai impostando il tuo layout, se fai vedere HTML e CSS ti si può dire qualcosa di utile, altrimenti è un po' difficile

Ciao

**playROK** · 17-01-2011, 19:56

codice html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>playROKGames - Gameplay, Trailer,Anteprime e tanto altro...</title>
<link rel="stylesheet" href="menu/Home.css" type="text/css" />
</head>
<body>

<div align="center">
<ul id="menu">[*]Home[*]ila18's Gameplays[*]Platinum Trophies[*]Recensioni[*]YouTube Channel[/list]
</div>

<div id="background">[img]Immagini/header.jpg[/img]
</div>

<div id="media">[img]Immagini/media.jpg[/img]
</div>
<div id="pubblicità1">

</div>

<div id="pubblicità2">

</div>

<div id="news">News
</div>

<div id="pubblicitàbox">Pubblicità
</div>

<div id="vid1"><object width="500" height="306"><param name="movie" value="http://www.youtube.com/v/YysGNlRFXZQ?fs=1&hl=it_IT&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YysGNlRFXZQ?fs=1&hl=it_IT&rel=0" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" width="500" height="306"></embed></object></div>

<div id="info1"><u>"Nuovo" trailer di Infamous 2</u>
</div>

<div id="descr1">Ecco un "nuovo" trailer di inFAMOUS 2 caricato su YouTube da playROKGames.
"Nuovo" perchè nel web era già stato divulgato un intero trailer contenente tutti 3 i
video "nuovi", di cui ne abbiamo caricato uno. Iscrivetevi al nostro canale di YouTube!</div>

<div id="date1"><u>13/01/2011</u></div>

<div id="vid2"><object width="500" height="306"><param name="movie" value="http://www.youtube.com/v/EYXY5o0Eve4?fs=1&hl=it_IT&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/EYXY5o0Eve4?fs=1&hl=it_IT&rel=0" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" width="500" height="306"></embed></object></div>

<div id="info2"> <u>Nuovo gameplay di COD Black Ops di ila18!</u>
</div>

<div id="descr2">Un nuovo ed entusiasmante gameplay in Call of Duty Black Ops di ila18.Un match non
perfetto ma degno di nota, come anche il suo precedente gameplay, sempre di Call of
Duty Black Ops! Iscrivetevi al nostro canale di YouTube!
</div>

</body>

</html>

codice css :

img.bg {
/* regole per riempire la pagina con lo sfondo prescelto */
min-height: 80px;
min-width: 1024px;

/* regole per ridimensionare l'immagine proporzionalmente */
width: 100%;
height: 80px;

/* posizonamento dello sfondo */
position:fixed;
top: 0;
left: 0;
z-index:30;
}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

div#content {
/* regola importante per mostrare il contenuto sopra lo sfondo */
position: relative;

/* formattazione del div, non ha effetti sullo sfondo */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}

body {
/* formattazione del body, non ha effetti sullo sfondo */

margin: 0;
padding: 20px 0 0 0;
}

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:fixed;
top:60px;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
z-index:31;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}

ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

#pubblicità1 {
position:absolute;
top:200px;
left:15px;
z-index:21;
}

#pubblicità2 {
position:absolute;
top:500px;
left:80px;
}

#pubblicitàbox {
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
position:absolute;
left:20px;
top:172px;
z-index:20;
}

img.md {
/* regole per riempire la pagina con lo sfondo prescelto */
min-height:100%;
min-width: 1024px;

/* regole per ridimensionare l'immagine proporzionalmente */
width: 100%;
height: auto;

/* posizonamento dello sfondo */
position:fixed;
top: 80px;
left: 0;
}

@media screen and (max-width: 1024px){
img.md {
left: 50%;
margin-left: -512px; }
}

div#content {
/* regola importante per mostrare il contenuto sopra lo sfondo */
position: relative;

/* formattazione del div, non ha effetti sullo sfondo */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}

body {
/* formattazione del body, non ha effetti sullo sfondo */

margin: 0;
padding: 20px 0 0 0;
}

#info1 {
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
color:#CCC;
position:absolute;
top:215px;
left:350px;
}

#news {
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
position:absolute;
top:120px;
left:540px;
}

#vid1 {
position:absolute;
top:265px;
left:350px;

}

#descr1 {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#FFF;
position:absolute;
top:600px;
left:350px;
}

#date1 {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#CCC;
position:absolute;
top:228px;
left:770px;
}

#vid2 {
position:absolute;
top:750px;
left:350px;
}

#info2 {
font-family:Verdana, Geneva, sans-serif;
font-size:21px;
color:#CCC;
position:absolute;
top:700px;
left:350px;
}

#descr2 {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#FFF;
position:absolute;
top:1070px;
left:350px;
}

#sharefb {
position:absolute;
left:350px;
top:650px;
}

**sandrone65** · 17-01-2011, 21:28

Gli ho dato una veloce sistemata da cui puoi trarre spunto.
Ti ho inserito un container di 880px, perchè con i posizionamenti assoluti (?) che avevi impostato più largo non veniva centrato.
Per centrare il menu te l'ho messo in un contenitore fixed e gli ho dato una lunghezza fissa di 600px con margin:auto per centrarlo...
Ho visto che rispetto a qualche giorno fa hai raddoppiato l'immagine dello sfondo... non l'ho provato perchè non avevo gli sfondi, sicuramente c'è ancora da fare, ma dovrebbe andare.
Per fare qualche prova ho incorporato il css per fare prima

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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>playROKGames - Gameplay, Trailer,Anteprime e tanto altro...</title>  <style type="text/css">  </style> </head> <body> <div id="contmenu"> <ul id="menu">[*]Home[*]ila18's Gameplays[*]Platinum Trophies[*]Recensioni[*]YouTube Channel[/list]</div> <div id="container"> <div id="background">[img]Immagini/header.jpg[/img] </div> <div id="media">[img]Immagini/media.jpg[/img] </div> <div id="pubblicità1"></div> <div id="pubblicità2"> </div> <div id="news">News </div> <div id="pubblicitàbox">Pubblicità </div>  <div id="vid1"><object width="500" height="306"><param name="movie" value="http://www.youtube.com/v/YysGNlRFXZQ?fs=1&hl=it_IT&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YysGNlRFXZQ?fs=1&hl=it_IT&rel=0" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" width="500" height="306"></embed></object></div> <div id="info1"><u>"Nuovo" trailer di Infamous 2</u> </div> <div id="descr1">Ecco un "nuovo" trailer di inFAMOUS 2 caricato su YouTube da playROKGames.
"Nuovo" perchè nel web era già stato divulgato un intero trailer contenente tutti 3 i
 video "nuovi", di cui ne abbiamo caricato uno. Iscrivetevi al nostro canale di YouTube!</div> <div id="date1"><u>13/01/2011</u></div>  <div id="vid2"><object width="500" height="306"><param name="movie" value="http://www.youtube.com/v/EYXY5o0Eve4?fs=1&hl=it_IT&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/EYXY5o0Eve4?fs=1&hl=it_IT&rel=0" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" width="500" height="306"></embed></object></div> <div id="info2"> <u>Nuovo gameplay di COD Black Ops di ila18!</u> </div> <div id="descr2">Un nuovo ed entusiasmante gameplay in Call of Duty Black Ops di ila18.Un match non
 perfetto ma degno di nota, come anche il suo precedente gameplay, sempre di Call of
 Duty Black Ops! Iscrivetevi al nostro canale di YouTube! </div> </div> </body> </html>

**playROK** · 17-01-2011, 23:06

Allora... non capisco molto dal codice e a livello di visualizzazione c'è qualche errore... facciamo così io ti invio tutti i files e (per favore

) mi potresti settare i codici in modo che vengano visualizzati bene da tutti lasciando la visualizzazione così com'è? Se chiedo molto non esitare a dirmi di no!
Grazie per la disponibilità comunque!!!
La mia e-mail è playrokgames@interfree.it

Discussione: Come adattare tutto il contenuto della pagina a tutti gli utenti?

Strumenti discussione

Ricerca discussione

Visualizza

Come adattare tutto il contenuto della pagina a tutti gli utenti?

Permessi di invio