News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

css menu + div wrapper

Started by Jeremy M., August 20, 2014, 12:23:13 PM

Previous topic - Next topic

Jeremy M.

Ok, so i'm not sure how to explain this. I am creating a website for my wife (she's a band/choir director) and I am trying to figure out how to make the full website (background included) the same size as my css menu and allow it all to expand when needed.

Antechinus

I think we're going to need more explaining. :)

Jeremy M.

Quote from: Antechinus on August 20, 2014, 05:15:51 PM
I think we're going to need more explaining. :)

Ok, i will try. . haha


I want my page to automatically adjust to different monitors. I also have a CSS Menu at the top of the page.  here is the URL:  http://www.big-blue-nation.com/test.html

<!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 charset="utf-8" />
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panama, Oklahoma Public Schools Music Department's Official Website</title>

<style type="text/css">


#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  line-height: 1;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #000000;
  background: -moz-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f1f1f), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -o-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -ms-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: linear-gradient(to bottom, #1f1f1f 0%, #000000 100%);
  border-bottom: 2px solid #db000b;
  width: 1275px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #000000;
  background: -moz-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1f1f1f), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -o-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: -ms-linear-gradient(top, #1f1f1f 0%, #000000 100%);
  background: linear-gradient(to bottom, #1f1f1f 0%, #000000 100%);
  color: #ffffff;
  display: block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  padding: 19px 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu.align-center > ul {
  font-size: 0;
}
#cssmenu > ul > li {
  display: inline-block;
  float: left;
  margin: 0;
}
#cssmenu.align-center {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  color: #f00000;
  font-size: 12px;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #db000b;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: #ffffff;
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #000000;
  background: -moz-linear-gradient(top, #121212 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #121212), color-stop(100%, #000000));
  background: -webkit-linear-gradient(top, #121212 0%, #000000 100%);
  background: -o-linear-gradient(top, #121212 0%, #000000 100%);
  background: -ms-linear-gradient(top, #121212 0%, #000000 100%);
  background: linear-gradient(to bottom, #121212 0%, #000000 100%);
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #db000b;
  border-bottom: 1px dotted #ff0f1b;
  font-size: 11px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
  background: #a80008;
}
#cssmenu ul ul li:hover > a {
  color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #a80008;
  border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #8f0007;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
  border-bottom: 0;
}


</style>
<style>
p{margin:0}
#divid1 {
}
#apDiv1 {
position: absolute;
width: 617px;
height: 446px;
z-index: 1;
left: 301px;
top: 100px;
}
#apDiv2 {
position: absolute;
width: 290px;
height: 259px;
z-index: 2;
left: 28px;
top: 264px;
}
#apDiv2 {
font-family: Times New Roman, Times, serif;
}
body,td,th {
color: #FF3;

#wrapper {
    width: 500px;
    margin: 0 auto;
}

#apDiv3 {
position: absolute;
width: 239px;
height: 259px;
z-index: 1;
left: 20px;
}
#apDiv4 {
position: absolute;
width: 252px;
height: 169px;
z-index: 1;
}
</style>
</head>

<body>

<center>
<table width="75%" border="0">
<table cellspacing="0" cellpadding="0" border="0" background="http://i1058.photobucket.com/albums/t406/StormChaser83/Backgrounds/black.jpg">
<tr>
<td><div align="center"><div id="wrapper">
        <div align="center">
        <div align="center">
<div id='cssmenu'>
<ul>
   <li class='active'><a href=''><span>Home</span></a></li>
   <li class='active'><a href=''><span>Band Boosters</span></a></li>
   <li class='active'><a href=''><span>Calendar</span></a></li>
   <li class='active'><a href=''><span>Current Events</span></a></li>
   <li class='active'><a href=''><span>Ensembles</span></a></li>
   <li class='active'><a href=''><span>Marching Band</span></a></li>
   <li class='active'><a href=''><span>Choir</span></a></li>
   <li class='active'><a href=''><span>Documents</span></a></li>
   <li class='active'><a href=''><span>Music Appreciation</span></a></li>
   <li class='active'><a href=''><span>Multimedia</span></a></li>
   <li class='active has-sub'><a href=''><span>Links</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Business Links</span></a>
            <ul>
               <li class='active'><a href='http://www.jwpepper.com/'><span>J.W. Pepper</span></a></li>
               <li class='active'><a href='http://www.penders.com/'><span>Penders Music</span></a></li>
               <li class='active'><a href='http://www.saiedmusic.com/'><span>Saied Music</span></a></li>
               <li class='active'><a href='http://www.walkingfrog.com/'><span>Walking Frog Records</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Instrument Links</span></a>
            <ul>
               <li class='active'><a href='http://www.clarinet.org/'><span>Clarinet</span></a></li>
               <li class='active'><a href='http://www.nfaonline.org/'><span>Flute</span></a></li>
               <li class='active'><a href='http://www.hornsociety.org/'><span>French Horn</span></a></li>
               <li class='active'><a href='http://www.saxophone.org/'><span>Saxophone</span></a></li>
               <li class='active'><a href='http://www.ita-web.org/'><span>Trombone</span></a></li>
               <li class='active'><a href='http://www.trumpetguild.org/'><span>Trumpet</span></a></li>
               <li class='active'><a href='http://www.iteaonline.org'><span>Tuba/Euphonium</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Local Organization Links</span></a>
            <ul>
               <li class='active'><a href='http://www.edbda.com'><span>EDBDA</span></a></li>
               <li class='active'><a href='http://www.okbandmasters.com'><span>OBA</span></a></li>
               <li class='active'><a href='http://www.choralnet.org/'><span>OCDA</span></a></li>
               <li class='active'><a href='http://www.ok-bc.com'><span>Oklahoma Band Central</span></a></li>
               <li class='active'><a href='http://www.okmea.org'><span>OMEA</span></a></li>
               <li class='active'><a href='http://www.ossaa.com'><span>OSSAA</span></a></li>
               <li class='active'><a href='http://www.ossbda.org'><span>OSSBDA</span></a></li>
               <li class='active'><a href='http://www.wgpokla.org/10/'><span>Winter Guard & Percussion</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>National Organization Links</span></a>
            <ul>
               <li class='active'><a href='http://www.dci.org'><span>Drum Corp Int'l</span></a></li>
               <li class='active'><a href='http://www.midwestmarching.com'><span>Midwest Marching</span></a></li>
               <li class='active'><a href='http://www.mtna.org/'><span>M.T.N.A.</span></a></li>
               <li class='active'><a href='http://www.musicforall.org/'><span>Music for All</span></a></li>

               <li class='active'><a href='http://www.nafme.org/'><span>N.A.F.M.E.</span></a></li>
               <li class='active'><a href='http://www.wgi.org/'><span>Winter Guard Int'l</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='active'><a href=''><span>About</span></a></li>
   <li class='active'><a href=''><span>Contact</span></a></li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p> <img src="http://i1058.photobucket.com/albums/t406/StormChaser83/panamarazorbacks/RMB.png" width="764" height="461" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div></div></td>
</tr>
</table>
</center>


</body>
</html>

Advertisement: