Simulare i frame con i css

Discussione in 'HTML e CSS' iniziata da elpirata, 23 Luglio 2015.

  1. elpirata

    elpirata Utente Attivo

    Registrato:
    18 Marzo 2009
    Messaggi:
    213
    Mi Piace Ricevuti:
    7
    Punteggio:
    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:
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.909
    Mi Piace Ricevuti:
    290
    Punteggio:
    83
    Sesso:
    Maschio
    Cosa vorresti da noi in sostanza?
     
  3. elpirata

    elpirata Utente Attivo

    Registrato:
    18 Marzo 2009
    Messaggi:
    213
    Mi Piace Ricevuti:
    7
    Punteggio:
    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
     
Sto caricando...

Condividi questa Pagina