No replies
smallzoo
smallzoo's picture
Offline
newbie
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2008-04-04
Posts: 4
Points: 5

Just when I think I am getting the hang of css I realise how little knowledge I have !

I am trying to design a site with a header div, content div, bottom menu div and footer div

In the content div it will have hiddens divs which will show/hide when buttons/icons in the the menu div are clicked.

Also in the content div is a small status div on the right of the content div ( but within it ) which will be updated at various stages... simple I thought !!

I just cant seem to work out the best way to do this and to make sure it is compatible with IE7+ and Chrome ..

here is the code.. feel free to destroy !

************************************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="execute.js"></script>
 
<script type="text/javascript"> 
	$(document).ready(function(){							
		$("#extra1").click(function(){
			$("#main2").hide();
			$("#main3").hide();
			$("#main4").hide();
			$("#main5").hide();
			$('#main1').fadeIn('fast');
		});
 
		$("#extra2").click(function(){
			$("#main1").hide();
			$("#main3").hide();
			$("#main4").hide();
			$("#main5").hide();
			$("#main2").fadeIn('fast');
		});
	});
</script>
 
<style type="text/css"> 
 
html  { height: 100%; }
 
body {
	padding: 0;
	margin: 0;
	background: #3392C8; 
        height:90%;
        min-width:800px;
	max-width:1500px;
	margin-left:auto;
	margin-right:auto;
}
#page {
	height:98%;
        min-height:98%;
	width: 98%;
}
#content {
        height:75%;
        min-height:75%;
        margin-top:0%;
	width: 98%;
	margin-left:0%;
	border:1px solid;
	background: #C4DAE5 ;
}
 
#status {
        height:75%;
        min-height:75%;
	width: 12%;
	margin-left:84%;
        margin-top: -28%;
	background-color:#ffffff;
}
 
 
#menu {
        height:20%;
        min-height:20%;
 	width: 98%;
 	min-width: 98%;
	margin-left:0%;
	border:1px solid;
	background-color:#ffffff;
	padding-top:5px;
}
 
#mlogo {
        height:95%;
        min-height:95%;
	width: 14%;
	margin-left:88%;
	margin-top:-9%;
	background:  url("images/logo.jpg") no-repeat center center;
}
 
#header { height:8%; margin-top:1%;  min-height:8%;width: 98%;margin-left:0%;background-color:#000000; border:1px solid;}
#copyright { height:5%; min-height:5%;width: 98%;margin-left:0%;background-color:#000000; text-align:right; padding-top:5px;}
 
#main1 {  height:70%; min-height:70%; width: 80%; margin-top:5%;margin-left:auto;margin-right:auto;background-color:#ffee33;display:none;}
#main2 {  height:70%; min-height:70%; width: 80%; margin-top:5%;margin-left:auto;margin-right:auto;background-color:#3355ee;display:none;}
 
 
 
* html #page {
height: 98%;
}
 
 
</style>
 
 
</head> 
 
<body> 
<div id="page"> 
 
	<div id="header" ></div>
	<div id="content" >
		<div id="main1" class="main1"></div>
		<div id="main2" class="main2"></div>
 	</div>
 
	<div id="menu" >
 		<ul>
		<li  class="icon1">
			<a id="extra1" href="#" title="e1"></a><span>WARDS</span>
		</li>
		<li  class="icon2">
			<a id="extra2" href="#" title="e2">Calendar</a><span>CALENDAR</span>
		</li >
		</ul>
		<div id="mlogo"></div>
	</div>
	<div id="copyright" >(C) ME 2011</div>
 
</div> 
 
 
 
</body> 
</html> 

******************************************************************

//mod edit: code tags added --gt