Simulare i frame con i css

**condor_uk** · 23-07-2015, 09:53

Buongiorno a tutti,
sto impazzendo per la creazione di una struttura che dovrebbe prevedere una sidebar fissa a sinistra che con l'attributo overflow:auto si estenda all'occorrenza per l'altezza e un header fisso in alto.

Il mio problema è il non saper dichiarare lo spazio che dovra contenere il corpo del sito, nella struttura l'ho chiamato content, non so come dichiarare il container il il footer che si mantenga a fondo pagina a scanso di confusione posto il codice HTML:

codice HTML:

<!DOCTYPE html>
<html>
<head>
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css"  media="screen"><![endif]--> 
<link href="css/newcss.css" rel="stylesheet" type="text/css"  media="screen">
<title>Pagina di Prova</title>
</head>

<body>

<div id="container">
 
    <div id="header">
     QUESTA E' LA TESTATA
        
        <div id="navigation">QUESTO E' IL MENU ATTUALMENTE NON UTILIZZATO</div><!--#navigation attualmente non utilizzata-->
         
    </div><!--#header-->
 
        <div id="content">QUESTO DOVREBBE ESSERE IL CONTENUTO</div><!--#main-->
 
        <div id="sidebar">QUESTA E' LA SIDEBAR</div><!--#sidebar-->
     
    <div id="footer"> QUESTO E' IL FOOTER</div><!--#footer-->
 
</div><!--#container-->

</body>
</html>

Questo invece il CSS:

codice:

/*Effettuo il reset del CSS Html 5 */

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*/

/*Inserisco le regole per il media screen*/

@media screen{  
body>#header, body> #sidebar
{
position:fixed!important;
}
}  

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

body{
margin:0;  
padding:7em 0 0 13em; 
background: #fff;  
font-size: 1em; 
}

div#header, div#sidebar{  
position:absolute;  
left:0;  
overflow:auto; 
}  

#container {

}

#header {
top:0;  
z-index:10;  
width:100%;  
height:10em; 
border-bottom:1px solid #7FFFD4;  
background:#A4D3EE;
}

#navigation {

}

#content {
}

#sidebar {
top:10em; 
bottom:0; 
width:14em;  
margin:0; 
padding:0; 
border-right:1px solid #7FFFD4; 
color:#000; 
background:#A4D3EE;
}

#footer{

}

Mi dareste una mano ?

**carlomarangoni** · 23-07-2015, 14:21

Originariamente inviata da condor_uk

.......Mi dareste una mano ?

In sostanza che tipo di mano? Vorresti ti facessimo il layout completo?

**condor_uk** · 23-07-2015, 16:04

Originariamente inviata da carlomarangoni

Vorresti ti facessimo il layout completo?

Ciao carlomarangoni,
scusami se il post ha urtato la tua suscettibilità, se avessi voluto il layout completo avrei postato solo le richieste senza il codice.

Volevo solo una mano a capire come estendere la sidebar per tutta l'altezza della pagina idem per il main.

Cmq grazie lo stesso per il tempo dedicato alla risposta.

Buona giornata

**carlomarangoni** · 23-07-2015, 17:22

No! Non hai urtato nulla non farci caso!
Il problema è che (a mio avviso), metterti a posto due o tre elementi non serve a nulla perchè gli altri possono scombinare le cose, un layout deve essere armonioso fra tutti gli elementi per funzionare bene.

Discussione: Simulare i frame con i css

Strumenti discussione

Ricerca discussione

Visualizza

Simulare i frame con i css

Permessi di invio