Visualizzazione risultati 1 fino 5 di 5

Discussione: Problema con i CSS centrare il sito ovvero i DIV...HELP

  1. #1
    L'avatar di RpgWorld
    RpgWorld non è connesso Utente giovane
    Data registrazione
    28-04-2003
    Messaggi
    74

    Predefinito

    Ciao ho un problemone con il mio sito:

    Ho notato che con visuali superiori a 800*600 il sito rimane schiacciato sulla destra senza centrarsi, in pratica rimane uno spazio sgradevole a destra non utlizzato (non è l'effetto che mi ero prefissato di raggiungere.

    Vorrei sapere qual'è la proprietà che mi permette di centrare il sito nel browser. Posto qui di seguito il CSS usato sperando in un vostro aiuto.

    [code:1:36666e09f5]h1.logo {
    display:none;
    }
    #logo {
    width:759px;
    height:409px;
    position:relative;
    background:url('grafica/logoiniziale.PNG') no-repeat midle;
    }
    #lavori {
    width:759px;
    height:409px;
    position:relative;
    background:url('grafica/lavoriincorso.PNG') no-repeat midle;
    }
    #testa {
    width:759px;
    height:133px;
    padding-left:0;
    padding-right:0;
    padding-top:1em;
    padding-bottom:1em;
    background:url('grafica/logo1.PNG') no-repeat;
    }
    hr {
    display:none
    }
    .bordotab {
    FONT-SIZE: 12px;
    COLOR: #000000;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #53a9ff
    }
    .classetd {
    BORDER-RIGHT: #000000 0px solid;
    BORDER-TOP: #ffffff 1px solid;
    FONT-SIZE: 12px;
    BORDER-LEFT: #000000 0px solid;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 0px solid;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #aad5ff
    }
    .classetd A {
    DISPLAY: block;
    PADDING-LEFT: 6px;
    PADDING-BOTTOM: 2px;
    COLOR: #005BB7;
    PADDING-TOP: 2px;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    POSITION: relative;
    TEXT-DECORATION: none;
    text-align: center;
    }
    .classetd A:hover {
    FONT-SIZE: 12px;
    COLOR: #0076ec;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #d2e9ff;
    TEXT-DECORATION: none
    text-align: center;
    }
    #menu {
    width:759px;
    background: #aad5ff;
    position:relative;
    }
    #corpo {
    width:759px;
    background: #aad5ff;
    position:relative;
    }
    #footer {
    width:759px;
    height:133px;
    background:url('grafica/footer1.PNG') no-repeat;
    position:relative;
    }

    .contenitore {
    width: 100%;
    color: #000;
    background-color: #53a9ff;
    }

    .topleft { background: url(grafica/top_left.PNG) no-repeat top left }

    .topright { background: url(grafica/top_right.PNG) no-repeat top right }

    .bottomleft { background: url(grafica/bottom_left.PNG) no-repeat bottom left }

    .bottomright { background: url(grafica/bottom_right.PNG) no-repeat bottom right }

    .contenuto { padding: 10px }

    BODY {

    scrollbar-3dlight-color : #53a9ff;
    scrollbar-arrow-color : #005bb7;
    scrollbar-base-color : #aad5ff;
    BACKGROUND-COLOR: #ffffff;

    }

    H1 {
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 2em;
    MARGIN: 0px;
    COLOR: #005bb7;
    FONT-FAMILY: Georgia, "Times New Roman", Times, serif
    }
    H2 {
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 1.5em;
    MARGIN: 10px;
    COLOR: #005bb7;
    FONT-FAMILY: Georgia, "Times New Roman", Times, serif
    }
    H3 {
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 1.2em;
    MARGIN: 10px;
    COLOR: #aad5ff;
    FONT-FAMILY: verdana, helvetica, sans-serif
    }
    H4 {
    PADDING-LEFT: 0px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 1em;
    MARGIN: 10px;
    COLOR: #aad5ff;
    FONT-STYLE: italic;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }
    FONT {
    FONT-SIZE: 10px;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }
    P {
    FONT-SIZE: 12px;
    COLOR: #004080;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }

    P.footer {
    FONT-SIZE: 14px;
    COLOR: #005ba0;
    FONT-WEIGHT: bold;
    }

    P.intro {
    FONT-SIZE: 12px;
    COLOR: #005ba0;
    MARGIN-BOTTOM: 10px;
    MARGIN-LEFT: 70px;
    MARGIN-TOP: 325px;
    }

    P.not_found {
    FONT-SIZE: 12px;
    COLOR: #005ba0;
    MARGIN-BOTTOM: 10px;
    MARGIN-LEFT: 15px;
    MARGIN-TOP: 120px;
    }

    TD {
    FONT-SIZE: 10pt;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    }
    TR {
    FONT-SIZE: 10pt;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    }
    HR {
    COLOR: #ff33ff;
    HEIGHT: 1px
    }
    HR.light {
    COLOR: #ff99ff; HEIGHT: 1px
    }

    A.normal:link {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #004080
    TEXT-DECORATION: none
    }
    A.normal:visited {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #0059B3;
    TEXT-DECORATION: none
    }
    A.normal:hover {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #006FDD;
    TEXT-DECORATION: none
    }

    A.tornasu:link {
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #004080
    TEXT-DECORATION: none
    }
    A.tornasu:visited {
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #004080;
    TEXT-DECORATION: none
    }
    A.tornasu:hover {
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    COLOR: #005ba0;
    TEXT-DECORATION: none
    }
    DT {
    FONT-WEIGHT: bold;
    FONT-SIZE: 14px;
    MARGIN-BOTTOM: 5px;
    COLOR: #005ba0;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }
    DD {
    FONT-SIZE: 12px;
    MARGIN-BOTTOM: 10px;
    MARGIN-LEFT: 15px;
    COLOR: #004080;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }
    LI {
    FONT-SIZE: 12px;
    COLOR: #004080;
    FONT-FAMILY: verdana, helvetica, sans-serif;
    }
    CODE {
    FONT-SIZE: 12px;
    }
    #autore {
    BORDER-RIGHT: #aad5ff 1px;
    PADDING-RIGHT: 50px;
    BORDER-TOP: #aad5ff 1px solid;
    FONT-SIZE: 12px;
    MARGIN: 2px 0px;
    BORDER-LEFT: #aad5ff 1px;
    COLOR: #aad5ff;
    BORDER-BOTTOM: #aad5ff 1px solid;
    BACKGROUND-COLOR: #005bb7;
    TEXT-ALIGN: right;
    }

    blockquote {
    COLOR: #004080;
    BACKGROUND-COLOR: #aad5ff;
    FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
    FONT-SIZE: 12px;
    BORDER: 1px #004080 dotted;
    PADDING: 3px;
    }

    form.upload {
    margin: 25px 0px 0px 0px;
    padding: 0px;
    }

    div#upNum { /* il menu dove si può scegliere il numero di file da caricare */
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: bolder;
    color: #004080;
    background: #aad5ff;
    padding: 2px;
    width: 320px;
    height: 20px;
    border: 2px dashed #004080;
    }

    select.upload {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #004080;
    background: #aad5ff;
    width: 68px;
    margin: 0px 8px;
    }

    textarea.upload {
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #004080;
    background: #aad5ff;
    text-align: center;
    height: 80px;
    margin: 5px 0px;
    padding: 2px 0px 2px 5px;
    border: 2px groove #004080;
    }

    input#data { /* i file-field */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #004080;
    background: #aad5ff;
    border: 2px groove #004080;
    }

    input#send { /* il pulsante Carica... */
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #004080;
    background: #aad5ff;
    margin: 7px 0px 0px 0px;
    border: 2px ridge #004080;
    }
    [/code:1:36666e09f5]

    Per vedere invece il sito il link è http://rpgworld.altervista.org

    Fiducioso di una vostra risposta vi porgo i miei più cordiali saluti.

  2. #2
    aeclanum non è connesso Utente
    Data registrazione
    25-03-2003
    Messaggi
    210

    Predefinito

    Prova ad aggiungere nel css del body la riga:

    text-align:center;

  3. #3
    L'avatar di gve
    gve
    gve non è connesso Utente storico
    Data registrazione
    26-01-2003
    Residenza
    Brescia
    Messaggi
    2,964

    Predefinito

    Non son sicuro che basti come dice aeclanum; se non basta oltre a ciò aggiungi un <div> che contiene tutto, come fosse un secondo <body>, e gli apllichi questo:

    margin: 0 auto;

    così dovrebbe essere ok.
    | Regolamento del Forum | Regolamento di AlterVista | FAQ di AlterVista | Netiquette |

    GVE = GVE Virtual Extension
    AVCM #: 6637

  4. #4
    L'avatar di RpgWorld
    RpgWorld non è connesso Utente giovane
    Data registrazione
    28-04-2003
    Messaggi
    74

    Predefinito

    Grazie per i consigli vado subito a metterli in pratica vi farò sapere se l'impresa avrà esito positivo.

    Grazie ancora ciao

    -----Edit--------

    Ho seguito i vostri consigli e già inserendo la proprietà BODY text-align:center; il sito viene centrato in tutte le risoluzioni.

    Si presenta ora un problema ben più grave. Tutta la formattazione del testo mi viene ignorata e ora tutti i contenuti del sito (le scritte) vengono centrare.

    Cè un modo per risolvere il problema di centrare il sito senza poi risentirne nella formattazione del testo ?

    Devo aggiungere qualcosa al CSS nei DIV riservati al testo?

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

  5. #5
    L'avatar di gve
    gve
    gve non è connesso Utente storico
    Data registrazione
    26-01-2003
    Residenza
    Brescia
    Messaggi
    2,964

    Predefinito

    Già, ciò che ti succede dipende dal fatto che tutti i tag contenuti entro un determinato tag, se non diversamente specificato, eriditano le proprietà del loro contenitore.

    Quindi, come dici tu, dovresti assegnare a tutti i <div> contenenti testo:
    text-align: left;

    in alternativa puoi fare un <div> tipo quello che ti dicevo nel mio post precedente con settato il text-align come appena detto.
    | Regolamento del Forum | Regolamento di AlterVista | FAQ di AlterVista | Netiquette |

    GVE = GVE Virtual Extension
    AVCM #: 6637

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •