Ciao a tutti
Ho provato a realizare un layout fluido con i margini negativi.
La pagina é visibile al seguente URL
http://elisacarli.altervista.org/flu...%20destra.html
Non viene assolutamente renderizzata bene. Dove sbaglio?
Grazie per ogni suggerimento.
PS. é indispensabile che corregga l'esempio corrente e quindi non fornire altri eventuali esempi
Prova questo:
Preso da qui:codice:<style type="text/css"> div#container{width: 100%;} div#wrapper{background-color:red} div#wrapside1{float: left;width: 100%;margin-left: -200px;background-color:#33FFFF} div#colonna_dx{float: right;width: 180px; margin-right: 10px;display: inline;font-size: 80%;background-color:#CC9999} div#colonna_sx{float: left;width: 180px;display: inline; margin:0 10px 0 210px;font-size: 80%;background-color:#009900;} div#content{margin: 0 10px 0 410px; height:auto !important;height: 1%} </style> <div id="container"> <div id="wrapper"> <div id="wrapside1"> <div id="colonna_sx">colonna di sinistra</div> <div id="content">contenuto</div> </div> <div id="colonna_dx">colonna di destra</div> </div> </div>
http://css.html.it/articoli/leggi/56...ni-negativi/2/
Spero sia abbastanza simile...
Ti ringrazio molto per la segnalazione, ma purtoppo devo necessariamente capire dove ho sbagliato e dal confronto con il layout che mi hai dato tu non riesco a capirlo, perchè non ho molta esperienza.
Pertanto spero che qualche "buona anima " mi dia una mano in questo senso.
Il mio lavoro in realtà presenta due problemi:
1) credo sia dovuto al hack box (renderizzazione diversa per i due browser)
2) l'altro al fatto che inspiegabilmente non riesco ad affiancare i div, nonostant eil comando float
riporto anche il 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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
div#container{width:100%}
div#wrapper{background-color:#FFFF00}
div#wrapside1{float:left;width:100%;margin-left:-20%;background-color:#33FFFF}
div#colonna_sx{float:left;width:20%;margin-left:20%; background-color:#009900;}
div#contenuto{float:left;width:59%;margin-left:40%;background-color:#00FF66;}
div#colonna_dx{float:right;width:20%; background-color:#CC9999}
div#pulisci{clear:both}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="wrapside1">
<div id="colonna_sx">
menu1
menu2
menu3
menu4
</div>
<div id="contenuto">
Inserire qui il contenuto
</div>
<div id="pulisci"></div>
</div>
<div id="colonna_dx">
colonna destra
</div>
<div id="pulisci"></div>
</div>
</div>
</body>
</html>
Prova così, mi sembra vada.
Non ho testato su IE ma dovrebbe andare anche li.
Studia le differenze che ci sono per capire dove sbagliavi.codice:<style type="text/css"> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } div#container{width: 100%;} div#wrapper{background-color:red} div#wrapside1{float: left;width: 100%;margin-left: /*200px*/-20%;background-color:#33FFFF} div#colonna_dx{float: right;width: 20%;margin:0;display: inline;background-color:#CC9999} div#colonna_sx{float: left;width: 20%;display: inline; margin:0 0 0 20%;background-color:#009900;} div#content{margin: 0 0 0 0;background-color:yellow;height:auto !important;height: 1%} div#pulisci{clear:both} </style> <div id="container"> <div id="wrapper"> <div id="wrapside1"> <div id="colonna_sx"> menu1 menu2 menu3 menu4 </div> <div id="content"> Inserire qui il contenuto </div> </div> <div id="colonna_dx"> colonna di destra </div> <div id="pulisci"></div> </div> </div>
Fantastico!!!!
Grazie mille
Di niente, buon lavoro
Permessi di invio
Rispondi quotando