Layout con menu a sinistra

**flash20** · 13-04-2007, 15:27

Ciao a tutti ho realizzato un layout formato da header-colonna sinistra con menu-colonna di destra con il corpo-footer. Il layout mi funziona bene se il menu è a destra, ma se lo metto a sinistra mi da dei problemi con internet explorer, a questo link potete vedere il problema (visualizzatelo con internet explorer e con firefox e noterete la differenza) www.bruciabaracche.com/prova/index.html

Sapete aiutarmi?

di seguito vi riporto il codice utilizzato

codice:

div#container{
	position: relative;
	width:861px;
	left:50%;
	margin-left:-430px;
	background-repeat: repeat-y;
    }
div#content{
	margin-left: 235px;
	width:626px;
	left: 15px;
	background-color: #0000FF;
	height: 200px;
    }

div#navigation{
	position: absolute;
	width: 197px;
	height: 200px;
	margin-right: -50px;
	padding-left: 37px;
	background-color: #FF0000;
    }

div#footer{
	position: absolute;
	width:861px;
	height:44px;
	clear: right;
	background-color: #00FF33;
    }
div#header{
	width:861px;
	height:100px;
	background-color: #FFFF00;
    }

codice:

<html">
<head>
</head>
<body>
<div id="container">
  <div id="header">header</div>
  <div id="navigation">
    menu
  </div>
  <div id="content">
    corpo  
</div>
  <div id="footer">
footer
</div>
</div>
</body>
</html>

**Santino83_02** · 13-04-2007, 17:35

codice:

margin-right: -50px;
	padding-left: 37px;

perchè applichi al menu queste cose? visto che lo metti in absolute, digli semplicemente top e left (e cmq io avrei messo il menu di sinistra e la parte di destra in float left/right)

**flash20** · 13-04-2007, 19:55

Ho tolto margine e padding dal menu,ma non cambia niente, ho lo stesso problema. se aggiungo float si sovrappone il footer

**simulacron** · 13-04-2007, 21:07

Originariamente inviato da flash20
Ho tolto margine e padding dal menu,ma non cambia niente, ho lo stesso problema. se aggiungo float si sovrappone il footer

Se usi float , nella gabbia o in quella cosa che metti sotto il flottante devi mettere clear:left (right, o both)....

**flash20** · 13-04-2007, 21:37

ho provato ad aggiungere a navigation

float: left

a content

float: right

e footer aveva già

clear: right

Ma nn funziona, guarda ora il link sia con firefox che con explorer e guarda ke scherzo mi fa

**simulacron** · 13-04-2007, 21:54

Originariamente inviato da flash20
ho provato ad aggiungere a navigation

float: left

a content

float: right

e footer aveva già

clear: right

Ma nn funziona, guarda ora il link sia con firefox che con explorer e guarda ke scherzo mi fa

No.....

VVoVe:

Hai due possibilità.....Cambi il float di navigation in float:right;
oppure cambi il clear in both....

i float e il clear dovrebbero essere dalla stessa parte (la scelta migliore, per me....)
opppure.....
Se i float sono da parti opposte, il clear deve essere both....(non ho idea se funzioni sempre...)

**flash20** · 16-04-2007, 10:46

ho messo:
a navigation float:right;
a content senza float
e a footer float:right;

ma nn ci siamo, su explorer mi da sempre problema (Firefox è ok)

**simulacron** · 16-04-2007, 18:21

Originariamente inviato da flash20
ho messo:
a navigation float:right;
a content senza float
e a footer float:right;

ma nn ci siamo, su explorer mi da sempre problema (Firefox è ok)

No....le due gabbie (tabelle,celle)devono essere flottanti il footer clear dallo stesso lato dedi due flottanti sopra di lui....
alternativa:un posizionamento relativo di uno e assoluto dell'altro.
Il footer sotto di loro senza clear e sistematoin modo che non faccia cose strane....

**flash20** · 17-04-2007, 10:19

Non riesco a trovare una soluzione corretta, ti posto il codice css che sto usando, mi puoi dire cosa cambiare precisamente? Sto facendo mille tentativi ma nn riesco.

codice:

div#container{
	position: relative;
	width:861px;
	left:50%;
	margin-left:-430px;
	background-repeat: repeat-y;
    }
div#content{
	width:626px;
	background-color: #0000FF;
	height: 200px;
	margin-left: 235px;
    }

div#navigation{
	position: absolute;
	width: 220px;
	height: 200px;
	background-color: #FF0000;
	float:left;
    }

div#footer{
	position: absolute;
	width:861px;
	height:44px;
	clear: both;
	background-color: #00FF33;
	clear: right;
    }

Grazie

**simulacron** · 17-04-2007, 10:41

Innanzi tutto....Chi contiene che cosa?
Il container contiene navigation, content e footer?
Il margin-left del container è negativo.....quasi fuori monitor, perchè?

Discussione: Layout con menu a sinistra

Strumenti discussione

Ricerca discussione

Visualizza

Layout con menu a sinistra

Permessi di invio