- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Menu e footer con i CSS
-
Menu e footer con i CSS
Ciao a tutti... in un template che sto creando con i CSS ho le seguenti parti:
- banner: inserito
- barra: inserita
- menu: dà problemi
- spazio contenuti: ok
- footer: non inseritoPer il menu vorrei che, di pari passo all'allungarsi dello spazio centrale per i contenuri, si allungasse anche questo! Per il footer come devo fare: qualunque stringa inserisco non mi compare?
Ho inserito sia questa ad inizio pagina CSS **"#contenitore { width: 864px; height:186; top: 520; background: url(../interfaccia/footer.jpg);
position: relative; text-align: left; margin:0px auto;}" **e questa al termine **#footer2 { position:relative; width:864px; height:100%; top: 100%; background:
url(../interfaccia/footer.jpg);}
**Che devo fare? Grazie
-
Sperando che qualcuno possa rispondermi...
Questo è il contenuto del file index.html<!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" lang="it">
<head>
<title>Il mio primo template con i CSS</title>
<meta name="description" content="Il mio primo template con i CSS"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="css/struttura.css" rel="stylesheet" type="text/css"/>
<link href="css/classi.css" rel="stylesheet" type="text/css"/>
</head><body>
<body background="interfaccia/bg.jpg">
<div id="contenitore">
<!-- Intestazione del sito -->
<div id="topp"></div>
<div id="barra" class="testomenu"></div>
<!-- Fine intestazione del sito --><!-- Contneuti -->
<div align="left" id="contenuti" class="testocentro">
<div class="titolo">Intestazione centro pagina</div>
Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.Questo è un template sviluppato con i css, come puoi vedere il testo che stai leggendo ha ereditato le proprietà del class quot;testocentro", mente invece, l'intestazione, utilizza il class "titolo" specificato nel rispettivo div.
</div>
<!-- Fine Contenuti --><!-- Menu di destra -->
<div id="menuds" class="testomenu"></div>
<!-- Fine Menu di destra -->
<div id="footer2"></div>
<div id="footer3"></div></body>
</html>mentre questo è il contenuto del file struttura.css
/* CSS Document */
body { font: 13px verdana,helvetica,sans-serif; margin: 0px; background-color: #ffffff;}
#contenitore { width: 864px; height:186; top: 520; background: url(../interfaccia/footer.jpg); position: relative; text-align: left; margin:0px auto;}
#topp { width: 864px; height:90px; top: 0px; left: 0px; position: absolute; background: url(../interfaccia/header.jpg) no-repeat top left;}
#barra { width: 864px; height: 63px; top: 90px; left: 0px; position: relative; background: url(../interfaccia/barra.jpg) no-repeat top left;}
#contenuti { position:relative; width:631px; height:100%; top: 90px; background: url(../interfaccia/contenuti.jpg);}
#menuds { width: 233px; height:100%; top: 153px; left: 630px; position: absolute; background: url(../interfaccia/menu.jpg) no-repeat top left;}
#container2 { position:absolute; left:0px; top:153px; background: url(../interfaccia/contenuti.jpg); width:631px; height:100%; }
#contenuti2 { position:relative; width:864px; height:100%; top: 100%; background: url(../interfaccia/footer.jpg);}
#container3 { position:absolute; left:0px; top:100%; background: url(../interfaccia/footer.jpg); width:864px; height:150px; }
-
Prova a togliere tutte le immagini di background, e assegnare uno alla volta dei colori di background così da farti un'idea di dove posizioni i vari div e delle dimansioni. Ti aiuta molto a capire come funziona il posizionamento e il perché spariscono senza sapere dove vanno