ciao a tutti.
ho un problemino di impaginazione coi css e non riesco a venirne fuori.
La pagina è composta da un header, una colonna a sx, il corpo centrale e il footer come nell'immagine.
io vorrei che la colonna centrale arrivi fino in fondo alla pagina per poter mettere il menu in fondo come nell'immagine.
questo il codice css
e questo quella di una pag di esempio:codice:* { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; background:#000; overflow:hidden; } a { outline: none; text-decoration: none; } a:hover { text-decoration: none; } p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #wrapper { min-width: 800px; max-width: 1000px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } /* Header -----------------------------------------------------------------------------*/ #header { height: 100px; background: #000000; text-align:right; padding-top:60px; } /* Middle -----------------------------------------------------------------------------*/ #middle { width: 100%; padding: 0 0 100px; height: 1%; position: relative; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 0 0 270px; text-align:right; } /* Sidebar Left ----------------------------------------------------------------------------- */ #sideLeft { float: left; width: 150px; margin-left: -100%; position: relative; background: #000000; font-family:Arial; font-size: 14px; text-align: right; text-decoration:none; color:#ccc; height:auto; } /* Footer -----------------------------------------------------------------------------*/ #footer { margin: -100px auto 0; min-width: 800px; max-width: 1000px; height: 100px; background: #000000; position: relative; font-family:Arial; font-size:11px; color:#CCC; text-align:center; padding-top:60px; } .menufont { font-family:Arial; font-size: 14px; text-align: right; text-decoration:none; color:#ccc; } .contactfont { font-family:Arial; font-size: 11px; text-align: right; text-decoration:none; color:#ccc; } .selezionato{ color:#ef4338; text-decoration:none; }
codice:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> <!--[if lte IE 6]> <link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]--> </head> <body> <div id="wrapper"> <header id="header"> [img]Immagini/Logo350red.png[/img] </header> <section id="middle"> <div id="container"> <div id="content"> [img]Immagini/schizzo700.jpg[/img]</div> </div> <aside id="sideLeft" class="menufont"> <table width="95%" border="0" cellspacing="10px"> <tr> <td class="selezionato">Home</td> </tr> <tr> <td>Press</td> </tr> <tr> <td><a href="projects.asp">Realizzazioni</td> </tr> <tr> <td>Contatti</td> </tr> </table> </aside> </section> </div> <footer id="footer"> Copyright © 2011. Tutti i diritti riservati. P.IVA ??????? </footer> </body> </html>
Rispondi quotando