sito 3 colonne fixed/fixed/liquid

**ronnin** · 25-05-2008, 22:29

ciao a tutti!
sto impazzendo per far funzionare un layout a div e css...

vi spiego:
ho un sito fatto da

testata
menu/colonnacentrale/colonna
piede

sono riuscita a mettere il footer sempre in fondo, c'e' un piccolo problema pero'.. se apro la pagina e dopo ridimensiono la finestra accorciandola, non capisco perche' il footer si alza e non rimane attaccato al bordo inferiore.

inoltre se allungo la colonna centrale NON SUCCEDE NULLA!
nel senso che le colonne laterali se ne fregano altamente! ho cercato in giro ma non riesco a venirne fuori..

in più altro problemino, il mio layout prevede le prime 2 colonne a dimensione fissa e la terza variabile, dovrebbe estendersi fino al bordo dx della finestra qualunque esso sia! ma non lo fa...

qualcuno che sappia aiutarmi??

http://hellolen.com/2008/gallery.htm --> questa la pagina di test che ho fatto
http://hellolen.com/2008/main.css --> questo il foglio di stile

grazie in anitcipo a tutti!

**Myaku** · 26-05-2008, 07:52

Originariamente inviato da ronnin
inoltre se allungo la colonna centrale NON SUCCEDE NULLA!
nel senso che le colonne laterali se ne fregano altamente! ho cercato in giro ma non riesco a venirne fuori..

ora non ho modo di esaminare il codice nel dettaglio, ma ho notato che fai uso di float ma non ci metti il clear.
Inoltre, per "se allungo la colonna centrale NON SUCCEDE NULLA!
nel senso che le colonne laterali se ne fregano altamente!" ti può tornare utile fare una ricerca per "faux columns"

in più altro problemino, il mio layout prevede le prime 2 colonne a dimensione fissa e la terza variabile, dovrebbe estendersi fino al bordo dx della finestra qualunque esso sia! ma non lo fa...

prova a partire dagli esempi di layout gala, dovrebbe esserci qualcosa di simile a quello che cerchi

ps. per il menu le voci andrebbero organizzate come lista, e le immagini richiedono l'attributo "alt"

**ronnin** · 26-05-2008, 09:07

ciao! grazie per la risposta!
cmq il menu...ho provato a organizzarlo come lista!!
ma su explorer le spaziature di interlinea erano troppo ampie e non riuscivo a gestirle...

l'alt lo mettero'... adesso sto solo cercando di far funzionare la baracca.....

provo con i consigli che mi hai dato.. ma ti dico gia che di faux columns non e' che ci capisca molto.. ho un sacco di sfondi diversi..

**ronnin** · 26-05-2008, 09:23

parto subito dicendo che fra i layout gala ho trovato quello che fa per me!!
quindi adesso me lo studio per bene e cerco di venirne fuori!!

grazzzzzzzzzzzzieee!!!!

**ronnin** · 11-06-2008, 15:13

rieccomi..
dopo varie prove, e nonostante avessi trovato il medello che pensavo facesse per me..
mi duole comunicare che non sono riuscita ad ottenere quello che mi serve!

se tolgo il testo da dentro la terza colonna infatti questa si chiude! ma a me serve vuota....

posto il codice della mia pagina:

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>..:: Hello Len - cosplay &amp; manga art ::..</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>


<link href="main_1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img {
   behavior: url("pngbehavior.htc");
}
</style>
</head>

<body>
<div id="container">

<div id="testata">[img]images/tetata_cosplay_Senna.jpg[/img]</div>


<div id="content" class="cleared">


<div id="logo">

<div id="hellolen">

<div id="menu">

[img]images/menu/home.gif[/img]

[img]images/menu/chisono.gif[/img]

[img]images/menu/updates.gif[/img]

[img]images/menu/cosplay.gif[/img]

[img]images/menu/events.gif[/img]

[img]images/menu/modeling.gif[/img]

[img]images/menu/artgallery.gif[/img]

[img]images/menu/focus.gif[/img]

[img]images/menu/banner.gif[/img]

[img]images/menu/link.gif[/img]

[img]images/menu/guestbook.gif[/img]

[img]images/menu/contatti.gif[/img]</div>
<div id="sottomenucosplay">
[img]images/menu/cosplay/zoro.gif[/img]

[img]images/menu/cosplay/chii.gif[/img]

[img]images/menu/cosplay/arale.gif[/img]

[img]images/menu/cosplay/cure.gif[/img]

[img]images/menu/cosplay/emi.gif[/img]

[img]images/menu/cosplay/senna.gif[/img]

[img]images/menu/cosplay/arrow.gif[/img]

[img]images/menu/cosplay/tecna.gif[/img]

[img]images/menu/cosplay/megara.gif[/img]

</div>
</div>
</div>


<div id="colonna">COLONNA</div>


<div id="linea">
<div id="cosplay"></div>
</div>

</div>


<div id="piede">[img]images/piede.gif[/img]</div>

</div>
</body>
</html>

e del css

codice:

@charset "utf-8";
/* CSS Document */

html,body{margin:0; padding: 0;height: 100%}
div#container{position: relative; height:100%; }
body>div#container{height: auto; height:100%; min-width:950px; min-height:600px;  }
div#linea{
height:90%;
background:url(images/banda.gif) bottom repeat-x;
padding:0;
float:left;
margin-left:-8px;
margin-right:0px;
text-align:left;
z-index:32;}


div#piede{position:absolute; bottom:0; margin:0; padding:0; width: 100%; text-align:left; border-bottom:#99FFFF solid 1px; border-top:#99FFFF solid 1px;}
body{ background: #7a008c url(images/fondo_stelle.gif) top no-repeat left}

#testata{ width:100%;height:175px; text-align:left; position:relative}
#testata img { padding:0; padding-left:408px; }
div#content{ width:100%; position:relative; bottom:0; height:75%; padding:0;  }
		
#menu{
width:416px;
height:10px;
padding:0;
text-align:right;
position:absolute;
margin-top:0; padding:0; line-height:14px;
z-index:32;
}

#sottomenucosplay{
width:415px; 
height: 200px;
padding:0;
text-align:left;
z-index:31;
float:right;
position:relative;
margin:0px; 
padding:0; 
line-height:14px; 
padding-top:44px; 
background:url(images/menu/cosplay/puntini_cosplay.gif) top right no-repeat;
}

div#hellolen{
width:420px; 
padding:0;
text-align:center;
background:url(images/logo_hellolen.gif) bottom right no-repeat;
min-height: 300px;
height: 90%;
}

html>body #hellolen{
width:419px; 
float:left;
padding:0;
text-align:center;
background:url(images/logo_hellolen.png) bottom right no-repeat;
min-height: 300px;
height: 90%;
}

#logo{
width:420px; 
float:left;
padding:0;
text-align:center;
background:url(images/linea.gif) bottom right repeat-y;
min-height: 300px;
height: 100%;
}

div#colonna{
width:384px;
background:url(images/colonna.gif) center repeat-y;
float:left;
padding:0;
text-align:center;
height: 100%;
border-bottom:#99FF55 solid 1px; border-top:#99FF55 solid 1px;
}

html>body #colonna{
width:384px;
background:url(images/colonna.png) center repeat-y;
float:left;
padding:0;
text-align:center;
min-height: 360px;
height: 100%;
border-bottom:#99FF55 solid 1px; border-top:#99FF55 solid 1px;
}

div#linea{
width:auto; 
height:90%;
background:url(images/banda.gif) bottom repeat-x;
padding:0;
float:left;
margin-left:-8px;
margin-right:0px;
text-align:left;
z-index:32;
 }
 
html>body #linea{
width:auto; 
min-height: 300px;
background:url(images/banda.gif) bottom repeat-x;
height: 90%;
padding:0;
float:left;
margin-left:-8px;
margin-right:0px;
text-align:left;
 z-index:32;
 }
 
  #cosplay{
background:url(images/banda_cosplay.gif) bottom left no-repeat;
width:120px; 
height:100%;
padding:0;
margin-right:0px;
text-align:left;
min-height: 300px;
 } 
 
 
#menu img { padding-bottom:3px; padding-right:5px}
#sottomenucosplay img { padding-bottom:3px; margin-left:239px;  padding-left:0}

#menu ul { list-style:none; margin-top:0; padding:0; line-height:14px;  }
#sottomenucosplay ul { list-style:none; margin:0px; padding:0; line-height:14px; padding-top:43px; background:url(images/menu/cosplay/puntini_cosplay.gif) top right no-repeat;  }

#menu ul li{ margin:0px; padding:0 }
#sottomenucosplay ul li{ margin:0px; padding:0; }

Discussione: sito 3 colonne fixed/fixed/liquid

Strumenti discussione

Ricerca discussione

Visualizza

sito 3 colonne fixed/fixed/liquid

Re: sito 3 colonne fixed/fixed/liquid

Permessi di invio