www.MegaLab.it

da **lostboy** » mer gen 03, 2007 1:23 pm

/* impostazionidi layout */
body,
html{
margin:0;
padding:0;
}
body {
min-width:720px; /* Prevent content from becoming unreachable in Gecko */

}
/* position:absolute for all browsers - the whole page scrolls */
div#headerwrap {
position:absolute;
width:100%;
top:0;
left:0;
height:140px;
}
/* position:fixed for modern browsers - header and footer do not scroll */
body>div#headerwrap {
position:fixed;
}
div#header {

height:110px;
width:720px;
margin:0 auto;
}
div#bordo_sup_2 {
height:30px;
width:720px;
margin:0 auto;
}
div#login
{
float:right;
height:140px;
width:110px;
margin:0 auto;
}

/* set a left margin to compensate for IE/Win always making room for a scrollbar */
div#middlewrap {
/* set left margin and bottom padding for IE5/Win */
padding:140px 0 0 0;
margin-left:0;
/* set left margin and bottom padding for others */
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;
padding-bottom:0px;

}
/* set left margin for modern browsers */
body>div#middlewrap {
margin-left:0;
}
div#middle {
width:720px;
margin:0 auto;

}

#bordo_sx {
height:100%;
width:30px;
float:left;
overflow:hidden;
}
#content {
height:100%;
width:450px;
float:left;
overflow:auto;
}
#bordo_cen {
height:100%;
width:30px;
float:left;
overflow:hidden;
}
#sidebar {
height:100%;
width:180px;
float:left;
overflow:auto;
}
#bordo_dx {
height:100%;
width:30px;
float:left;
overflow:hidden;
}

/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
width:100%;
p\osition:absolute;
bottom:0;
left:0;
height:70px;
}
body>div#footerwrap {
position:fixed;
}
div#footer {
height:70px;
width:720px;
margin:0 auto;
}

/* Impostazioni grafiche, stile , colori ecc. */

body,
html{
font-family:"Trebuchet MS", Georgia, Verdana, serif;
color:#ffffff;
background-image:url(../img/sfondonatale_body.gif);
}

div#header{
background-repeat:no-repeat;
background-image:url(../img/logonatale.jpg);
}

div#bordo_sup_2 {
background-position:top center;
background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
}

div#middle
{
background-repeat:repeat-y;
background-image:url(../img/);
}

div#bordo_dx {
background-position:top right;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_dx.jpg);
}

div#content {

}

div#bordo_cen {
background-position:top center;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_sx.jpg);
}

div#sidebar {

}

div#bordo_sx {
background-position:top left;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_sx.jpg);
}

div#footer {

background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
background-image:url(../img/sfondonatale_body.gif);
color:#eee;
}

div#sotto{
background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
}

/* impostazioni paragrafi, ecc formattazione */

div #header p {
margin:0;
padding:0;
text-align:center;
}

ul#tabnav {

list-style-type: none;
margin: 0;
padding-left: 200px;
padding-bottom: 24px;
border-bottom: 1px solid #711515;
font: bold 11px verdana, arial, sans-serif;
}
ul#tabnav li {

float:left;
height: 21px;
background-color: #B51032;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid #711515;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #F4869C;
color: #FFFFFF;
}
body#recipes li.recipes, body#contact li.contact, body#articles li.articles, body#buy li.buy {
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
body#recipes li.recipes a:link, body#recipes li.recipes a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#articles li.articles a:link, body#articles li.articles a:visited,
body#buy li.buy a:link, body#buy li.buy a:visited {
color: #000000;
background-color: #FFFFFF;
}

div#content {

}
h1,
h2 {
padding:0;
margin:0;
}
div #content p {
margin:0;
padding-left:40px;
text-align:center;
}

div#sidebar h2 {
padding-left:5px;
}
div#footer h2 {
text-align:center;
padding:0;
margin:0;
}
div #footer p {
margin:0;
padding:0;
text-align:center;
}
div#footer a {
color:#fff;
}
h1 {
font-size:1.4em;
text-align:center;
padding-top:5px;
}
h2 {
font-size:1.2em;
padding-top:1em;
margin-top:0;
}
p {
margin-bottom:0;
font-size:0.8em;
line-height:1.4em;
}
pre {
font-size:0.9em;
line-height:1.4em;
}
ul {
font-size:0.8em;
line-height:1.4em;
}

Questo è il css che uso, dopo mesi di casini ne ho fatto uno abb decente, almeno per me...

Il mio problema è che vorrei tutto il pezzo centrale non scrollasse assieme, ma solo la content e la sidebar, mentre i bordi ecc che sono anchew loro div, dovrebbero restare fissi....Si può fare?

La struttura della parter centrale in html è questa :

<div id="middlewrap">

<div id="middle">

<div id="bordo_sx"> </div>
<div id="content">Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
</div>
<div id="bordo_cen"> </div>
<div id="sidebar">
<h2>Shout - Box</h2>
 
<iframe src="../pagine/Sezioni/Shout-Box/index.php" width="130" height="325" frameborder="0">
</iframe>

</div>
<div id="bordo_dx"> 
</div>

</div>

</div>

Vi prego aiutatemi, è un pacco di temo che non capisco come risolvere...Grazie mille per l'aiuto in anticipo---

www.MegaLab.it

Hel css layout

Hel css layout

Chi c’è in linea