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:
 

Max 1

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

elpirata

Utente Attivo
18 Mar 2009
264
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Simulare i frame con i CSS HTML e CSS 0
T simulare pressione tasto Javascript 0
napuleone [Javascript] simulare click del mouse al 'onload' Javascript 1
D [Javascript] Simulare click / touch su mobile Javascript 7
V simulare App: cosa utilizzo? Programmazione 0
E Come simulare su Browser il codice scritto in Atom? Discussioni Varie 0
A [VBulletin] Simulare attività sul forum CMS (Content Management System) 0
M Simulare una SD Card sull'emulatore Sviluppo app per Android 1
W [JavaScript e prototype.js] Simulare un click su un HTMLAnchorElement Javascript 0
D Simulare Un Ping PHP 3
M [js] simulare barre scorrimento iframe Javascript 2
Fendo59 Passare parametri con metodo POST a una pagina in un frame PHP 0
Heisenberg Protocolli di rete VXLAN e Frame-Relay(ATM) Reti LAN e Wireless 0
A problema con refresh frame laterale Javascript 2
F Apertura pagina web esterna dentro un frame di un altra pagina HTML e CSS 3
A passaggio a frame con sfumatura HTML e CSS 1
B sui frame HTML e CSS 2
X cloaking, frame Discussioni Varie 0
D Frame css HTML e CSS 3
I Menu senza refresh - sostituzione vecchi frame HTML jQuery 2
A creare una mappa del sito in frame HTML e CSS 0
M Pagina Web con top link fissi senza frame HTML e CSS 1
HolidaySoft.it Modifica src su Frame in Chrome Javascript 2
N Frame HTML e CSS 6
F menu frame e pannelli a schede spry HTML e CSS 1
orlakio come inserire un frame in fondo alla pagine Webdesign e Grafica 1
M Frame noresize [Era: Frame non che non si può ridimensionare] HTML e CSS 1
S frame mobili HTML e CSS 6
C search button in un frame diverso da text form Javascript 10
O musica nel sito con frame HTML e CSS 0
M Linkare in altro frame da menu a discesa Javascript 0
S problemi passaggio dati da menù tendina ad un'altro frame Javascript 3
A uso javascript per aprire dei frame all'interno del frame principale Javascript 0
asevenx collegamento su frame HTML e CSS 1
C facebook e gmail in un frame HTML e CSS 4
G caricare 3 html diversi nello stesso frame, utilizzando 3 link.... HTML e CSS 2
R Problema a caricare Galleria SWF esterna ''PieceMaker'' su frame AS2.0 Flash 0
M Problema con frame in Internet Explorer HTML e CSS 6
O windows: antivirus rileva file html/Frame.nap Windows e Software 3
Z Email Php con frame PHP 4
T Effetto dissolvenza su frame Javascript 1
O Problemi con frame che si sovvrappongono! HTML e CSS 26
M Problemi con i frame HTML e CSS 8
S Flash cs4 Help! non vedo + frame nella timeline Flash 3
N jglidemenu e frame Javascript 2
T Problema con i Frame HTML e CSS 1
R Destinazione Frame HTML e CSS 1
M Possibile assegnare un link ad un frame di un Movie clip? Flash 10
DeAndreon Il mito dei frame HTML e CSS 5
K onmouseover in altro frame Javascript 2

Discussioni simili