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.
