|
|||||||
|
|
|
 |
|
|
Strumenti |
07-05-2008, 19:50
|
#1 |
|
Junior Member
Iscritto dal: Apr 2008
Messaggi: 7
|
[CSS] Problema footer...disperazione
Se andate quà: http://www.siatec.net/andrea/archivi.../template.html
c'è un mega footer...ok tutto bene finchè la finestra del broswer è completamente aperta ma se la riducete succede un casino con il footer...la colonna destra del footer finisce sotto la colonna sinistra e si vede male in generale...provate per capire bene...vi prego help me sono disperato non ne esco Il codice HTML è: Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default.css" type="text/css" />
</head>
<body>
<div id="centrato">
<div id="intestazione">
<div id="logo"></div>
<div id="spot1"></div>
</div>
<div id="mainmenu"></div>
<div id="corpo">
<div id="upperbox">
<div id="recefoto"></div>
<div id="spot2"></div>
</div>
<div id="colonna-1">
<div id="primo">
<div class="box1-top"><div>Recensioni modelli</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">Alfa Romeo</div>
<div class="contenuto_primo">Audi</div>
<div class="contenuto_primo">BMW</div>
<div class="contenuto_primo">Crhisler</div>
<div class="contenuto_primo">Citroen</div>
<div class="contenuto_primo">Fiat</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">MG</div>
<div class="contenuto_primo">Mini</div>
<div class="contenuto_primo">Mitsubishi</div>
<div class="contenuto_primo">Nissan</div>
<div class="contenuto_primo">Opel</div>
<div class="contenuto_primo">Peugeot</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultime 10 ricerche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="boxsin">
<div class="contenuto_primo">Ricerca 1</div>
<div class="contenuto_primo">Ricerca 2</div>
<div class="contenuto_primo">Ricerca 3</div>
<div class="contenuto_primo">Ricerca 4</div>
</div>
<div class="boxdes">
<div class="contenuto_primo">Ricerca 5</div>
<div class="contenuto_primo">Ricerca 6</div>
<div class="contenuto_primo">Ricerca 7</div>
<div class="contenuto_primo">Ricerca 8</div>
</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Ultimi post e video</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Lorem ipsum dolor sit amet</div>
<div class="box1_single_cont">Lorem ipsum dolor sit amet</div>
<div class="box1_single_cont">Lorem ipsum dolor sit amet</div>
<div class="box1_single_cont">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Statistiche</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Recensioni in archivio: 1000</div>
<div class="box1_single_cont">Commenti inserito: 637</div>
<div class="box1_single_cont">SVoti inseriti: 2045</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
<div class="generic_sin_box">
<div class="box1-top"><div>Directpry</div></div>
<div class="box1-sfondo">
<div class="box1-contenitore">
<div class="box1_single_cont">Adesivi</div>
<div class="box1_single_cont">Altro</div>
<div class="box1_single_cont">Annunci auto</div>
<div class="box1_single_cont">Aziende</div>
<div class="box1_single_cont">Moto</div>
<div class="box1_single_cont">Officine</div>
<div class="box1_single_cont">Portali</div>
<div class="box1_single_cont">Tuning</div>
<div class="box1_single_cont">Tuning Shop</div>
</div>
</div>
<div class="box1-footer"></div>
</div>
</div>
<div id="colonna-2">
<div id="searchbox1"></div>
<div id="voci_articoli">
<div id="menu2"><p>Raduni - news - novità - ultimi raduni inseriti</p></div>
<div id="voci_articoli_sin">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="voci_articoli_des">
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
<p>Tuning Day Scandiano (RE) - 17/05/2008 La manifestazione del Tuning più ricca ed interessante della provincia di Reggio Emilia</p>
</div>
<div id="art_home">
<p class="art_title">Invia la tua recensione</p>
<p class="art_testo">Invia il tuo articolo allo staff di Auto Elaborate utilizzando il MODULO DI INVIO, lo vedrai pubblicato in tempo reale. L'invio dell'articolo è completamente GRATUITO, così come la registrazione al sito. Per richieste particolari, aggiornamenti o recensioni fuori dalla norma, invia una mail a RECENSIONI ([email protected]) specificando il link della recensione da aggiornare.</p>
<p class="art_title">Di cosa tratta Auto Elaborate?</p>
<p class="art_testo">Il sito Auto Elaborate nasce dalla passione per l'Auto Tuning, fenomeno che colpisce i giovani e i meno giovani che si divertono nel personalizzare l'auto per uscire dall'anonimato.</p>
<p class="art_testo">L'idea è quella di creare un punto di incontro tra appassionati del settore e dare la possibilità ad ognuno di scrivere una recensione della propria auto potendo inserire anche le foto della propria auto elaborata.Ogni recensione ha la possiiblità di essere commentata e votata come ogni singola foto del tuning della propria autovettura.</p>
<p class="art_testo">Il sito contiene molti modelli di auto elaborate, ad esempio:</p>
<p class="art_testo">Peugeot Peugeot 1.1 tuning, Peugeot 206 tuning, Opel Astra Coupe' elaborate, Raduni Winterly and Summerly NCA modificate, Audi B5 Avant elaborate, VolksWagen Golf IV con elaborazioni, Renault Clio Renault elaborate, Raduni 1° Magik Tuning Day con elaborazioni, Ford Fiesta tuning, Opel Opel Tigra 1600 elaborate.</p>
<p class="art_testo">Su Auto Elaborate trovi tutto questo, e anche di piu !!!</p>
</div>
</div>
</div>
<div id="colonna-3">...</div>
</div>
</div>
<div id="footer">
<div id="footerup"></div>
<div id="footerbottom">
<div id="footerleft">
<p class="footer_title">Recensioni più votate</p>
<p class="footer_text">Il sito Auto Elaborate nasce dalla passione per l'Auto Tuning, fenomeno che colpisce i giovani e i meno giovani che si divertono nel personalizzare l'auto per uscire dall'anonimato.</p>
<p class="footer_text">L'idea è quella di creare un punto di incontro tra appassionati del settore e dare la possibilità ad ognuno di scrivere una recensione della propria auto potendo inserire anche le foto della propria auto elaborata.Ogni recensione ha la possiiblitïà di essere commentata e votata come ogni singola foto del tuning della propria autovettura.</p>
<p class="footer_text">Il sito contiene molti modelli di auto elaborate, ad esempio:</p>
<p class="footer_text">Peugeot Peugeot 1.1 tuning , Peugeot 206 tuning , Opel Astra Coupe' elaborate , Raduni Winterly and Summerly NCA modificate , Audi B5 Avant elaborate , VolksWagen Golf IV con elaborazioni , Renault Clio Renault elaborate , Raduni 1° Magik Tuning Day con elaborazioni , Ford Fiesta tuning , Opel Opel Tigra 1600 elaborate</p>
<p class="footer_text">Su Auto Elaborate trovi tutto questo, e anche di piu!!</p>
</div>
<div id="footerright">
<p class="footer_title">Recensioni più commentate</p>
<p class="footer_text">Il sito Auto Elaborate nasce dalla passione per l'Auto Tuning, fenomeno che colpisce i giovani e i meno giovani che si divertono nel personalizzare l'auto per uscire dall'anonimato.</p>
<p class="footer_text">L'idea è quella di creare un punto di incontro tra appassionati del settore e dare la possibilità ad ognuno di scrivere una recensione della propria auto potendo inserire anche le foto della propria auto elaborata.Ogni recensione ha la possiiblitïà di essere commentata e votata come ogni singola foto del tuning della propria autovettura.</p>
<p class="footer_text">Il sito contiene molti modelli di auto elaborate, ad esempio:</p>
<p class="footer_text">Peugeot Peugeot 1.1 tuning , Peugeot 206 tuning , Opel Astra Coupe' elaborate , Raduni Winterly and Summerly NCA modificate , Audi B5 Avant elaborate , VolksWagen Golf IV con elaborazioni , Renault Clio Renault elaborate , Raduni 1° Magik Tuning Day con elaborazioni , Ford Fiesta tuning , Opel Opel Tigra 1600 elaborate</p>
<p class="footer_text">Su Auto Elaborate trovi tutto questo, e anche di piu!!</p>
</div>
<div id="footer_down">
<p>Copyright © 2004-2007 AutoElaborate.com - P.IVA 02976690137 - Tutte le auto riportate sono possesso dei rispettivi proprietari.</p>
<p>Auto Elaborate è sponsorizzato da: Nuove auto | Adesivi Moto | INTER | Triumph, che passione! | The Fast and The Furious | Microcar Tuning | Mondo Nba | Vetrinamotori.it </p>
</div>
</div>
</body>
</html>
Codice:
body{
background-color: #20a6c1;
margin: 0;
padding: 0;
text-align: center; /* Per IE5.X/Win */
background-image: url(img/sfondobody.jpg);
background-repeat:repeat-x;
padding-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#centrato{
width: 966px;
margin: 0 auto;
text-align:left; /* Per IE5.X/Win */
}
#intestazione{
background-image: url(img/header.png);
width: 966px;
height: 137px;
padding: 0px;
}
#logo{
float: left;
background-image:url(img/logo.png);
background-repeat:no-repeat;
width: 190px;
min-height: 82px;
margin-left: 22px;
margin-top: 22px;
}
#spot1{
float: left;
background-image:url(img/publiheader.jpg);
width: 732px;
min-height: 94px;
margin-left: 5px;
margin-top: 15px;
}
#mainmenu{
background-image:url(img/menu.png);
text-align: right;
height: 47px;
padding: 0px;
}
#corpo{
background-image: url(img/sfondocorpo.png);
width: 966;
height: 1348px;
padding: 0px;
}
#upperbox{
min-height: 261px;
}
#recefoto{
float: left;
background-image: url(img/recefoto.jpg);
background-repeat: no-repeat;
width: 530px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#spot2{
float: left;
background-image: url(img/spot2.jpg);
background-repeat: no-repeat;
width: 355px;
min-height: 243px;
margin-left: 22px;
margin-top: 16px;
}
#colonna-1{
float: left;
width: 230px;
background: transparent;
}
#colonna-2{
float: left;
width: 530px;
background: transparent;
}
#colonna-3{
float: left;
width: 197px;
background: transparent;
}
/* Contenuto Colonna-1 */
#primo{
margin-left: 25px;
margin-top: 40px;
width: 208px;
}
.box1-top{
background-image: url(img/box/up-box1.png);
background-repeat: no-repeat;
height: 33px;
}
.box1-top div{
padding-top: 7px;
text-align: center;
color: #ffffff;
font-size: 14px;
font-weight: bold;
}
.box1-sfondo{
background-image: url(img/box/sfondo-box1.png);
font-size: 12px;
}
.box1-contenitore{
padding-top: 15px;
}
.boxsin{
float: left;
width: 104px;
background-image: url(img/box/des.png);
}
.boxdes{
float: left;
width: 104px;
background-image: url(img/box/sin.png);
}
.contenuto_primo{
padding-left: 20px;
text-align: left;
font-size: 13px;
font-weight: normal;
}
.box1-footer{
clear: left;
width: 208px;
min-height: 26px;
background-image: url(img/box/bottom-box1.png);
background-repeat: no-repeat;
}
.generic_sin_box{
margin-left: 25px;
margin-top: 15px;
width: 208px;
}
.box1_single_cont{
padding-left: 17px;
}
/* Contenuto Colonna-2 */
#searchbox1{
background-image: url(img/sfondosearch.png);
background-repeat: no-repeat;
width: 482px;
height: 64px;
margin-left: 20px;
margin-top: 40px;
}
#menu2{
color: #f58220;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
}
#voci_articoli{
margin-left: 25px;
margin-top: 35px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
#voci_articoli_sin{
float: left;
width: 236px;
margin-right: 22px;
background: transparent;
text-align: justify;
}
#voci_articoli_des{
float: left;
width: 236px;
background: transparent;
text-align: justify;
}
.art_title{
color: #f58220;
font-size: 14px;
font-weight: bold;
padding-top: 45px;
clear: left;
}
.art_testo{
text-align: justify;
font-size: 13px;
font-weight: normal;
}
/* Contenuto footer */
#footer{
text-align: left;
}
#footerup{
background-image: url(img/divisorefooter.png);
background-repeat: no-repeat;
height: 43px;
margin-top: 20px;
}
#footerbottom{
background-image: url(img/sfondofooter.png);
background-repeat: repeat-x;
height: 520px;
padding-left: 220px;
padding-right: 200px;
}
#footerleft{
float: left;
width: 360px;
margin-top: 16px;
padding-right: 80px;
text-align: justify;
}
#footerright{
float: left;
width: 360px;
margin-top: 16px;
text-align: justify;
}
.footer_title{
color: #ffffff;
font-size: 16px;
font-weight: bold;
}
.footer_text{
color: #000000;
font-size: 11px;
font-weight: normal;
}
#footer_down{
clear: left;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
padding-top: 90px;
}
Abc |
|
|
|
08-05-2008, 08:15
|
#2 |
|
Junior Member
Iscritto dal: Apr 2008
Messaggi: 7
|
up
|
|
|
|
|
08-05-2008, 11:07
|
#3 |
|
Senior Member
Iscritto dal: Feb 2003
Città: fra casa e lavoro
Messaggi: 1061
|
#footerleft e #footerright sono a larghezza fissa (360px)
Ovviamente se riduci la la larghezza della finestra al punto da essere minore di quella minima necessaria ad avere i due box affiancati, quello di destra 'scende'. Una soluzione può essere quella di cambiare la larghezza da fissa (a px) a fluida (in %), fai delle prove. |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 14:57.
