Adattare sito a schermi 16:9

Versione Completa   Stampa   Cerca   Utenti   Iscriviti     Condividi : FacebookTwitter
portilloreal
00lunedì 30 giugno 2008 14:27
Ho un piccolo problema con il mio portfolio digitale. In pratica l'ho progettato per uno schermo 4:3 e su uno schermo 16:9 ovviamente si decentra a sinistra. Un altro errore che ho commesso è che nel .css ho inserito solo formattazione del testo e dei link, niente posizionamento dei div (tabelle invece non ce ne sono).
Girando un po' sul web ho letto che con la stringa 'margin:auto' dovrebbe centrarsi il tutto, ma dove la vado a mettere ? In alternativa potrei dare le dimensioni dei div in % invece che in pixelma non sono sicuro che funzioni.
Cosa mi consogliate ?
Se necessario posso postare il codice x-html e il relativo .css in modo che sia il tutto un po' più chiaro.

Etabeta3030
00mercoledì 2 luglio 2008 00:03
margin:auto; va benissimo per la maggior parte dei browser, è buona norma aggiungere anche un text-align:center ai css del body per prender dentro anche Explorer.

Ti consiglio di creare un div nel quale inserire tutto il contenuto della pagina da dopo <body> a prima di </body>. ne metti uno in ogni pagina e a questo div "contenitore" dai l'attributo margin:auto; la prox volta farai tesoro di questo inciampo e metterai tutti gli stili sul css esterno, nessuno escluso...
ciao [SM=x53912]

portilloreal
00giovedì 3 luglio 2008 16:46
Hey grazie! Effettivamente è stato un errore non posizionare i div nel .css (il sito, tra l'altro è molto piccolo), ma usando Dremaweaver si è portati a fare tutto direttamente sulla grafica compreso lo spostamento dei livelli...e tra l'altro pensavo che l'adattamento ai 16:9 fosse automatico.

La stringa qui sotto è 'grammaticalmente' corretta?

<div id="Container" style="position:absolute; margin:auto; width:xxxpx; height:xxxpx; z-index:1; left: xxxpx; top: xxpx;">

al posto di 'xxx' ci saranno valori che mi consentano di 'racchiudere' gli altri contenuti.
Etabeta3030
00giovedì 3 luglio 2008 23:48
è corretta se togli il left:xxx perchè o gli dai il margin:auto o gli dai il left
ricordati il parametro di centramento anche sul body...

[SM=x53911]
portilloreal
00venerdì 4 luglio 2008 14:48
Purtroppo non funge
Ho provato a modificare, ma rimane tutto come prima. Non riesco a capire dove sbaglio...

Questo è cmq il .css

body {
text-align: center
}

div#container {
width: 100%
eight:100%
margin: 0 auto;
text-align: left;

.text
{
font-family: Tahoma;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
text-align:center;
}


{
margin-left: auto;
margin-right: auto;
margin: auto;
}

a:link
{
text-decoration: none;
}

a:visited
{
text-decoration: none;
color: white;
}

a:hover
{
color: gray;
}


{
</style>: ;
}


---------------------------------------------------------------



Questo è invece il codice HTML della pagina su cui ho provato a fare le modifiche

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Affiliates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://michelangelo.altervista.org/pagine/text.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body bgcolor="#333333" link="#FFFFFF">
<div id="Container">

<div id="Layer1" style="position:absolute; width:768px; height:115px; z-index:2; left: 121px; top: 10px;"><img src="http://michelangelo.altervista.org/immagini/nuovo-banner02.jpg" border="0" width="768" height="271"></div>
<div id="Layer2" style="position:absolute; width:146px; height:286px; z-index:3; left: 121px; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-menu.jpg" border="0" width="148" height="286"></div>
<div id="Layer3" style="position:absolute; width:128px; height:246px; z-index:4; left: 131px; top: 293px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">


<h1 align="center" class="text"><strong><font size="3">Menu</font></strong><br />
<br />
<strong>Home </strong><br />
<a href="http://michelangelo.altervista.org/index.htm">About me</a><br />
<a href="http://michelangelo.altervista.org/pagine/news_and_bits.htm">News
&amp; bits</a><br />
<br />
<strong>Graphics</strong><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_24.htm">24</a><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_baraonda.htm">La
Baraonda mgmt.</a><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_signatures.htm">Signatures</a><br />
<br />
<strong>Video</strong><br />
<a href="http://michelangelo.altervista.org/pagine/video_24.htm">24</a><br />
<a href="http://michelangelo.altervista.org/pagine/video_movies.htm">Movies</a><br />
<br />
<strong>Link</strong><br />
<a href="http://michelangelo.altervista.org/pagine/affiliates.htm">Affiliates</a><br />
<a href="http://michelangelo.altervista.org/pagine/utilities.htm">Utilities</a>
</h1>
</div>

<div id="Layer4" style="position:absolute; width:619px; height:250px; z-index:1; left: 271px; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-about-me.jpg" border="0" width="619"
height="271"></div>
<p class="text">&nbsp;</p>
<div id="Layer5" style="position:absolute; width:588px; height:115px; z-index:4; left: 285px; top: 297px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">
<div align="justify">
<p class="text"><strong>Affiliates<br />
_________________________________________________________________________
<br />
<a href="www.24-italia.it"><br />
</a></strong><a href="www.24-italia.it"><font face="twenty four">24</font>
Italia</a> - sito dedicato alla serie TV <font face="twenty four">24.</font><br />
<a href="http://carid.unife.it/modules.php?name=Corsi&file=insegnamenti&paridcorso=ltec&paridindirizzo=ltecn">C.A.R.I.D.</a>
- sito della facolt&agrave; presso cui mi sono laureato<br />
<a href="http://lnx.dgclub.it/index.php">Dorian Gray</a> - disco pub di
Gualdo (FE)<br />
<a href="www.labaraonda.com">La Baraonda management</a> - booking agency
di Ferrara<br />
<a href="www.eightballed.net">Simone Parato's eightballed</a> - web gutter
guru<br />
<strong> </strong></p>
</div>
</div>
</div>
</body>
</html>


Etabeta3030
00sabato 5 luglio 2008 20:16
innanzi tutto tieni presente che i css per essere letti devono essere scritti con estrema precisione: chiudi sempre con il ; e la } e ricordati di usare minuscole e maiuscole con discernimento: Contenitore e contenitore non sono la stessa cosa.
Perciò:

body {
text-align: center;
}

div#container {
width: 100%
eight:100%
margin: 0 auto;
text-align: left;

diventa:

body {
text-align: center;
}

div#Container {
width: 100%;
height:100%;
margin: 0 auto;
text-align: left;
}




poi c'è un css che non ha nè class nè div
e poi questo
{
</style>: ;
}
che non va bene...

ah sì, il Thaoma non è un carattere "universale" per l'html, è meglio mettere
font-family: Thaoma, Verdana, sans-serif;




A parte ciò la pagina non funzia ancora, perchè?

perchè hai dato a Container una larghezza 100% e hai considerato i Layer 1 2 e 3 come esterni ancora, quindi con delle misure left residue.

Fai così: cancella gli stili dai Layer 1 2 e3 e portali fuori così:


body {
text-align: center;
}

div#Container {
position:relative;
width: 786px;
height:600;
margin: 0 auto;
text-align: left;
}
div#Layer1{
position:absolute; left: 0; top: 0px; width:768px; height:115px; z-index:2;
}
div#Layer2 {position:absolute; width:146px; height:286px; z-index:3; left: 0px; top: 286px;}
div#Layer3 {position:absolute; width:128px; height:246px; z-index:4; left: 10px; top: 293px;
background-color: #000000; layer-background-color: #000000; border: 1px none #000000;
}



vedrai che funzia.


ciao
[SM=x53911]
portilloreal
00lunedì 7 luglio 2008 17:18
Il .css l'ho modificato così:

body {
text-align: center;
}

div#Container {
position:relative;
width: 786px;
height:600;
margin: 0 auto;
text-align: left;
}
div#Layer1{
position:absolute; left: 0; top: 0px; width:768px; height:115px; z-index:2;
}
div#Layer2 {position:absolute; width:146px; height:286px; z-index:3; left: 0px; top: 286px;}
div#Layer3 {position:absolute; width:128px; height:246px; z-index:4; left: 10px; top: 293px;
background-color: #000000; layer-background-color: #000000; border: 1px none #000000;
}


.text
{
font-family: Tahoma, Verdana, sans-serif ;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
text-align:center;
}




a:link
{
text-decoration: none;
}

a:visited
{
text-decoration: none;
color: white;
}

a:hover
{
color: gray;
}





L' HTML è diventato questo:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Affiliates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://michelangelo.altervista.org/pagine/text.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body bgcolor="#333333" link="#FFFFFF">
<div id="Layer1" style="position:absolute; width:768px; height:115px; z-index:1; left: 121px; top: 10px;"><img src="http://michelangelo.altervista.org/immagini/nuovo-banner02.jpg" border="0" width="768" height="271"></div>
<div id="Layer2" style="position:absolute; width:146px; height:286px; z-index:2; left: 121px; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-menu.jpg" border="0" width="148" height="286"></div>
<div id="Layer3" style="position:absolute; width:128px; height:246px; z-index:3; left: 131px; top: 293px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">
<h1 align="center" class="text"><strong><font size="3">Menu</font></strong><br />
<br />
<strong>Home </strong><br />
<a href="http://michelangelo.altervista.org/index.htm">About me</a><br />
<a href="http://michelangelo.altervista.org/pagine/news_and_bits.htm">News
&amp; bits</a><br />
<br />
<strong>Graphics</strong><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_24.htm">24</a><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_baraonda.htm">La
Baraonda mgmt.</a><br />
<a href="http://michelangelo.altervista.org/pagine/graphics_signatures.htm">Signatures</a><br />
<br />
<strong>Video</strong><br />
<a href="http://michelangelo.altervista.org/pagine/video_24.htm">24</a><br />
<a href="http://michelangelo.altervista.org/pagine/video_movies.htm">Movies</a><br />
<br />
<strong>Link</strong><br />
<a href="http://michelangelo.altervista.org/pagine/affiliates.htm">Affiliates</a><br />
<a href="http://michelangelo.altervista.org/pagine/utilities.htm">Utilities</a>
</h1>
</div>
<div id="Layer4" style="position:absolute; width:619px; height:250px; z-index:1; left: 271px; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-about-me.jpg" border="0" width="619"
height="271"></div>
<p class="text">&nbsp;</p>
<div id="Layer5" style="position:absolute; width:588px; height:115px; z-index:4; left: 285px; top: 297px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">
<div align="justify">
<p class="text"><strong>Affiliates<br />
_________________________________________________________________________
<br />
<a href="www.24-italia.it"><br />
</a></strong><a href="www.24-italia.it"><font face="twenty four">24</font>
Italia</a> - sito dedicato alla serie TV <font face="twenty four">24.</font><br />
<a href="http://carid.unife.it/modules.php?name=Corsi&file=insegnamenti&paridcorso=ltec&paridindirizzo=ltecn">C.A.R.I.D.</a>
- sito della facolt&agrave; presso cui mi sono laureato<br />
<a href="http://lnx.dgclub.it/index.php">Dorian Gray</a> - disco pub di
Gualdo (FE)<br />
<a href="www.labaraonda.com">La Baraonda management</a> - booking agency
di Ferrara<br />
<a href="www.eightballed.net">Simone Parato's eightballed</a> - web gutter
guru<br />
<strong> </strong></p>
</div>
</div>
</body>
</html>

il risultato è questo . In pratica si è centrato solo il testo. In alternativa non è che c'è un sito da dove posso scaricarmi un .css free simile alla struttura della pagina linkata così risolvo il problema in un colpo solo?
Arkantos01
00lunedì 7 luglio 2008 21:05
Re:
Il CSS:
body {
text-align: center;
}

div#Container {
position:relative;
width: 786px;
height:600;
margin: auto;
text-align: left;
}
div#Layer1{
margin:auto; top: 0px; width:768px; height:115px; z-index:2;
}
div#Layer2 {margin:auto; width:146px; height:286px; z-index:3;  top: 286px;}
div#Layer3 { width:128px; height:246px; z-index:4; margin:auto; top: 293px;
background-color: #000000; layer-background-color: #000000; border: 1px none #000000;
}


.text 
{
 font-family: Tahoma, Verdana, sans-serif ;
 font-size: 12px;
 font-style: normal;
 font-weight: normal;
 color: #FFFFFF;
 text-decoration: none;
 text-align:center;
}

 


a:link 
{
 text-decoration: none;
}

a:visited 
{
 text-decoration: none;
 color: white;
}

a:hover 
{
 color: gray;
}

 


l'HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Affiliates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://michelangelo.altervista.org/pagine/text.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body bgcolor="#333333" link="#FFFFFF">
<div id="Layer1" style="margin:auto; width:768px; height:115px; z-index:1; top: 10px;"><img src="http://michelangelo.altervista.org/immagini/nuovo-banner02.jpg" border="0" width="768" height="271"></div>
<div id="Layer2" style="width:146px; height:286px; z-index:2; margin:auto; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-menu.jpg" border="0" width="148" height="286"></div>
<div id="Layer3" style="margin:auto; width:128px; height:246px; z-index:3; ; top: 293px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"> 
  <h1 align="center" class="text"><strong><font size="3">Menu</font></strong><br />
    <br />
    <strong>Home </strong><br />
    <a href="http://michelangelo.altervista.org/index.htm">About me</a><br />
    <a href="http://michelangelo.altervista.org/pagine/news_and_bits.htm">News 
    &amp; bits</a><br />
    <br />
    <strong>Graphics</strong><br />
    <a href="http://michelangelo.altervista.org/pagine/graphics_24.htm">24</a><br />
    <a href="http://michelangelo.altervista.org/pagine/graphics_baraonda.htm">La 
    Baraonda mgmt.</a><br />
    <a href="http://michelangelo.altervista.org/pagine/graphics_signatures.htm">Signatures</a><br />
    <br />
    <strong>Video</strong><br />
    <a href="http://michelangelo.altervista.org/pagine/video_24.htm">24</a><br />
    <a href="http://michelangelo.altervista.org/pagine/video_movies.htm">Movies</a><br />
    <br />
    <strong>Link</strong><br />
    <a href="http://michelangelo.altervista.org/pagine/affiliates.htm">Affiliates</a><br />
    <a href="http://michelangelo.altervista.org/pagine/utilities.htm">Utilities</a> 
  </h1>
  </div>
<div id="Layer4" style="margin:auto; width:619px; height:250px; z-index:1; top: 286px;"><img src="http://michelangelo.altervista.org/immagini/sfondo-about-me.jpg" border="0" width="619" 
height="271"></div>
<p class="text">&nbsp;</p>
<div id="Layer5" style="width:588px; height:115px; z-index:4; margin:auto; top: 297px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"> 
  <div align="justify"> 
    <p class="text"><strong>Affiliates<br />
      _________________________________________________________________________ 
      <br />
      <a href="www.24-italia.it"><br />
      </a></strong><a href="www.24-italia.it"><font face="twenty four">24</font> 
      Italia</a> - sito dedicato alla serie TV <font face="twenty four">24.</font><br />
      <a href="http://carid.unife.it/modules.php?name=Corsi&file=insegnamenti&paridcorso=ltec&paridindirizzo=ltecn">C.A.R.I.D.</a> 
      - sito della facolt&agrave; presso cui mi sono laureato<br />
      <a href="http://lnx.dgclub.it/index.php">Dorian Gray</a> - disco pub di 
      Gualdo (FE)<br />
      <a href="www.labaraonda.com">La Baraonda management</a> - booking agency 
      di Ferrara<br />
      <a href="www.eightballed.net">Simone Parato's eightballed</a> - web gutter 
      guru<br />
      <strong> </strong></p>
  </div>
</div>
</body>
</html>


[SM=x53912]
portilloreal
00martedì 8 luglio 2008 09:23
Ho provato anche così, ma si è incasinato ancora di +, così ho cancellato tutto. Credo che mi scaricherò un template già pronto [SM=x53919] e proverò a modificarlo.
Questa è la versione 'lo-fi' del Forum Per visualizzare la versione completa clicca qui
Tutti gli orari sono GMT+01:00. Adesso sono le 21:12.
Copyright © 2000-2024 FFZ srl - www.freeforumzone.com