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.
