Salve a tutti, seguendo un post sto creando un layout che dovrebbe essere così strutturato:
Topmenu (largo quanto tutta la pagina)
colonna sinistra sempre fissa (finto frame) con altri 3 div al suo interno
contenuti
footer (largo quando tutta la pagina)
Per il file html sto usando:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">
<head>
<title>Colonna sinistra fissa: per IE 5 Windows e superiore</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css" media="screen">@import url(stile.css );</style>
<!--[if IE]>
<link href="stileie.css" media="screen" type="text/css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div id="topmenu">topmenu</div>
<div id="content">
contenuti scroll </p>
</div>
<div id="menusx">
<div id="sx1">sx1</div>
<div id="sx2">sx2</div>
<div id="sx3">sx3</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
il css invece è il seguente:
body {
margin: 0;
padding: 0 0 0 15em;
background: #fff;
font-size: .9em;
font-family: "trebuchet ms", trebuchet, georgia, verdana;
}
#topmenu {
height: auto;
width: 100%;
position: fixed;
background-color: #03F;
padding-left: 10px;
}
#menusx{
overflow: auto;
height: 100%;
width: 15em;
position: absolute;
top: 0;
left: 0;
color: #000;
background: #e5e5e5;
margin: 0;
padding-left: 10px;
}
#menusx h2{
margin:0;
padding:5px 0 5px 10px;
font-size:1.3em;
color:#f60;
}
#content {
padding-top: 20px;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 1em;
}
#content h1 {
margin:0;
padding: 0 0 5px 15px;
font-size:2em;
color:#f60;
}
#footer {
height: auto;
width: 100%;
background-color: #C36;
padding-left: 10px;
}
p{
margin:0;
padding:5px;
}
@media screen
{
body>div#menu
{
position: fixed;
padding-left: 10px;
}
Vorrei estendere sia il topmenu (in alto) a piena pagina, sia il footer in basso.
Ho provato in diversi modi ma entrambi restano sempre all'interno del content.
Un aiutino???
Grazie a tutti!
SW
Rispondi quotando
