Aiuto FIX template

**Raffa50** · 19-05-2014, 21:24

Salve stò cercando di creare un template in html5 e css3 in stile windows8.
Ho un problema che se in contenuto è troppo grosso il menu non si espande oppure il contenuto torna a capo... aiutatemi a fixarlo ecco html e css

codice HTML:

<!DOCTYPE html><html lang='it'>    <head>        <meta charset='utf-8' />        <link type='text/css' rel='stylesheet' href='<?php echo $templatepath; ?>style.css'/>        <link type='text/css' rel='stylesheet' href='templates/css/jquery-ui.css'/>        <title>Il mio template</title>        <script src='templates/js/common.js'></script>        <script src='templates/js/jquery.min.js'></script>        <script src='templates/js/jquery-ui.min.js'></script>    </head>        <body <?php if( isset($msg) ) echo "OnLoad=\"window.alert('$msg');\"";?>>        <header><span id='logo'>CourSAW</span> <span class='hsearch'><form method="get"><input type='hidden' name='pg' value="searchcourses"><input name="scn" type="search" placeholder="cerca corsi" class="searchbox" autocomplete="off"></form></span>        	<span class='hprofile'>				<?php if( isset($_SESSION['id']) ) echo "Benvenuto ".$_SESSION['name']." ".$_SESSION['surname']; ?>            </span>        </header>        <div id='pgbody'>            <nav class='mainmenu'>                <?php					if( !isset($_SESSION['id']) ) include($templatepath."menu_index.php");					else include("menu_main.php");				?>            </nav>                <span id='content'>              <?php echo $body; ?>            </span>		</div>                <footer>Sito by <a href='http://aldrigo.sf.net'>Aldrigo Raffaele</a></footer>    </body></html>

codice:

html {    height: 100%;
    width: 100%;
}


body {
	color: #000305;
	font-size: 13px;
    line-height: 20px;
    font-family: 'Segoe UI', Tahoma, Helvetica, sans-serif;
    /*positions*/
	height: 100%;
    width: 100%;
    margin: 0;
	padding: 0;
}


header {
	margin: 0;
	padding: 0;
    height: 93px;
    width: auto;
    margin: auto;
	background: #1a1a1a;
    color: #6dc2e9;
}


.hsearch {
	margin-left: 20px;	
}


.desc {
	margin-top: 9px;
	margin-bottom: 21px;	
}


div.votebar {
	display: inline-block;
	min-width: 100px;
	min-height: 20px;	
}


div.votebarvalue {
	background: green;
	min-height: 20px;	
}


span.scrollbox {
	width:600px!important;width /**/:600px;
	height:420px !important;height /**/: 430px;
	overflow:auto;padding: 4px;
	float: left;
} 


.toleft {
	float: right;
	margin-left: 21px;	
}


.hprofile {
	display: inline-block;
	text-align: right;
	height: 100%;
	float: right;
	vertical-align: top;
	padding-top: 15px;
	margin-right: 10%;
	font-size: 18px;	
}


#logo {
 margin-left: 40px;
 font:normal 60pt Arial;
 color:#FFFFFF !important;
 text-shadow: 0 1px 0 #ccc,
 0 2px 0 #c9c9c9,
 0 3px 0 #bbb,
 0 4px 0 #b9b9b9,
 0 5px 0 #aaa,
 0 6px 1px rgba(0,0,0,.1),
 0 0 5px rgba(0,0,0,.1),
 0 1px 3px rgba(0,0,0,.3),
 0 3px 5px rgba(0,0,0,.2),
 0 5px 10px rgba(0,0,0,.25),
 0 10px 10px rgba(0,0,0,.2),
 0 20px 20px rgba(0,0,0,.15);
}


footer {
	clear: both;
    border: 1px solid black;
    height: 5.5%;
    text-align: center;
    background-color: #1a1a1a;
    color: white;
}


footer a, footer a:visited {
    font-size: 12px;
    line-height: 15px;
    color: #0FF;
}


::-moz-selection{
	background: #ff0;
}


::selection {
	background: #ff0;
}


a:link, a:visited, a:hover, a:active {
	color: #039;
    text-decoration: none;
	text-shadow: 0;
}


a:hover {
	color: #039;
	text-shadow: 1px 1px 1px #333;
	cursor:pointer;
}


.blulnk {
	color: #039;
}


#pgbody {
	min-width: 100px;
	height: 80%;
}


.redb {
	color: #F00;
	text-emphasis: bold;
	font-size: 19px;	
}


.centertxt {
	text-align: center;	
}


.bmborders {
	border: solid #000 1px;
}


.ctit {
	text-emphasis: bold;
	font-size: 21px;
}


.cheader {
	margin-top: 3px;
}


.cdesc {
	margin-top: 11px;	
}


table, tr, td {
	border-spacing: 0;	
	border-collapse: collapse;
	padding: 5px;
}


#content {
	vertical-align: top;
	float: left;
    margin-left: 1%;
	margin-top: 6px;
	width: auto;
	height: auto;
}


nav.mainmenu {
	vertical-align: top;
    width: auto;
    height: 100%;
    float: left;
    background: #999999;
}


nav.mainmenu ul {
	margin-left: -20px;	
}


nav.mainmenu ul li {
	list-style: none;
	height: 25px;
	background-color: #FFF;
	position: relative;
	margin: 0px 20px 5px 0px;
	text-align: center;
	font-size: 16px;
	font-style: bold;
	line-height: 22px;
	font-family: 'WOL_SB','Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,sans-serif;
}


.menubox {
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
}


.menuboxh {
	text-align: center;
	font-size: 26px;
	margin-bottom: 9px;
	color: #FFF;
}


.menuboxlbl {
	text-indent: 5px;	
}


.full {
	width: 100%;	
}


input.searchbox {
    font-size: 12px;
    line-height: 15px;
    background-color: #515151;
    color: #fff;
    -webkit-appearance: textfield;
    border: 0;
    width: 189px;
    height: 24px;
    box-sizing: border-box;
}


input:focus.searchbox {
    background-color: #ededf0;
    color: #454545;
}


form {
	width: auto;
	display: inline-block;	
}


button , input[type="submit"] {
	font-size: 16px;
	line-height: 22px;
	font-family: 'WOL_SB','Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,sans-serif;
	font-weight: 600;
	margin-right: 1px;
	margin-left: 0;
	margin-bottom: 5px;
	margin-top: 5px;
	padding-top: 4px;
	padding-right: 11px;
	padding-bottom: 10px;
	padding-left: 11px;
	height: 34px;
	border: 0;	
	color: #000;
	background-color: #00bcf2;
}


button:hover , input[type="submit"]:hover {
	background-color: #0072c6;	
}

**Raffa50** · 20-05-2014, 18:57

please aiutatemi

Discussione: Aiuto FIX template

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto FIX template

Permessi di invio