Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    se uso div nella pagina non riesco a fare il layout

    Salve, seguendo la guida di html.it, volevo realizzare il layout del mio sito tramite css. Però se io utilizzo il contenitore div all'interno della pagina web, per inidcare delle classi, poi non riesco ad usarl per racchiudere ad esempio <div id="footer">. Ho porvato anche a sostituirlo con span nelle classi, però nei box mi esce uno schifo. Come devo fare?
    Grazie!

  2. #2
    Sono uno di quelli che ne sa di meno all'interno del forum ma penso di precedere chiunque passerà di qui nel dirti che non si capisce il tuo problema, e che se inserissi il codice in questione sarebbe sicuramente d'aiuto.

    Ad ogni modo io, come tutti, ho utilizzato "div" con i fogli di stile (e relative classi anche applicate ai "div") e non ho mai avuto alcun problema.

  3. #3
    Scusate, hos coperto che mi ero sbagliato io. La pagina di per sè si evde,ma è uscita un casino. Guardate qui: http://wrc3rally.netsons.org Sembra che ci sia solo los fondo ma se scorrete le barre trovate i contenuti, messi in una posizione strana.

    Questo il css, sapete dirmi come mai non vedo la navigazione e perchè vi cono caratteri cubitali d è tutto spostato così a destra?

    /*stili per il layout fisso*/
    html,body{margin: 0;padding:0}
    body{font-family:comic sans ms,arial,sans-serif;font-size: 80%;text-align: center}
    div#container{width: 760px;margin: 0 auto;text-align: left;
    border-left: 2px solid #36c;border-right: 2px solid #36c;background-color: #9cf}

    /*stili generici, su header e footer*/
    div#header{background-color:#36C;color: #ff0}
    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 a{color: #fff;font-weight: bold;text-decoration: underline; font-family:comic sans ms, arial, sans-serif;}

    /*stili specifici per il layout*/
    div#navigation{float:left;width: 13em; hight: 20em}
    div#content{margin-left: 13em;padding: 1em;background-color: #fff}
    div#footer{clear:left; text-align:center; padding: 0.5em;
    background-color: #69c; color: #000}

    /*stili per la navigazione*/
    div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
    div#navigation li{margin: 0;padding: 0}
    div#navigation a{color:#369;font: normal bold 1.2em/1.6em comic sans ms,arial,sans-serif;text-decoration: none;}
    div#navigation a:hover{color: #033;text-decoration: underline}
    div#navigation a#activelink{color: #033;text-decoration: none}

    /*stile grafico*/
    div#content {font-family: comic sans ms, arial, sans-serif; font-size: 16em}
    div#navigation {font-size: 14pt; font-family: comic sans ms, arial, sans-serif; color: blue; background: immagini/weblink17.jpg;}

    .giorno {
    font-family: comic sans ms, arial, ms sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    background-color: yellow;
    }
    #news {
    padding: 0px;
    border: 2px solid;
    margin: auto;
    background-image: url(immagini/sfondoarancio.png);
    background-repeat: no-repeat;
    text-align: center;
    font-family: Comic sans ms, Arial, "ms sans-serif";
    font-style: italic;
    font-size: 18px;
    color:red;
    }
    #benvenuto {
    width: 325px;
    height: 20px;
    padding: 0px;
    border: 0px solid;
    margin: auto;
    }
    #form {
    padding: 0px;
    border: 2px solid;
    margin: auto;
    background-image: url(immagini/gialosfumato.jpg);
    font-family: comic sans ms, Arial, "ms sans-serif";
    font-size: 18px;
    font-weight: bold;
    color:red;
    }

    a:link {text-decoration: none;}
    a:visited {text-decoration: none; color: green;}
    a:hover {color: red; font-size: 18pt}

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao,

    codice:
    div#content {font-family: comic sans ms, arial, sans-serif; font-size: 16em}
    probabilmente hai scritto 16em erroneamente, è quello che ti porta a del testo di dimensioni spropositate. Inoltre indica il tipo di carattere usando gli apici in caso di nome composto (font-family: "Comic Sans MS", Arial, "MS Sans Serif"; ma non è neanche necessario poi ripeterlo in ogni classe se è sempre lo stesso avendolo già in body).
    Resterà ancora da sistemare il box laterale che in realtà non flotta come vorresti, e per quello c'è da rivedere un po' di cose nel css

  5. #5
    Ho apportato alcune modifiche al css, ma non capisco perchè la navigazione mi va sotto ai contenuti invece che di fianco a sinistra.

    /*stili per il layout fisso*/
    html,body{margin: 0;padding:0}
    body{font-family:"comic sans ms",arial,"ms sans serif";text-align: left}
    div#container{width: 760px;margin: 0;text-align: left;
    border-left: 2px solid #36c;border-right: 2px solid #36c;}

    /*stili generici, su header e footer*/
    div#header{background-color:#36C;color: #ff0}
    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 a{color: #fff;font-weight: bold;text-decoration: underline;}

    /*stili specifici per il layout*/
    div#navigation{float:left;width: 13em; hight: 20em}
    div#content{margin-left: 1em;padding: 1em;background-color: #fff}
    div#footer{clear:left; text-align:center; padding: 0.5em;
    background-color: #69c; color: #000}

    /*stili per la navigazione*/
    div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
    div#navigation li{margin: 0;padding: 0}
    div#navigation a{color:#369;font: normal bold 1.2em/1.6em;text-decoration: none;}
    div#navigation a:hover{color: #033;text-decoration: underline}
    div#navigation a#activelink{color: #033;text-decoration: none}

    /*stile grafico*/
    div#content { font-size: 14pt}
    div#navigation {font-size: 14pt; color: blue; background: immagini/weblink17.jpg;}

    .giorno {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    background-color: yellow;
    }
    #news {
    padding: 0px;
    border: 2px solid;
    margin: auto;
    background-image: url(immagini/sfondoarancio.png);
    background-repeat: no-repeat;
    text-align: center;
    font-style: italic;
    font-size: 18px;
    color:red;
    }
    #benvenuto {
    width: 325px;
    height: 20px;
    padding: 0px;
    border: 0px solid;
    margin: auto;
    }
    #form {
    padding: 0px;
    border: 2px solid;
    margin: auto;
    background-image: url(immagini/gialosfumato.jpg);
    font-size: 18px;
    font-weight: bold;
    color:red;
    }

    a:link {text-decoration: none;}
    a:visited {text-decoration: none; color: green;}
    a:hover {color: red; font-size: 18pt}

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.