Problema con il footer

**gnato** · 30-11-2010, 11:58

Sto impazzendo per allineare il footer a fondo pagina, ecco il css:

* {
margin: 0;
padding: 0;
}

body {
background: #fff url(images/bg.jpg) repeat-x;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #222;
}

a {
text-decoration: none;
color: #99AECD;
}
a:hover {
text-decoration: underline;
color: #4F5D7F;
}

#wrap {
margin: 0 auto;
width: 1000px;
}

#header {
height: 110px
}
#header h1 {
font-size: 50px;
letter-spacing: -5px;
padding: 27px 0 0 0;
color: #fff;
}
#header h1 a {
color: #fff;
text-decoration: none;
font-weight: 600;
letter-spacing: -5px;
}
#header h1 a:hover {
color: #fff;
border-bottom: 1px dotted #fff;
}

.right {
float: right;
width: 800px;
text-align: justify;
padding-top: 5px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
}
.right h2 a:hover {

}

.left {
float: left;
width: 200px;
padding-top: 10px;
font-size: 11px;
}

.left ul {
padding: 10px 0 15px 0;
list-style-type: none;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.left ul li a:hover {

}

#footer {
text-align: center;
font-size: 13px;
color: #000;
background: #fff url(images/bg.jpg) repeat-x;
}
#footer a { color: #000; }
#footer a:hover { color: #aaa; }

Suggerimenti?

grazie mille

**codencode** · 30-11-2010, 13:15

Puoi postare anche l'HTML? Un suggerimento: utilizza la funzione CODE dell'editor per postare il codice!

**gnato** · 30-11-2010, 13:20

codice:

<head>
    <title>Title</title>
    <meta http-equiv="Content-Language" content="Italian" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="CSSStyle.css" media="screen" />
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1>Home</h1>
        </div>
        <div class="right">
            <h2>Contatti</h2>
            testo....
        </div>
        <div class="left">
            <ul>[*]Homepage[*]Chi siamo[*]Dove siamo[*]L'azienda[*]I prodotti[*]Photogallery[*]Contatti[/list]
        </div>
    </div>
    <div style="clear: both"></div>
        <div id="footer">
            Copyrigth Denis Tognana, all right reserved
        </div>
</body>
</html>

**codencode** · 30-11-2010, 13:44

Puoi modificare l'HTML in questo modo:

codice:

<body>
    <div id="wrap">
        <div id="header">
            <h1>Home</h1>
        </div>
        <div class="right">
            <h2>Contatti</h2>
            testo....
        </div>
        <div class="left">
            <ul>[*]Homepage[*]Chi siamo[*]Dove siamo[*]L'azienda[*]I prodotti[*]Photogallery[*]Contatti[/list]
        </div>
        <div id="footer">
            Copyrigth Denis Tognana, all right reserved
        </div>
    </div>
</body>

e nel CSS aggiungi

codice:

div#wrap{
     position: relative;
}

div#footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     clear: both;
}

**gnato** · 30-11-2010, 13:53

Ok è allineato ma non sul fondo...in alto?!!!

**gnato** · 30-11-2010, 13:58

risolto...grazie!!

Discussione: Problema con il footer

Strumenti discussione

Ricerca discussione

Visualizza

Problema con il footer

Permessi di invio