css + layout senza spazi

 sa lve ho  creato una pagina web con un layout, ma ho un problema nn so  come eliminare gli spazi tra header, menu foter e content,

ecco il mio script css: body{

   margin: 0;

   padding: 0;

   margin-bottom: 0.95em;

   font-family: arial, helvetica, verdana, tahoma, sans-serif;

   font-size: 80%;

   color: #000;

   background-color: #fff;

   line-height: 200%;

}

#header{

   border-left:2px solid #000; border-right:2px solid #000; margin:20px ; width: 740px;

   height: 100px;

   border-top: 2px none;

   border-bottom: 2px none;

   background-image: url('img01.jpg');

   background-repeat: no-repeat;

   background-position: right bottom;

   background-color: #ff3300;

   color: #000

}

#header h1{

   margin:0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   text-align:center;

      color: #0033cc;

   background-color: #0066ff

   padding-left: 0;

   padding-top: 0;

}

div#container{border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:0px solid #ccc; border-bottom:0px solid #ccc; width:740px; margin:0 auto;

        background: url('3rightcol.jpg') repeat-y top right; }

div#container2{background: url('3leftcol.jpg') repeat-y top left;text-align: left}

#menu{

   margin: 20px;

   width: 740px;

   background: #ff66ff;

   border-right: 1px solid #ff66ff

   border-left: 1px solid #ff66ff;

   border-bottom: 1px solid #ff66ff;

   color: #fff;

}

#menu ul{

   margin: 0;

   padding-left: 0;

   list-style: none;

}

#menu li{

   font-size: 1.1em;

   display: inline;

   margin: 0;

   padding: 0;

}

#menu a:link, #menu a:visited{

   float: left;

   background: #ff66ff;

   color: #fff;

   margin: 0em;

   padding: 0.3em 1.5em 0.3em 1.5em;

   text-decoration: none;

   border-right: 1px solid #ff66ff;

}

#menu a:hover, #menu a:focus, #menu a:active{

   color: #0066ff;

}

#content{

   border-left:1px solid #000; border-right:1px solid #000; margin:20px ; width: 740px;

   border-top: 0px none;

   border-bottom: 0px none;

   background: #fff;

   color: #000; padding-left:0.8em; padding-right:0.8em; padding-top:1.25em; padding-bottom:1.25em

}

#content p {

   font-size: 100%;

   line-height: 1.8em;

   padding-left: 1em;

   padding-right: 1em;

}

#content h1 {

   padding-bottom: 0.3em;

   padding-top: 0.3em;

   font: normal 180% Georgia, "Times New Roman", Times, serif;

   color: #05181E;

   background-color: #FFFFFF;

}

#content h2{

   background: #fff;

   color: #940D1E;

   padding-bottom: 0.3em;

   font: normal 150% Georgia, "Times New Roman", Times, serif;

   border-bottom: 1px dotted #FF9006;

}

#content a:link, #content a:visited {

   font-size: 95%;   

   font-weight: normal;

   color: #cc33ff;

   background-color: #fff;

   text-decoration: underline;

}

#content a:hover {

   color: #fff;

   background-color: #41545F;

   text-decoration: none;

}

#footer{

   margin: 20px;

   width: 740px;

   background: #ff66ff;

   text-align: center;

   color: #fff;

   border: 1px solid #000;

   border-top: 1px;

   border-bottom: 1px;

   font-family: helvetica, arial, verdana, tahoma, sans-serif;

   padding: 0.8em 0.8em;

}

#footer a:link, #footer a:visited {

   color: #fff;

   background-color: #cc33ff;

   text-decoration: underline;

}

#footer a:hover {

   text-decoration: none;

   color: #41545F;

   background-color: #fff;

}

qualcuno mi può aiutare?

inviato 8 anni fa
mela
mela
1
X 0 X

Dal css non è che si veda più di tanto, posti il link alla pagina per vederla da browser? O metti il codice della pagina.

risposto 8 anni fa
LonelyWolf
X 0 X

ciao, ecco il codice html:

head>

<title>Layout fisso n.01/F</title>

<link href="struttura3.css." rel="stylesheet" type="text/css" title="default" />

</head>

<body>

         <div id="container">

   <div id="header">

   <h1>CORSO WEB-DEVELOPER  ANNO 2007-2009</h1>

        <h2> In collaborazione con l'as.so ri o.l.u.s e la knowk srl</h2>

   </div>

   <div id="menu">

         <ul>

         <li><a href="#" title="HOME">HOME</a></li>

         <li><a href="#" title=" NEWS">NEWS</a></li>

         </ul>

   </div>

<div id="content">

   <h2>MATERIE CORSO WEB-DEVELOPER</h2>

   <p>

   il corso della durata di due anni ha previsto le seguenti materie:

            html, css, flash mx,  dreamweaver mx, fireworxs mx, mysql, php,

           apache,javascript, e xml, inglese, cultura d'impresa,

        <em>cultura dell' ambiente</em> i moduli per la patente europea.

   </p>

   <h2>INTRODUZIONE</h2>

   <p>

   Ora vedremo per sommi capi, come è stata progettata questa pagina web:

   </p>

   <h2> STRUTTURA PAGINA WEB</h2>

         <p>

        Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti.

        Strutturare logicamente i contenuti di una pagina, creare un template (modello)

        e pensare che tutti i contenuti di un sito saranno facilmente inseribili da subito

        e in futuri aggiornamenti e mantenimenti del sito, è una fase fondamentale.

        Vediamo le principali sezioni logiche di un sito web:<br>

        <div id="lista">

         <ul>

         <p><li>L' header (testata)</li><br>

           <li>La navigazione (menù)</li><br>

         <li>Il footer (pie' di pagina)</li><br>

         <li>La sezione extra (sottesa o assente)</li><br>

      </ul>

      </div>

     </p>

</div>

</div>

<div id="footer"> sito ideato da: Mazziotti Alessandra <a href="mailto:web.mazziotti@assori.it">

   Contattami

 </a>

</div>

</body>

</html>   

         

risposto 8 anni fa
mela
mela
1
X 0 X

Scusa sono un po' impegnato, appena riesco gli dò un'occhiata!

risposto 8 anni fa
LonelyWolf
X 0 X

ok nel frattempo ti invio quello aggirnato,

sono riuscita a spostarlo però nn mi è uscito proprio al centro ma un pò spostato a destra è in basso è non riesco a capire il perchè.

ecco il css nuovo:

body{

   margin: 0;

   padding: 0;

   margin-bottom: 0;

   font-family: arial, helvetica, verdana, tahoma, sans-serif;

   font-size: 80%;

   color: #000;

   background-color: #fff;

   line-height: 180%;

}

#header{

   border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; width: 740px;

   height: 100px;

   border-top: 1px none;

   border-bottom: 1px none;

   background-image: url('img01.jpg');

   background-repeat: no-repeat;

   background-position: right bottom;

   background-color: #ff3300;

   color: #000

}

#header h1{

    text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   text-align:center;

      color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

#header h2{

    text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   text-align:center;

      color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

div#container {   

 border-left:1px solid #ccc;

 border-right:1px solid #ccc;

 border-top:0px solid #ccc;

  border-bottom:0px solid #ccc;

  width:740px;

  margin:200px;

}

#menu{

   margin:0 auto;

   width: 740px;

   background: #ff66ff;

   border-right: 1px solid #ff66ff

   border-left: 1px solid #ff66ff;

   border-bottom: 1px solid #ff66ff;

   color: #fff;

}

#menu ul{

   margin: 0;

   padding-left: 0;

   list-style: none;

}

#menu li{

   font-size: 1.1em;

   display: inline;

   margin: 0;

   padding: 0;

}

#menu a:link, #menu a:visited{

   float: left;

   background: #ff66ff;

   color: #fff;

   margin: 0em;

   padding: 0.3em 1.5em 0.3em 1.5em;

   text-decoration: none;

   border-right: 1px solid #ff66ff;

}

#menu a:hover, #menu a:focus, #menu a:active{

color: #0066ff;

}

}

#content p {

    text-align:center;

   font-variant: small-caps;

   font-size: 100%;

   line-height: 1.8em;

   padding-left: 1em;

   padding-right: 1em;

}

#content h1 {

   padding-bottom: 0.3em;

   padding-top: 0.3em;

   font: normal 180% Georgia, "Times New Roman", Times, serif;

   color: #05181E;

   background-color: #FFFFFF;

}

#content li {

color:#cc3300;

}

#content h2{

    text-align:center;

   background: #fff;

   color: #940D1E;

   padding-bottom: 0.3em;

   font: normal 150% Georgia, "Times New Roman", Times, serif;

   border-bottom: 1px dotted #FF9006;

}

#content a:link, #content a:visited {

   font-size: 95%;   

   font-weight: normal;

   color: #cc33ff;

   background-color: #fff;

   text-decoration: underline;

}

#content a:hover {

   color: #fff;

   background-color: #41545F;

   text-decoration: none;

}

#footer{

   margin:0;

   width: 740px;

   background: #ff66ff;

   text-align: center;

   color: #fff;

   border: 1px solid #000;

   border-top: 1px;

   border-bottom: 1px;

   font-family: helvetica, arial, verdana, tahoma, sans-serif;

   padding: 0.8em 0.8em;

}

#footer a:link, #footer a:visited {

   color: #fff;

   background-color: #cc33ff;

   text-decoration: underline;

}

#footer a:hover {

   text-decoration: none;

   color: #41545F;

   background-color: #fff;

}

#lista{

    margin-left:250px; width: 400px;

   background: #fff;

   color: #000;

    padding-left:0.8em;

    padding-right:0.8em;

    padding-top:1.25em;

    padding-bottom:1.25em

}

p.s. puoi aiutarmi a centrare la pagina prima di Gennaio? ne ho assolutamente bisogno  prima di Gennaio.

attendo risposta.

Grazie per non avermi abbandomato!.

l'html è rimasto lo stesso

risposto 8 anni fa
mela
mela
1
X 0 X

Le cose più gravi sono:

1 -  come hai messo le dichiarazioni nel css, es: #menu ul mentre la sintassi corretta è: ul#menu

2 - dato che intendi dichiarare ogni elemento nel css (ul, li, link, ecc.) anche nell'html devi mettere l'id per ogni elemento

Nel css nuovo:

1 - non hai messo il ;

*alla fine di background-color per h1 e h2

*alla fine di color di header

*alla fine di border-right x menu

1a - perchè definire h1 e h2 uguali?

2 - c'è una } di troppo prima di #content p

Nell'html:

1 - link href="struttura3.css."  c'è il . di troppo dopo css

2 - <div id="content"> ma non è dichiarato nel css nuovo

3 - hai dichiarato (anche se erroneamente) nel css per ul e li menu, ma poi non l'hai messo nel codice, non si eredita dal div, quindi <ul id="menu">  e <li id="menu"> (per ogni li).

Consigli:

Considerato che usi per gli stessi elementi (link, ul, li) differenti stili, usa le classi nel css e non gli id.

risposto 8 anni fa
LonelyWolf
modificato 8 anni fa
X 0 X

non ho capitomolto bene cosa non ho messo, riguardo ad h1 e h2 si riferiscono a due scritte differenti dello stesso colore correggerò le altre cose, comunque il mio problema+ grande rimame è quello di centrare la pagina web

risposto 8 anni fa
mela
mela
1
X 0 X

ho corretto il css è mi e uscito un po meglio ma non centrato, eccolo

body{

   margin: 0;

   padding: 0;

   margin-bottom: 0;

   font-family: arial, helvetica, verdana, tahoma, sans-serif;

   font-size: 80%;

   color: #000;

   background-color: #fff;

   line-height: 180%;

}

#header{

   border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; width: 740px;

   height: 100px;

   border-top: 1px none;

   border-bottom: 1px none;

   background-image: url('img01.jpg');

   background-repeat: no-repeat;

   background-position: right bottom;

   background-color: #ff3300;

   color: #000

}

#header h1{

    text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   text-align:center;

      color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

#header h2{

    text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   text-align:center;

      color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

div#container {   

 border-left:1px solid #ccc;

 border-right:1px solid #ccc;

 border-top:0px solid #ccc;

  border-bottom:0px solid #ccc;

  width:740px;

  margin:200px;

}

#menu{

   margin:0 auto;

   width: 740px;

   background: #ff66ff;

   border-right: 1px solid #ff66ff

   border-left: 1px solid #ff66ff;

   border-bottom: 1px solid #ff66ff;

   color: #fff;

}

ul#menu{

   margin: 0;

   padding-left: 0;

   list-style: none;

}

#menu li{

   font-size: 1.1em;

   display: inline;

   margin: 0;

   padding: 0;

}

#menu a:link, #menu a:visited{

   float: left;

   background: #ff66ff;

   color: #fff;

   margin: 0em;

   padding: 0.3em 1.5em 0.3em 1.5em;

   text-decoration: none;

   border-right: 1px solid #ff66ff;

}

#menu a:hover, #menu a:focus, #menu a:active{

color: #0066ff;

}

div#content {

   border-left:1px solid #000; border-right:1px solid #000;

    margin:0 auto;

    width: 740px;

   border-top: 0px none;

   border-bottom: 0px none;

   background: #fff;

   color: #000;

}

div#content p {

    text-align:center;

   font-variant: small-caps;

   font-size: 100%;

   line-height: 1.8em;

   padding-left: 1em;

   padding-right: 1em;

}

div#content h1 {

   padding-bottom: 0.3em;

   padding-top: 0.3em;

   font: normal 180% Georgia, "Times New Roman", Times, serif;

   color: #05181E;

   background-color: #FFFFFF;

}

div#content li {

color:#cc3300;

}

div#content h2{

    text-align:center;

   background: #fff;

   color: #940D1E;

   padding-bottom: 0.3em;

   font: normal 150% Georgia, "Times New Roman", Times, serif;

   border-bottom: 1px dotted #FF9006;

}

div#content a:link, #content a:visited {

   font-size: 95%;   

   font-weight: normal;

   color: #cc33ff;

   background-color: #fff;

   text-decoration: underline;

}

div##content a:hover {

   color: #fff;

   background-color: #41545F;

   text-decoration: none;

}

#footer{

   margin:0;

   width: 740px;

   background: #ff66ff;

   text-align: center;

   color: #fff;

   border: 1px solid #000;

   border-top: 1px;

   border-bottom: 1px;

   font-family: helvetica, arial, verdana, tahoma, sans-serif;

   padding: 0.8em 0.8em;

}

#footer a:link, #footer a:visited {

   color: #fff;

   background-color: #cc33ff;

   text-decoration: underline;

}

#footer a:hover {

   text-decoration: none;

   color: #41545F;

   background-color: #fff;

}

#lista{

    margin-left:250px; width: 400px;

   background: #fff;

   color: #000;

    padding-left:0.8em;

    padding-right:0.8em;

    padding-top:1.25em;

    padding-bottom:1.25em

}

ho corretto l'html mettendo:

<div class="container"> e cosi anche pre l'header, il container il content e il il footer ma è uscito un disastro praticamente l'html risulta non collegato al css, non so il perchè, forse sbaglio a scrivere mi puoi indicare il modo corretto?

 non riesco a capire perchè devo modificare le liste, come visualizzazione si vedono benissimo e vengono come le volevo io, a che serve quindi aggiungere altri div nell'html?.

ecco anche l'html:

<head>

<title>Layout fisso n.01/F</title>

<link href="struttura3.css" rel="stylesheet" type="text/css" title="default" />

</head>

<body>

        <div class="container">

   <div class="header">

   <h1>CORSO WEB-DEVELOPER  ANNO 2007-2009</h1>

        <h2> In collaborazione con l'as.so.ri o.n.l.u.s e la knowk s.r.l</h2>

   </div>

   <div class="menu">

         <ul>

         <li><a href="#" title="HOME">HOME</a></li>

         <li><a href="#" title="NEWS">NEWS</a></li>

         </ul>

   </div>

<div class="content">

   <h2>MATERIE CORSO WEB-DEVELOPER</h2>

   <p>

   il corso della durata di due anni ha previsto le seguenti materie:

            html, css, flash mx,  dreamweaver mx, fireworxs mx, mysql, php,

           apache,javascript, e xml, inglese, cultura d'impresa,

        <em>cultura dell' ambiente</em> <br>i moduli per la patente europea.

   </p>

   <h2>INTRODUZIONE</h2>

   <p>

   Ora vedremo per sommi capi, come è stata progettata questa pagina web:

   </p>

   <h2> STRUTTURA PAGINA WEB</h2>

         <p>

        Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti.<br>

        Strutturare logicamente i contenuti di una pagina, creare un template (modello)

        e pensare che tutti i contenuti di un sito saranno facilmente inseribili da subito

        e in futuri aggiornamenti e mantenimenti del sito, è una fase fondamentale.<br>

        Vediamo le principali sezioni logiche di un sito web:<br>

        <div id="lista">

         <ul>

         <p><li>L' header (testata)</li><br>

       <li>La navigazione (menù)</li><br>

       <li>Il footer (pie' di pagina)</li><br>

      <li>La sezione extra (sottesa o assente)</li><br>

      </ul>

     <div>

     </p>

</div>

</div>

<div class="footer"> sito ideato da: Mazziotti Alessandra <a href="mailto:web.mazziotti@assori.it">

   Contattami

 </a>

</div>

</body>

</html>   

risposto 8 anni fa
mela
mela
1
X 0 X

perchè ancora non hai corretto tutto il css!

#footer a:link, #footer a:visited

#footer a:hover

div##content a:hover  Qua è doppio #

div#content h1  non esiste -> content#h1  (ce ne sono un po')

ecc ecc.

risposto 8 anni fa
LonelyWolf
X 0 X

body{

   margin: 0;

   padding: 0;

   margin-bottom: 0.95em;

   font-family: arial, helvetica, verdana, tahoma, sans-serif;

   font-size: 80%;

   color: #000;

   background-color: #fff;

   line-height: 180%;

}

#header{

    margin:0 auto; width: 740px;

   height: 100px;

   border-top: 1px none;

   border-bottom: 1px none;

   background-image: url('img01.jpg');

   background-repeat: no-repeat;

   background-position: right bottom;

   background-color: #ff3300;

   color: #000

}

#header h1{

    text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

#header h2{

   text-align:center;

   margin: 0;

   font: normal 200% Georgia, "Times New Roman", Times, serif;

   color: #0033cc;

   background-color: #0066ff

   padding-left: 0.6em;

   padding-top: 0.1em;

}

div#container{

border-left:1px solid #ccc;

border-right:1px solid #ccc;

border-top:0px solid #ccc; border-bottom:0px solid #ccc; 

 width:740px;

 margin:100px;

background: url('3rightcol.jpg') repeat-y top right;

}

#menu{

   margin: 0 auto;

   width: 740px;

   background: #ff66ff;

   border-right: 1px solid #ff66ff

   border-left: 1px solid #ff66ff;

   border-bottom: 1px solid #ff66ff;

   color: #fff;

}

#menu ul{

   margin: 0;

   padding-left: 0;

   list-style: none;

}

#menu li{

   font-size: 1.1em;

   display: inline;

   margin: 0;

   padding: 0;

}

#menu a:link, #menu a:visited{

   float: left;

   background: #ff66ff;

   color: #fff;

   margin: 0em;

   padding: 0.3em 1.5em 0.3em 1.5em;

   text-decoration: none;

   border-right: 1px solid #ff66ff;

}

#menu a:hover, #menu a:focus, #menu a:active{

   color: #0066ff;

}

div#content{

   border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; width: 740px;

   border-top: 0px none;

   border-bottom: 0px none;

   background: #fff;

   color: #000;

}

div#content p {

    text-align:center;

   font-variant: small-caps;

   font-size: 100%;

   line-height: 1.8em;

   padding-left: 1em;

   padding-right: 1em;

}

div#content h1 {

    text-align:center;

   padding-bottom: 0.3em;

   padding-top: 0.3em;

   font: normal 180% Georgia, "Times New Roman", Times, serif;

   color: #05181E;

   background-color: #FFFFFF;

}

div#content li {

color:#cc3300;

}

cosi va bene?

adesso sono riuscita a centrare la pagina web ma la visualizzazione  venuta un po troppo in basso io vorrei che la pagina fosse visualizzata un pò più in alto, mi dici cosa devo correggere perchè ciò avvenga?

div#content h2{

    text-align:center;

   background: #fff;

   color: #940D1E;

   padding-bottom: 0.3em;

   font: normal 150% Georgia, "Times New Roman", Times, serif;

   border-bottom: 1px dotted #FF9006;

}

div#content a:link, div#content a:visited {

   font-size: 95%;   

   font-weight: normal;

   color: #41545F;

   background-color: #fff;

   text-decoration: underline;

}

div#content a:hover {

   color: #fff;

   background-color: #41545F;

   text-decoration: none;

}

#footer{

   margin: 0 auto;

   width: 740px;

   background: #ff66ff;

   text-align: center;

   color: #fff;

   border: 1px solid #000;

   border-top: 1px;

   border-bottom: 1px;

   font-family: helvetica, arial, verdana, tahoma, sans-serif;

   padding: 0.8em 0.8em;

}

#footer a:link, #footer a:visited {

   color: #fff;

   background-color: #41545F;

   text-decoration: underline;

}

#footer a:hover {

   text-decoration: none;

   color: #41545F;

   background-color: #fff;

}

#lista{

    margin-left:250px; width: 400px;

   background: #fff;

   color: #000;

    padding-left:0.8em;

    padding-right:0.8em;

    padding-top:1.25em;

    padding-bottom:1.25em

}

risposto 8 anni fa
mela
mela
1
X 0 X

Sintassi errata:

#header h1

#header h2

#footer a:hover

#footer a:link, #footer a:visited

#menu ul

#menu li

#menu a:link, #menu a:visited

#menu a:hover, #menu a:focus, #menu a:active

Sintassi inesistente:

div#content a:hover

div#content h1

div#content li

div#content p

Man mano che correggi vedi che la pagina si sistema, però come ti ho detto nel mio post precedente usa le classi e non gli id, nel tuo caso fai prima.

risposto 8 anni fa
LonelyWolf
X 0 X

Io mi permetto, spero che tu non abbia problemi con l'inglese e parti da qua:

http://www.w3schools.com/css/default.asp

Autodidatta va bene, ma senza fonti corrette non si va avanti e a te mancano basi importanti.

risposto 8 anni fa
LonelyWolf
X 0 X

per favore aiutami a centrarlo

risposto 8 anni fa
mela
mela
1
X 0 X

Vabbè per questa volta, visto che 2 minuti liberi li ho ti metto il codice corretto, però non controllo dimensioni/colori/misure e sono ancora tutte da vedere quelle, dal tuo codice originale.

I css dovrebbero servire a facilitare il lavoro, come l'hai fatto tu l'ha raddoppiato.

Il css corretto:

body{
   margin: 0;
   padding: 0;
   margin-bottom: 0.95em;
   font-family: arial, helvetica, verdana, tahoma, sans-serif;
   font-size: 80%;
   color: #000;
   background-color: #fff;
   line-height: 180%;
}
#header{
    margin:0 auto; width: 740px;
   height: 100px;
   border-top: 1px none;
   border-bottom: 1px none;
   background-image: url('img01.jpg');
   background-repeat: no-repeat;
   background-position: right bottom;
   background-color: #ff3300;
   color: #000;
}
h1#header{
    text-align:center;
   margin: 0;
   font: normal 200% Georgia, "Times New Roman", Times, serif;
   color: #0033cc;
   background-color: #0066ff;
   padding-left: 0.6em;
   padding-top: 0.1em;
}
 h2#header{
   text-align:center;
   margin: 0;
   font: normal 200% Georgia, "Times New Roman", Times, serif;
   color: #0033cc;
   background-color: #0066ff;
   padding-left: 0.6em;
   padding-top: 0.1em;
}
div#container{
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:0px solid #ccc; border-bottom:0px solid #ccc; 
 width:740px;
 margin:100px;
background: url('3rightcol.jpg') repeat-y top right;
}

#menu{
   margin: 0 auto;
   width: 740px;
   background: #ff66ff;
   border-right: 1px solid #ff66ff;
   border-left: 1px solid #ff66ff;
   border-bottom: 1px solid #ff66ff;
   color: #fff;
}
ul#menu{
   margin: 0;
   padding-left: 0;
   list-style: none;
}
 li#menu{
   font-size: 1.1em;
   display: inline;
   margin: 0;
   padding: 0;
}
a:link#menu, a:visited#menu{

   background: #ff66ff;
   color: #fff;
   margin: 0em;
   padding: 0.3em 1.5em 0.3em 1.5em;
   text-decoration: none;
   border-right: 1px solid #ff66ff;
}
a:hover#menu, a:focus#menu ,a:active#menu {
   color: #0066ff;
   
}
div#content{
   border-left:1px solid #000; border-right:1px solid #000; margin:0 auto; width: 740px;
   border-top: 0px none;
   border-bottom: 0px none;
   background: #fff;
   color: #000;
}
p#content{
    text-align:center;
   font-variant: small-caps;
   font-size: 100%;
   line-height: 1.8em;
   padding-left: 1em;
   padding-right: 1em;
}
h1#content  {
    text-align:center;
   padding-bottom: 0.3em;
   padding-top: 0.3em;
   font: normal 180% Georgia, "Times New Roman", Times, serif;
   color: #05181E;
   background-color: #FFFFFF;
}

li#content  {
color:#cc3300;
}

h2#content {
    text-align:center;
   background: #fff;
   color: #940D1E;
   padding-bottom: 0.3em;
   font: normal 150% Georgia, "Times New Roman", Times, serif;
   border-bottom: 1px dotted #FF9006;
}
 a:link#content, a:visited#content {
   font-size: 95%;   
   font-weight: normal;
   color: #41545F;
   background-color: #fff;
   text-decoration: underline;
}
a:hover#content {
   color: #fff;
   background-color: #41545F;
   text-decoration: none;
}
#footer{
   margin: 0 auto;
   width: 740px;
   background: #ff66ff;
   text-align: center;
   color: #fff;
   border: 1px solid #000;
   border-top: 1px;
   border-bottom: 1px;
   font-family: helvetica, arial, verdana, tahoma, sans-serif;
   padding: 0.8em 0.8em;
}
 a:link#footer, a:visited#footer {
   color: #fff;
   background-color: #41545F;
   text-decoration: underline;
}
a:hover#footer {
   text-decoration: none;
   color: #41545F;
   background-color: #fff;
}

#lista{
    margin-left:250px; width: 400px;
   background: #fff;
   color: #000;
    padding-left:0.8em;
    padding-right:0.8em;
    padding-top:1.25em;
    padding-bottom:1.25em
}

Il file html corretto:

<head>
<title>Layout fisso n.01/F</title>

<link href="css.css" rel="stylesheet" type="text/css" title="default" />
</head>

<body>
         <div id="container">
   <div id="header">
   <h1 id="header">CORSO WEB-DEVELOPER  ANNO 2007-2009</h1>
        <h2 id="header"> In collaborazione con l'as.so ri o.l.u.s e la knowk srl</h2>
   </div>

   <div id="menu">
         <ul id="menu">
         
         <li id="menu"><a href="#" title="HOME" id="menu">HOME</a></li>
         <li id="menu"><a href="#" title=" NEWS" id="menu">NEWS</a></li>
         
         </ul>
   </div>

<div id="content">
   
   <h2 id="content">MATERIE CORSO WEB-DEVELOPER</h2>
   
   <p id="content">
   il corso della durata di due anni ha previsto le seguenti materie:
            html, css, flash mx,  dreamweaver mx, fireworxs mx, mysql, php,
           apache,javascript, e xml, inglese, cultura d'impresa,
        <em>cultura dell' ambiente</em> i moduli per la patente europea.
   </p>
   
   <h2 id="content">INTRODUZIONE</h2>
   
   <p id="content">
   Ora vedremo per sommi capi, come è stata progettata questa pagina web:
   </p>
   
   <h2 id="content"> STRUTTURA PAGINA WEB</h2>
   
         <p id="content">
        Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti.
        Strutturare logicamente i contenuti di una pagina, creare un template (modello)
        e pensare che tutti i contenuti di un sito saranno facilmente inseribili da subito
        e in futuri aggiornamenti e mantenimenti del sito, è una fase fondamentale.
        Vediamo le principali sezioni logiche di un sito web:
        <div id="lista">
         <ul>
         <li>L' header (testata)</li>
         
           <li>La navigazione (menù)</li>

         <li>Il footer (pie' di pagina)</li>
     
         <li>La sezione extra (sottesa o assente)</li>

      </ul>
      </div>
     </p>
</div>
</div>

<div id="footer"> sito ideato da: Mazziotti Alessandra <a href="mailto:web.mazziotti@assori.it" id="footer">
   Contattami
 </a>
</div>
</body>
</html>   
risposto 8 anni fa
LonelyWolf
modificato 8 anni fa
X 0 X

Grazie scusami per il disturbo, auguri di Buon Natale!,arrivederci alla prossima volta! :bye:

risposto 8 anni fa
mela
mela
1
X 0 X

Auguri anche a te.

risposto 8 anni fa
LonelyWolf
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda