Simulare i frame con i css

elpirata

Utente Attivo
18 Mar 2009
235
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:
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.234
322
83
Cosa vorresti da noi in sostanza?
 

elpirata

Utente Attivo
18 Mar 2009
235
7
18
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