Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128

    Esercitazione_layout_template

    Ciao a tutti, ho bisogno del vostro aiuto a capire come modificare questo codice, deve uscire con queste impostazioni:
    Esercitazione_layout_template_output.jpg

    Il codice e questo dove sbaglio?

    codice HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head><title>esercitazione modulo 5 - template a 3 colonne flottanti - layout a larghezzafissa</title><style type="text/css">#wrapper { width: 750px; position: relative; margin: auto; border: solid 2px #9370D8; background-color:silver;}#header { background-color: #E6E6FA; padding: 15px; text-align: center; font-family: "frenchscript mt"; font-size: 18pt; width: 720px; height: 50px; }#link { background-color: silver; float: right; width: 150px; height; 100px; float:left;width: 175px; text-align: center; }#main { background-color: #FFFFFF; width: 400px; text-align: justify;}#second { background-color: silver; float: left; width: 175px; text-align: justify;}#footer { clear: both; padding: 15px; background-color: silver; text-align: center; }.link1 {text-weight: bold; border: groove 2px silver; width: 120px; height: 30px; float: left;padding: 10px; margin 10px; }h4 {text-align: center; }#titolo {text-align: left; font-style: italic; padding: 10px; color: #6A5ACD; }body { margin: 0; padding: 0; background-color: #B0C4DE;}p { padding: 0px 8px; }</style></head><body><div id="wrapper"><h4 id="titolo">Favole di Fedro</h4><div id="header" align="center"><a class="link1" href="http://elearning.areasoftwarecpu.it"> Home Page </a><a class="link1" href="http://elearning.areasoftwarecpu.it"> Database favole </a><a class="link1" href="http://elearning.areasoftwarecpu.it"> Database autori </a><a class="link1" href="http://elearning.areasoftwarecpu.it"> Contatti </a><a class="link1" href="http://elearning.areasoftwarecpu.it"> Pubblicazioni </a></div><div id="link"><h4>Altre storie</h4><p><a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">Le rane che chiesero unre</a> <br/><a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">Il cane vecchio e ilcacciatore</a> <br/><a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane fedele</a> <br/><a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il vitello</a> <br/><a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il sole</a> <br/><a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la gru</a><br/><p></div><div id="main"><h4>Il lupo e l'agnello</h4><p>Allo stesso rivo erano giunti il lupo e l'agnello spinti dalla sete; in alto stava il lupo e molto più inbasso l'agnello. Ed ecco che il predone, stimolato dalla sua gola maledetta, tirò fuori un pretesto perlitigare. "Perché", disse, "mi hai intorbidato l'acqua proprio mentre bevevo?". E il batuffolo di lana,pieno di paura, risponde: "Scusa, lupo, come posso fare quello che recrimini? È da te che scorre giùl'acqua fino alle mie labbra". Respinto dalla forza della verità, il lupo esclama: "Sei mesi fa haisparlato di me". L'agnello ribatte: "Io? Io non ero ancora nato". "Perdio", lui dice, "è stato tuo padrea sparlare di me". E così lo abbranca e lo sbrana, uccidendolo ingiustamente. Questa favola è scrittaper quegli uomini che opprimono gli innocenti con false accuse.</p><h4>La volpe e la cicogna</h4><p>La volpe, così si racconta, invitò per prima la cicogna a cena e le pose su un piatto un guazzetto,tutto liquido, che la cicogna, pur desiderosa di cibo, non poteva in alcun modo gustare. E questa,avendo invitato a sua volta la volpe, le mise davanti una fiasca piena di cibo tritato: vi caccia dentroil collo e si sazia, lei, la cicogna, ma impone alla commensale il tormento della fame. E mentrequella lambiva inutilmente il collo della fiasca, l’uccello migratore così diceva, come sappiamo:"Ognuno tolleri di buon animo i metodi che si è scelto".</p></div><div id="second"><h4>Cenni storici</h4><p>Fedro scrisse cinque libri di Fabulae (il titolo integrale è: Phaedri Augusti liberti fabulaeAesopiae), ma, di esse, ne restano appena novantatré: troppo poche, in verità, data anche la limitataestensione della maggior parte di esse, per pensare che potessero formare davvero un complesso dicinque libri. Si sospetta, perciò, a ragione, che ogni libro (specialmente il II e il V) sia statosottoposto, attraverso i secoli, a tagli immeritati per ragioni didattiche e moralistiche, dal momentoche il testo di Fedro divenne, presto, lettura di scuola.</p></div><div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>Direttore responsabile - <a href="mailto:elearning@areasoftwarecpu.it">Camilla Bianchi</a><br/>Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista autofinanziata e senzascopo di lucro - Libera consultazione gratuita<address></div></div></body></html>

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Scusate rimetto il codice, per poterlo visualizzare meglio.

    codice:
    <html><head><title>esecitazione modulo 5 - template a 3 colonne flottanti - layout a larghezza
    fissa</title>
    <style type="text/css">
    #wrapper { width: 750px; position: relative; margin: auto; border: solid 2px #9370D8; backgroundcolor:
    silver;}
    #header { background-color: #E6E6FA; padding: 15px; text-align: center; font-family: "french
    script mt"; font-size: 18pt; width: 720px; height: 50px; }
    #link { background-color: silver; width: 150px; height; 100px; float: left;
    width: 175px; text-align: center; }
    #main { background-color: #E6E6FA; float: left; width: 400px; text-align: justify;}
    #second { background-color: silver; float: left; width: 175px; text-align: justify;}
    #footer { clear: both; padding: 15px; background-color: silver; text-align: center; }
    .link1 {text-weight: bold; border: groove 2px silver; width: 120px; height: 30px; float: left;
    padding: 10px; margin 10px; }
    h4 {text-align: center; }
    #titolo {text-align: left; font-style: italic; padding: 10px; color: #6A5ACD; }
    body { margin: 0; padding: 0; background-color: #B0C4DE;}
    p { padding: 0px 8px; }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <h4 id="titolo">Favole di Fedro</h4>
    <div id="header" align="center">
    <a class="link1" href="http://elearning.areasoftwarecpu.it"> Home Page </a>
    <a class="link1" href="http://elearning.areasoftwarecpu.it"> Database favole </a>
    <a class="link1" href="http://elearning.areasoftwarecpu.it"> Database autori </a>
    <a class="link1" href="http://elearning.areasoftwarecpu.it"> Contatti </a>
    <a class="link1" href="http://elearning.areasoftwarecpu.it"> Pubblicazioni </a>
    </div>
    <div id="link">
    <h4>Altre storie</h4>
    <p>
    <a href="http://www.ilnarrastorie.it/Fedro/Le.rane.chiesero.un.re6.html">Le rane che chiesero un
    re</a> <br/>
    <a href="http://www.ilnarrastorie.it/Fedro/Il.cane.vecchio.e.il.cacciatore5.html">Il cane vecchio e il
    cacciatore</a> <br/>
    <a href="http://www.ilnarrastorie.it/Fedro/Il.cane.fedele27.html" >Il cane fedele</a> <br/>
    <a href="http://www.ilnarrastorie.it/Fedro/Il.toro.e.il.vitello4.html" >Il toro e il vitello</a> <br/>
    <a href="http://www.ilnarrastorie.it/Fedro/Le.rane.e.il.Sole10.html" >Le rane e il sole</a> <br/>
    <a href="http://www.ilnarrastorie.it/Fedro/Il.lupo.e.la.gru12.html" >Il lupo e la gru</a><br/>
    <p>
    </div>
    <div id="main">
    <h4>Il lupo e l'agnello</h4>
    <p>
    Allo stesso rivo erano giunti il lupo e l'agnello spinti dalla sete; in alto stava il lupo e molto più in
    basso l'agnello. Ed ecco che il predone, stimolato dalla sua gola maledetta, tirò fuori un pretesto per
    litigare. "Perché", disse, "mi hai intorbidato l'acqua proprio mentre bevevo?". E il batuffolo di lana,
    pieno di paura, risponde: "Scusa, lupo, come posso fare quello che recrimini? È da te che scorre giù
    l'acqua fino alle mie labbra". Respinto dalla forza della verità, il lupo esclama: "Sei mesi fa hai
    sparlato di me". L'agnello ribatte: "Io? Io non ero ancora nato". "Perdio", lui dice, "è stato tuo padre
    a sparlare di me". E così lo abbranca e lo sbrana, uccidendolo ingiustamente. Questa favola è scritta
    per quegli uomini che opprimono gli innocenti con false accuse.
    </p>
    <h4>La volpe e la cicogna</h4>
    <p>
    La volpe, così si racconta, invitò per prima la cicogna a cena e le pose su un piatto un guazzetto,
    tutto liquido, che la cicogna, pur desiderosa di cibo, non poteva in alcun modo gustare. E questa,
    avendo invitato a sua volta la volpe, le mise davanti una fiasca piena di cibo tritato: vi caccia dentro
    il collo e si sazia, lei, la cicogna, ma impone alla commensale il tormento della fame. E mentre
    quella lambiva inutilmente il collo della fiasca, l’uccello migratore così diceva, come sappiamo:
    "Ognuno tolleri di buon animo i metodi che si è scelto".
    </p>
    </div>
    <div id="second">
    <h4>Cenni storici</h4>
    <p>Fedro scrisse cinque libri di Fabulae (il titolo integrale è: Phaedri Augusti liberti fabulae
    Aesopiae), ma, di esse, ne restano appena novantatré: troppo poche, in verità, data anche la limitata
    estensione della maggior parte di esse, per pensare che potessero formare davvero un complesso di
    cinque libri. Si sospetta, perciò, a ragione, che ogni libro (specialmente il II e il V) sia stato
    sottoposto, attraverso i secoli, a tagli immeritati per ragioni didattiche e moralistiche, dal momento
    che il testo di Fedro divenne, presto, lettura di scuola.
    </p>
    </div>
    <div id="footer"> <address>Fiabe di tutti i tempi - Rivista online <br/>
    Direttore responsabile - <a href="mailto:elearning@areasoftwarecpu.it">Camilla Bianchi</a><br/>
    Gestione e copyright © Edizioni Online - Riproduzione vietata - Rivista autofinanziata e senza
    scopo di lucro - Libera consultazione gratuita
    <address></div>
    </div>
    </body>
    </html>

  3. #3
    Il problema è il padding della class .link1,
    se provi a ridurlo, o a toglierlo del tutto vedrai che va tutto a posto

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, scusami può spiegarmi meglio, ho cercato di fare come dici tu, ma non sono riuscito, sono riuscito in questo modo, per caso avrei avuto lo stesso risultato con meno codice?

    codice:
    <style type="text/css">
    #container {background-color: #B0C4DE; width:950px;margin: auto;}
    #wrapper { width: 750px; position: relative; margin: auto; border: solid 2px #9370D8;  
    border-top:none; border-bottom:none; background-color:silver;}
    #header { background-color: #E6E6FA; padding: 15px; text-align: center; 
    font-family: "french script mt"; font-size: 18pt; width: 720px; height: 50px; }
    #link { background-color: silver; width: 175px; float: left;  text-align: center;}
    #main { background-color: #E6E6FA; float: left; width: 400px; text-align: justify;}
    #second { background-color: silver; float: left; width: 175px; text-align: justify;}
    #footer { clear: both; padding: 15px; background-color: silver; text-align: center; }
    .link1 {text-weight: bold; border: groove 2px silver; width: 120px; height: 30px; float: left;padding: 10px; margin 10px;  }
    h4.header {text-align: center;padding: 10px 10px 10px 10px;color: #6A5ACD;  }
    #titolo {text-align: left; font-style: italic; padding: 10px; color: #6A5ACD; }
    h4 {text-align:center;}
    body { margin: 0; padding: 0;}
    p { padding: 0px 8px; }
    </style>

  5. #5
    modifica
    codice:
    .link1 {text-weight: bold; border: groove 2px silver; width: 120px; height: 30px; float: left;
    padding: 10px; margin 10px; }
    in
    codice:
    .link1 {text-weight: bold; border: groove 2px silver; width: 120px; height: 30px; float: left;
    padding: 0px; margin 10px; }

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, perdonami ma lo già fatto quello che dici, eppure a me non viene?

  7. #7
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Non ho ben capito qual è il problema. Il menu? Il colore del background?

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, con il primo codice non mi veniva il risultato come nell'immagine che ho inserito.
    Sono riuscito con il codice del 4°post.
    Web demo se ho capito bene mi dice che il problema e soli nel panino del link 1, ho modificato come mi elenca, ma non ho avuto il risultato.

  9. #9
    Moderatrice di CSS L'avatar di ResianTaxidrive
    Registrato dal
    Oct 2007
    residenza
    Udine
    Messaggi
    2,766
    Io vedo quello che allego e siccome lo sfondo non è uguale non capivo se fosse quello il problema.
    demo.jpg

  10. #10
    Utente di HTML.it
    Registrato dal
    Dec 2014
    residenza
    Mulazzano (LO)
    Messaggi
    128
    Ciao, si e giusto come lo vedi, Come dicevo con il primo codice nel 2° post non riuscivo a ottenere il risultato.
    webdemo mi dice che il problema e soli nel padding del link 1, che dovevo modificare il codice cosi .link1 {text-weight: bold; border: groove 2px silver; width:120px; height:30px;float: left; padding:0px; margin 10px;}.

    Ho provato ma non mi riusciva, e sono riuscito a farlo con il codice nel 4° post, questo senza senza far critiche a webdemo, anzi lo ringrazio per il suo interessamento, ma era solo per capire se al risultato potevo arrivarci con meno codice e studiarci sopra.

    Quello che hai allegato non lo vedi con il mio primo codice inserito?

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.