Ciao a tutti,
sto scrivendo un layout per un sito che ha il seguente markup
Vi spiego il problema: nel body vorrei mettere una immagine con gradiente da ripetere lungo la x. Ora però io ho iniziato a scrivere il css, prendendo molto spunto dagli articoli su html.it. Quindi ho iniziato col codice per fare dei settaggi "standard" su tipografia, line-height e spazi bianchi. In seguito ho inziato ad aggiungere regole specifiche per il mio layout. In sostanza quello che succede è che non vede bene i settaggi della proprietà background per il body.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CIRDIS s.a.s.</title> <link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" /> </head> <body> <div id="header"> <h1>Qui il logo</h1> </div> <div id="container"> <div id="content"> <h3>Titolo</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at mauris. Maecenas suscipit vestibulum turpis. Mauris mauris metus, gravida vitae, iaculis ut, varius eu, pede. Sed pede. Nullam risus. Donec eros. In vestibulum, magna vel viverra accumsan, justo metus suscipit lorem, ut porttitor neque ipsum vitae enim. Nam pharetra augue vitae velit. Suspendisse vitae sapien. Donec ultricies augue et pede. Mauris congue, mi eu pretium pulvinar, diam felis porta nisi, nec pellentesque ipsum lorem at velit. Fusce rhoncus mi id tellus. Integer aliquam tincidunt mauris. Phasellus dolor mauris, tempor eget, sagittis eget, bibendum eu, ante. Nam at sapien. Fusce tempus nunc. Fusce at velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra vehicula nunc.</p> </div> <div id="menu"> <ul> <li id="active">Home page [*]Chi siamo [*]Prodotti [*]Servizi [*]Contatti [/list] </div> </div> <div id="footer"> qui il footer</p> </div> </body> </html>
Ora posto anche il css:
Quello che si vede è una pagina di colore grigio #ececed uniforme, invece che una pagina sfumata.codice:/* Settaggi di base per TIPOGRAFIA, LINE-HEIGHT, SPAZI BIANCHI (margin e paddin "armonizzati") */ /* ********** TIPOGRAFIA ********** */ /* stili sul body e tipografia (il lineheight non è specificato nel body, perchè interverrebbe su tutti gli elementi, andando così a generare spazi bianchi indesiderati) */ body{font: 100.01% Arial, Helvetica, sans-serif} h1{font-size: 2.4em} h2{font-size: 1.8em} h3{font-size: 1.4em} h4{font-size: 1.2em} h5{font-size: 1em} h6{font-size: 0.85em} /* ********** LINE-HEIGHT ********** */ /* line-height per gli elementi principali della pagina */ p, blockquote, pre, ol, dl, ul, form {line-height:1.5} /* ********** SPAZI BIANCHI ********** */ /* resetta i margini di html e body ( e tuttti gli elementi annidati??? ) */ html, body { margin: 0;padding: 0 } /* setta i margini per i principali elementi della pagina */ h1, h2, h3, h4, h5, h6 { margin: 0.7em 0 0.2em } address, blockquote, dl, form,fieldset, ol, table, p, pre, ul { margin-top: 0.2em; margin-bottom: 1.2em } /* ********** settagi specifici del layout ********** */ body{background: #ececed url(img/bg.png) repeat-x top left}
Dov'è che sbaglio?
Spero che riusciate a darmi qualche consiglio perchè mi ci sto un po' impazzendo.
Ciao.
Marco.
Rispondi quotando
