Menu
I have posted Image of my webpage and also posted html code and CSS which I apply on it.
I want that my #main should display with fixed height on the page as a respective laptop resolution. So how much size should I give it? Another issue I'm getting is that, when I try to give height to it, it does not apply. My #main contains a footer too. What changes do I need to apply this in my css? My #main expands in height when I load any content in it. But I want that its height should be fixed.
HTML
<html>
<head>
<title> Index </title>
<link type="text/css" rel="stylesheet" href="../Content/Site.css">
<script type="text/javascript" src="../../Scripts/jquery-1.9.1.min.js">
<script type="text/javascript" src="../../Scripts/jquery.js">
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js">
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js">
<script type="text/javascript" src="../../Scripts/MicrosoftMvcValidation.js">
<script type="text/javascript" src="../../Scripts/modernizr-1.7.min.js">
<link type="text/css" rel="stylesheet" href="../Content/menu.css">
<script type="text/javascript" src="../../Scripts/menu.js">
</head>
<body>
<div class="page">
<header>
<table id="header">
<div id="menu">
<ul class="menu">
<li class="current">
<li>
<a href="/CRMDashboard/Dashboard">
</li>
<li>
<a class="parent" href="/CRM/Index">
<div>
</li>
<li>
<a class="parent" href="#">
<div>
</li>
<li>
<a class="parent" href="#">
<div>
</li>
<li>
<a href="/FilterCRMRequest/Index">
</li>
<li>
<a href="#">
</li>
<li class="back" style="left: 30px; width: 100px; display: block; overflow: hidden;">
<div class="left"></div>
</li>
</ul>
</div>
</header>
<section id="main">
<h2>Index</h2>
<footer>
<hr>
<p> Copyright (c) 2012 </p>
<hr>
</footer>
</section>
</div>
</body>
</html>
CSS
body {
background: none repeat scroll 0 0 rgba(0, 117, 149, 0.9);
color: #000000;
font-family: "Trebuchet MS",Verdana,Helvetica,Sans-Serif;
font-size: 0.85em;
height: 100%;
margin: 0;
padding: 0;
}
.page {
margin-left: auto;
margin-right: auto;
width: 98%;
}
header, #header {
border: 0 none;
color: #000000;
margin-bottom: 0;
padding: 0;
position: relative;
}
header, footer, nav, section {
display: block;
}
header, #header {
color: #000000;
}
#main {
padding: 30px 30px 15px;
background-color: #fff;
border-radius: 4px 4px 4px 4px;
top:50px;
bottom:10px;
/*position:fixed;*/
right:10px;
left:10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
footer, #footer {
background-color: #FFFFFF;
border-radius: 0 0 4px 4px;
color: #999999;
font-size: 0.9em;
line-height: normal;
margin: 0;
padding: 10px 0;
text-align: center;
}
CSS For menu
div#menu {
background: url("images/main-bg.png") repeat-x scroll 0 0 transparent;
height: 41px;
}
div#menu ul.menu {
padding-left: 30px;
}
div#menu ul {
border-radius: 0 0 4px 4px;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
}
div#menu li {
background: url("images/main-delimiter.png") no-repeat scroll 98% 4px transparent;
}
div#menu li {
border-radius: 0 0 4px 4px;
display: block;
float: left;
margin: 0;
padding: 0 5px 0 0;
position: relative;
z-index: 9;
}
I want output like this:
I also want that my #main display scroll bar when content load more ... rather than scroll bar display of browser.
these are my menus:
I can solve out problem by using position:fixed in #main but when I use it .. My #main gets overwrite on menus.
790
I guess you should'nt apply static height/ or give fixed height to it, although you can do it using javascript/jquery From the image you posted, i guess following css should be your solution.
Added css to your #main
top:50px;
bottom:10px;
position:fixed;
right:10px;
left:10px;
Edit: Added overflow:auto in #main
Demo: http://jsfiddle.net/hEGms/2/
63
From the w3c specification:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
...
Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
By this logic, if you need an element to apply styles to, you need a div. The <section> tag is a semantic tag and not a functional one. Inside your section tag you should have a div element holding the content and it should be the target for CSS styling.
EDIT: Also, since <section> is an HTML5 element, if you are using older browsers, you need to set it to display: block explicitly.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
