HTML5 CSS3 layout not working
- by John.Weland
I have been asked by a local MMA (Mixed Martial Arts) School to help them develop a website. For the life of me I CANNOT get the layout to work correctly.
When I get one section set where it should be another moves out of place!
here is a pic of the layout:
here
The header should be a set height as should the footer the entire site at its widest point should be 1250px with the header/content area/footer and the like being 1240px the black in the picture is a scaling background to expand wider as larger resolution systems are viewing them. The full site should be a minimum-height of 100% but scale virtually as content in the target area deems necessary. My biggest issue currently is that my "sticky" footer doesn't stick once the content has stretched the content target area virtually.
the Code is not pretty but here it is:
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="master.css" type="text/css" media="screen">
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">
<div id="wrap" class="wrap"><div id="logo" class="logo"><img src="images/comalogo.png" width="100" height="150"></div>
<div id="header" class="header">College of Martial Arts</div>
<div id="nav" class="nav">
<ul id="menu"><b>
<li><a href="#">News</a></li>
<li>·</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">The Instructors</a></li>
<li><a href="#">Our Arts</a></li>
</li>
</ul>
<li>·</li>
<li><a href="#">Location</a></li>
<li>·</li>
<li><a href="#">Gallery</a></li>
<li>·</li>
<li><a href="#">MMA.tv</a></li>
<li>·</li>
<li><a href="#">Schedule</a></li>
<li>·</li>
<li><a href="#">Fight Gear</a></li></b>
</div>
<div id="social" class="social"> <a href="http://www.facebook.com/pages/Canyon-Lake-College-of-Martial-Arts/189432551104674"><img src="images/soc/facebook.png"></a> <a href="https://twitter.com/#!/CanyonLakeMMA"><img src="images/soc/twitter.png"></a> <a href="https://plus.google.com/108252414577423199314/"><img src="images/soc/google+.png"></a> <a href="http://youtube.com/user/clmmatv"><img src="images/soc/youtube.png"></a></div>
<div id="mid" class="mid">test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br></div>
<div id="footer" class="footer">
<div id="contact" style="left:0px;">tel: (830) 214-4591<br />
e: [email protected]<br />
add: 1273 FM 2673, Sattler, TX 78133<br /> </div>
<div id="affiliates" style="right:0px;">Hwa Rang World Tang soo Do</div>
<div id="copyright">Copyright © College of Martial Arts</div>
</div>
</body>
</html>
CSS3 -Dropdown Menu-
@charset "utf-8";
/* CSS Document */
/* Main */
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #444;
background: -moz-linear-gradient(#000, #333);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444),color-stop(1, #000));
background: -webkit-linear-gradient(#000, #333);
background: -o-linear-gradient(#000, #333);
background: -ms-linear-gradient(#000, #333);
background: linear-gradient(#000, #333);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 8px 8px #9c9c9c;
/* outline:#000 solid thin; */
}
#menu li
{
left:150px;
float: left;
padding: 0 0 10px 0;
position:relative;
color: #FC0;
font-size:15px;
font-family:'freshman' cursive;
line-height:15px;
}
#menu a
{
float: left;
height: 15px;
line-height:15px;
padding: 0 10px;
color: #FC0;
font-size:15px;
text-decoration: none;
text-shadow: 1 1px 0 #000;
text-align:center;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#000, #333);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#000, #333);
background: -o-linear-gradient(#000, #333);
background: -ms-linear-gradient(#000, #333);
background: linear-gradient(#000, #333);
-moz-border-radius: 5px;
border-radius: 5px;
/* outline:#000 solid thin; */
}
#menu ul li
{
left:0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
width: 200px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
width: 200px;
}
/*#menu ul a:hover
{
background: #000;
background: -moz-linear-gradient(#000, #333);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#000, #333);
background: -o-linear-gradient(#000, #333);
background: -ms-linear-gradient(#000, #333);
background: linear-gradient(#000, #333);
}*/
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
CSS3 -Master Style Sheet-
@charset "utf-8";
/* CSS Document */
a:link {color:#FC0; text-decoration:none;} /* unvisited link */
a:visited {color:#FC0; text-decoration:none;} /* visited link */
a:hover {color:#FFF; text-decoration:none;} /* mouse over link */
a:active {color:#FC0; text-decoration:none;} /* selected link */
ul.a {list-style-type:none;}
ul.b {list-style-type:inherit}
html {
}
body {
/*background-image:url(images/cagebg.jpg);*/
background-repeat:repeat;
background-position:top;
}
div.wrap {
margin: 0 auto;
min-height: 100%;
position: relative;
width: 1250px;
}
div.logo{
top:25px;
left:20px;
position:absolute;
float:top;
height:150px;
}
/*Freshman FONT is on my computer needs to be uploaded to the webhost and rendered host side like a webfont*/
div.header{
background-color:#999;
color:#FC0;
margin-left:5px;
height:80px;
width:1240px;
line-height:70px;
font-family:'freshman' cursive;
font-size:50px;
text-shadow:8px 8px #9c9c9c;
text-outline:1px 1px #000;
text-align:center;
background-color:#999;
clear: both;
}
div.social{
height:50px;
margin-left:5px;
width:1240px;
font-family:'freshman' cursive;
font-size:50px;
text-align:right;
color:#000;
background-color:#999;
line-height:30px;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
padding-right:5px;
}
div.mid{
position:absolute;
min-height:100%;
margin-left:5px;
width:1240px;
font-family:'freshman' cursive;
font-size:50px;
text-align:center;
color:#000;
background-color:#999;
}
/*SIDE left and right should be 40px wide and a minimum height (100% the area from nav-footer) to fill between the NAV and the footer yet stretch as displayed content streatches the page longer (scrollable)*/
div #side.sright{
top:96px;
right:0;
position:absolute;
float:right;
height:100%;
min-height:100%;
width:40px;
background-image:url(images/border.png);
}
/*Container should vary in height in acordance to content displayed*/
div #content.container{
}
/*Footer should stick at ABSOLUTE BOTTOM of the page*/
div #footer{
font-family:'freshman' cursive;
position:fixed;
bottom:0;
background-color:#000000;
margin-left:5px;
width:1240px;
color:#FC0;
clear: both; /*this clear property forces the .container to understand where the columns end and contain them*/
}
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly.*/
header, section, footer, aside, nav, article, figure {
display: block;
}
Eventually once the layout is correct I have to use PHP to make calls for where data should be displayed from what database.
If anyone can help me to fix this layout and clean up the crap code, I'd be much appreciated.. I've spent weeks trying to figure this out.
