Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    4

    centrare la pagina html

    Salve a tutti, so che il problema di centrare la pagina riguarda il 99% dei neofiti, tra i quali ci sono anch'io. Prima di intervenire ho fatto una ricerca sul forum, ma non ho trovato niente che potesse aiutarmi a risolvere il problema.
    Ho creto un sito con Dreamweaver, e dentro le tabelle ho inserito dei div, perché non mi riusciva di cambiare la grandezza dei font e avevo bisogno di differenziare il titolo del sito dalla barra di navigazione. Dopo aver fatto questo ho provato a selezionare tutto per allinearlo al centro, ma, mentre le tabelle si metteveno tranquillamente in posizione centrale, i div restavano cementati dove li avevo messi in precedenza. Ho provato a convertire i div in tabelle, ma il risultato è stato disastroso.
    Orami trovo con il sito quasi pronto, ma tutto a "sinistra" (che di questi tempi non è che sia male, intendiamoci...;-)); come faccio a metterlo a centro pagina, senza fare danni?
    Grazie a chi risponderà.

  2. #2
    Intanto credo che tu debba fare una scelta per il tuo layout: tabelle o div ?

    Insieme le vedo male.

    Ti conviene dare un'occhio alle guide di questo sito.

    Puoi centrare più facilmente gli elementi della tua pagina se li racchiudi all'interno di un div container utilizzando i css,

    Diventa difficile darti un stringa di codice corretta che funzioni sul tuo sito senza elementi piu concreti, magari un po di codice...

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    4
    Grazie, ecco l'errore. Io credevo che div e tabelle potessero stare innocentemente assieme, ma dalla tua risposta capisco che non vadano tanto d'accordo. Comunque, ecco il codice della home:

    <!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>none</title>
    <link rel='shortcut icon' href='immagini sito/P404_tum.gif' type='image/gif'/>
    <style type="text/css">
    <!--
    body,td,th {
    font-family: Times New Roman, Times, serif;
    color: #333;
    font-size: 12px;
    }
    body {
    background-color: #F6F6F6;
    }
    a:link {
    color: #333;
    text-decoration: none;
    }
    a:visited {
    color: #333;
    text-decoration: none;
    }
    a:hover {
    color: #F00;
    text-decoration: none;
    }
    a {
    font-family: Times New Roman, Times, serif;
    }
    h1,h2,h3,h4,h5,h6 {
    font-family: Times New Roman, Times, serif;
    }
    #apDiv1 {
    position:absolute;
    width:428px;
    height:39px;
    z-index:1;
    left: 266px;
    top: 87px;
    }
    #apDiv2 {
    position:absolute;
    width:221px;
    height:613px;
    z-index:2;
    left: 129px;
    top: 687px;
    }
    #apDiv3 {
    position:absolute;
    width:236px;
    height:407px;
    z-index:3;
    left: 993px;
    top: 874px;
    }
    #apDiv4 {
    position:absolute;
    width:224px;
    height:427px;
    z-index:4;
    left: 1350px;
    top: 71px;
    }
    a:active {
    text-decoration: none;
    }
    #apDiv5 { position:absolute;
    width:224px;
    height:412px;
    z-index:4;
    left: 613px;
    top: 132px;
    }
    #apDiv6 {
    position:absolute;
    width:230px;
    height:468px;
    z-index:5;
    left: 1234px;
    top: 519px;
    }
    #apDiv7 {
    position:absolute;
    width:219px;
    height:617px;
    z-index:6;
    left: 372px;
    top: 687px;
    }
    #apDiv8 {
    position:absolute;
    width:227px;
    height:618px;
    z-index:1;
    top: 0px;
    left: 242px;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body>
    <table width="950" height="117" border="0">
    <tr>
    <td width="102" height="20"></td>
    <td width="728" align="center" valign="top" bgcolor="#F6F6F6"><div id="apDiv1"> capcvtu | parapsfer | peperpè | pasta | tempo | contundent </div></td>
    <td width="106"></td>
    </tr>
    <tr>
    <td height="91"></td>
    <td align="center" valign="top" bgcolor="#F6F6F6"><div id="apDiv2">
    <div align="left">Nel senso che si concepisce uno spazio, ma non appena vi si è dentro viene da pensare che non è propriam</div>
    </div>
    <h2>POLDO TONTO PHOTOGRAPHER PORTFOLIO</h2></td>
    <td></td>
    </tr>
    </table>
    <table width="950" height="548" border="0">
    <tr>
    <td height="169" align="center">PREVIOUS</td>
    <td align="center" valign="middle">[img]conceptual/13_01.jpg[/img]</td>
    <td align="center" valign="middle">NEXT</td>
    </tr>
    <tr>
    <td width="103" height="16" align="center"></td>
    <td width="730" align="center" valign="middle">Photo 13x18 cm/Photo 20x30 cm</td>
    <td width="103" align="center" valign="middle"></td>
    </tr>
    </table>
    <div align="center"></div>
    <div align="center"></div>
    <div>
    <div align="left"></div>
    </div>
    <table width="950" height="673" border="0">
    <tr>
    <td width="102"></td>
    <td width="732"></td>
    <td width="102" height="669">







    <div id="apDiv7">
    <div id="apDiv8">
    <div align="left"> chiusa, con recinzioni e perimetri entro cui far muovere, poi, la scena dell'esistenza.

    Anche dal punto di vista ontologico le cose non cambiano. Osservare ha la sua radice etimologica dal suffisso latino ob - avanti, sopra, attorno -, e servare, che significa custodire, salvare, guardare.</div>
    </div>
    <div align="left"> parte della osservaz [...]me in una scena vissuta nella realtà quotidiana.



    Ma a partire dallo spazio si perde un passaggio impor[...] ospettiva





    </div>
    </div></td>
    </tr>
    </table>
    <blockquote>
    <blockquote>
    <blockquote>
    <blockquote>


    <a href="credits.html">

    credits</a>

    </p>
    </blockquote>
    </blockquote>
    </blockquote>
    </blockquote>
    </body>
    </html>

  4. #4
    Aggiungi text-align:center al ccs del body in questo modo:

    codice:
    body,td,th {
    font-family: Times New Roman, Times, serif;
    color: #333;
    font-size: 12px;
    text-align:center;


  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    4
    Grazie, ma non funziona. Si spostano le tabelle, ma gli elementi div rimangono tutti a sinistra.

  6. #6
    Inutile dire che la pagina andrebbe rifatta da capo a piedi.

    I div hanno una posizione assoluta e messi come li hai messi tu non fanno nessun riferimento alla posizione delle tabelle.

    Devi fare un div container che centrerai nella tua pagina.
    All'interno di esso ci posizioni i tuoi div in modo relativo, flottante o assoluto, insomma devi lavorarci su un po, altrimenti togli i div e fai tutto con le tabelle.

    La vedo dura.

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2009
    Messaggi
    4
    Grazie davvero, infatti avevo già pensato di rifare tutto dal principio.
    Però a lavorare con le tabelle non mi riesce di cambiare le dimensioni dei font, per questo ho usato i div all'interno delle tabelle. A rifare tutto, lo rifarei in div, così potrò dare alla pagina l'aspetto che voglio.
    È molto difficile, o anche un inesperto come me può farcela?

  8. #8
    Ci sono le guide per xhml e css su questo sito, dagli un occhio

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.