Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167

    Discrepanze con il Box model...

    Ciao a tutti,

    in una mia pagina web (larghezza 700px) ho inserito un Box in cui ho impostato i valori di bg-color, il border e il text-align center...fin qui nulla di strano solo che il mio box invece di comparire perfettamente "centrato" per tutta la larghezza della pagina, compare leggermente spostato sulla destra (saranno penso 10px) e quindi a destra esce dalla pagina....

    Inoltre quando verifico con il browser, con IE il box è sottilissimo, alto poco piu della frase che deve contenere (non ho specificato nessun padding), se invece provo con Firefox e Opera, il box ha un'altezza molto più elevata, come se fosse stato impostato un padding abbastanza alto....

    le mie domande quindi sono due:

    1)come faccio a centrare in modo perfetto il mio box da 700 px nella pagina (larga uguale)?
    2)come faccio a visualizzare il box correttamente sia con IE che con Firefox e Opera?

    scusate se magari sono domande banali, ma ho iniziato da poco tempo a manipolare i blocchi di sito per un ammodernamento e a volte vado un po in confusione....

    Ciao a tutti e grazie in anticipo per l'aiuto

    DEBIAN RULEZ!!!

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    1) azzera margin e padding al body
    2) imposta text-align al blocco esterno (padre del box)
    3) assegna width: 700px; margin 0 auto; e text-align: left al blocco da centrare e nient'altro

    that's all
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167
    Gia fatto...non succede nulla....
    DEBIAN RULEZ!!!

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    posta un esempio di codice che presenta il problema oppure un link dove si può vedere la pagina
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167
    Ecco il codice CSS che ho inserito nell'Head della pagina:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>..:Hardsound Italia...Agenda...by Mancio:..</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.0">
    <style type="text/css">

    /*stili per il layout fisso*/
    html,body{
    margin: 0;
    padding:0;
    background-color: #000000;
    }
    body{
    font-family: arial,sans-serif;
    font-size: 76%;
    text-align: center;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/plate6.jpg);
    }
    div#container{
    width: 700px;
    margin: 0 auto auto;
    padding: 0;
    text-align: left;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    background-color: #000000;
    }

    /*stili generici, su header e footer*/
    div#header{
    width: 700px;
    height: 120px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/intestazione.jpg);
    }
    h1,h2{margin: 0;padding:0}
    h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
    h2{color: #999;font-size: 1.5em}
    div#footer{
    text-align:center;
    padding: 0.5em;
    background-color: #CCCCCC;
    color: #FFFFFF;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/menu2.gif);
    }
    div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

    /*stili specifici per il layout*/
    div#navigation{
    background-color:#000000; height: 30px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/menu.gif);
    }
    div#content{
    padding: 1em;
    height: 700px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/sfondo3.gif);
    text-align:left;
    }

    A:link{text-decoration: none; color:#CCCCCC}
    A:visited{text-decoration:none; color:#CCCCCC}
    A:hover{text-decoration:none; color:#FFFFFF; font-weight: bold}

    #box{
    background-color:#999999;
    border: 1px solid; color:#CCCCCC;
    text-align:center;
    width: 700px;
    margin: 0 auto;
    }



    /*stili per la navigazione*/
    div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
    div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
    div#navigation a{color:#fff;font: bold 1.2em/2.5em arial, sans-serif;text-decoration: none}
    div#navigation a:hover{color: #0066FF;text-decoration: none}
    div#navigation a#activelink{color: #CCCCCC;text-decoration: none}
    .Stile1 {color: #FF0000}
    .Stile4 {
    color: #CCCCCC;
    font-weight: bold;
    }
    </style>
    </head>

    Il Box "incriminato" è #box....
    DEBIAN RULEZ!!!

  6. #6
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167
    cosa c'è di sbagliato? è mezz'ora che ripasso il CSS ma nulla non riesco a capire cosa possa causare questa discrepanza....
    DEBIAN RULEZ!!!

  7. #7
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    box in che elemento è contenuto? puoi postare la pagina completa di html?
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  8. #8
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167
    Ecco il codice per intero della pagina:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>..:Hardsound Italia...Agenda...by Mancio:..</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.0">
    <style type="text/css">

    /*stili per il layout fisso*/
    html,body{
    margin: 0;
    padding:0;
    background-color: #000000;
    }
    body{
    font-family: arial,sans-serif;
    font-size: 76%;
    text-align: center;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/plate6.jpg);
    }
    div#container{
    width: 700px;
    margin: 0 auto auto;
    padding: 0;
    text-align: left;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    background-color: #000000;
    }

    /*stili generici, su header e footer*/
    div#header{
    width: 700px;
    height: 120px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/intestazione.jpg);
    }
    h1,h2{margin: 0;padding:0}
    h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
    h2{color: #999;font-size: 1.5em}
    div#footer{
    text-align:center;
    padding: 0.5em;
    background-color: #CCCCCC;
    color: #FFFFFF;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/menu2.gif);
    }
    div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

    /*stili specifici per il layout*/
    div#navigation{
    background-color:#000000; height: 30px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/menu.gif);
    }
    div#content{
    padding: 1em;
    height: 700px;
    background-image: url(../../Immagini/Intestazione%20e%20loghi/sfondo3.gif);
    text-align:left;
    }

    A:link{text-decoration: none; color:#CCCCCC}
    A:visited{text-decoration:none; color:#CCCCCC}
    A:hover{text-decoration:none; color:#FFFFFF; font-weight: bold}

    #box{
    background-color:#999999;
    border: 1px solid; color:#CCCCCC;
    text-align:center;
    width: 700px;
    margin: 0 auto;
    }



    /*stili per la navigazione*/
    div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
    div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
    div#navigation a{color:#fff;font: bold 1.2em/2.5em arial, sans-serif;text-decoration: none}
    div#navigation a:hover{color: #0066FF;text-decoration: none}
    div#navigation a#activelink{color: #CCCCCC;text-decoration: none}
    .Stile1 {color: #FF0000}
    .Stile4 {
    color: #CCCCCC;
    font-weight: bold;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header">
    </div>
    <div id="navigation">
    <ul>[*]Home[*]Biography[*]Photo[*]Agenda[*]Forum[*]Downloads[*]Shop
    [*]Links
    [*]Guestbook
    [*]Contact[/list]
    </div>
    <div id="content">
    <h2 class="Stile1">Agenda</h2>


    > Agenda Italia
    [img]../../Immagini/Intestazione e loghi/Flags/it.gif[/img]



    > Agenda Estero
    [img]../../Immagini/Intestazione e loghi/Flags/nl.gif[/img] [img]../../Immagini/Intestazione e loghi/Flags/de.gif[/img] [img]../../Immagini/Intestazione e loghi/Flags/ch.gif[/img][img]../../Immagini/Intestazione e loghi/Flags/be.gif[/img] [img]../../Immagini/Intestazione e loghi/Flags/gb.gif[/img] [img]../../Immagini/Intestazione e loghi/Flags/es.gif[/img]


    <div id="box">


    ..:: Per ulteriori informazioni sugli eventi in Italia e all'Estero, entra in Hardsound Italia Forum ! ::..</p>
    </div>
    </div>
    <div id="footer">© 2006 Website create and managed by Mancio</div>
    </div>
    </body>
    </html>


    Non fare molto caso al disordine del codice nel body...quando ho un po di tempo lo devo indentare per bene dato che quando sono passato a Dreamweaver 8 me l'ha sballato tutto.....

    Ciao e Grazie!
    DEBIAN RULEZ!!!

  9. #9
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    adesso ci siamo:

    cambia la regola

    div#content {
    padding: 1em;
    }


    in
    div#content {
    padding: 1em 0;
    }


    Ciauz
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  10. #10
    Utente di HTML.it L'avatar di Debian
    Registrato dal
    Jul 2005
    Messaggi
    167
    Risolto grazie tante!!!
    DEBIAN RULEZ!!!

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 © 2026 vBulletin Solutions, Inc. All rights reserved.