Simulare i frame con i css

elpirata

Utente Attivo
18 Mar 2009
264
7
18
Un saluto a tutti,
ho scritto questo codice css con la speranza di riuscire a simulare i frame con l'ausilio di css.

In sostanza mi interesserebbe avere un

body 100%
header: 20%
sidebar fissa a sinistra con una larghezza: 20%
main larghezza: 80%;
main altezza: 85%
footer: 15% che fluttua alla destra della sidebar

Questo il codice che ho scritto, ma non si comporta come mi aspetto:

Codice:
/*Effettuo il reset del CSS Html 5 
guida prelevata da http://html5doctor.com/html-5-reset-stylesheet */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*Termino il reset CSS Html 5*/

 

/*Da qui inizia il codice CSS del mio sito*/

html,body{
    height:100%;
    margin:0;
}

body{
    background-color: #E0E0E0;
    color: #000000;
    margin: 0px;
    overflow: Hidden;
}

div{
    font: Normal 12px Verdana;
}

h1{
    font: Bold 35px 'Times New Roman';
}

#container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -50px; 
}

#header{
    background-color: #008080;
    color: #FFFFFF;
    height: 15%;
    padding: 5px;
    overflow: Hidden;
}

#sidebar{
    float: Left;
    width: 17%;
    padding: 5px;
    overflow: Auto;
	margin-top:20px;
	height: 100%;
}

#main{
    background-color: #FFFFFF;
    float: right;
    width: 80%;
    height: 85%;
    padding: 5px;
    overflow: Auto;
	margin-right:20px;
	margin-top:20px;
}

#footer, #push {
        height: 50px; 
	float: right;
        clear: both;
}

Mi dareste una mano ? :byebye:
 
Cosa vorresti da noi in sostanza?
 
Ciao Max1,

Volevo solo una mano a capire come estendere la sidebar per tutta l'altezza della pagina idem per il main,bloccando l'header alla percentuale impostata. (Cosi come sta, l'header di allunga verso il basso se il contenuto supera il 20%)

Grazie
 

Discussioni simili