[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 796
  • Last Modified:

Placement of Spry Tab in Dreamweaver CS3

Hi,  if you go to www.spokanespiders.com you will notice the horizontal black tabs in the upper right corner of the screen.  I have these spry tabs absolutely positioned by pixels.  This looks great in high resolution screens but in lower resolutions, the spry tabs will run out of browser room and cascade vertically instead of horizontally.  Is there a way to position the Horizontal Spry tab so it always is placed on the lower right corner of the banner?  With the last tab on the far most right of the banner?

Thanks for your help
0
noitulosehtmi
Asked:
noitulosehtmi
1 Solution
 
LZ1Commented:
Replace the #ul.MenuBarHorizontal in your Spry CSS with this:
ul.MenuBarHorizontal
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 13px;
	cursor: default;
	width: auto;
	position: relative;
	border: thin none #000000;
	font-style: italic;
	font-weight: bold;
	float: right;
	bottom: 30px;
}

Open in new window

0
 
noitulosehtmiAuthor Commented:
Thank you, for the other pages it works wonderfully.  However, for the home page, it makes the layout get all crazy.  I have attached a picture of the page (w/ absolute and relative position) and the code snippet so you can see what I mean.  

Will
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spokane Spiders Soccer Home Page</title>
<link href="Webpages/SpidersHome.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1{ padding-top: 0px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
body {word-wrap: break-word;}}
</style>
<![endif]-->
<!--[if lte IE 6]>
<link href="Css/IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
 
<style type="text/css">
<!--
.scroller {
	height: 280px;
	overflow-y: scroll;
}
 
<!--
.Headlines {
	color: #FFFFFF;
	background-image: url(Central%20Images/Main%20Heading.gif);
	margin-top: 0px;
}
#Scoreboard1 {
	background-color: #FFFFFF;
	width: auto;
	padding-right: 2px;
	padding-left: 2px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	margin-top: 5px;
}
#UpcomingEvents {
	background-color: #FFFFFF;
	width: auto;
	padding-right: 2px;
	padding-bottom: 2px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: ridge;
	border-left-style: ridge;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	padding-left: 2px;
	margin-top: 5px;
}
#MainStory {
	background-color: #FFFFFF;
	margin-top: 5px;
	margin-left: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	margin-right: 165px;
	margin-bottom: 5px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	height: 400px;
}
#LeftSide {
	width: 194px;
	float: right;
	margin-right: 5px;
	margin-top: 5px;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	height: 250px;
}
.style2 {color: #FFFFFF}
#insight {
	background-color: #FFFFFF;
	padding-top: 0px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-bottom-style: ridge;
	border-left-style: ridge;
	border-top-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	display: block;
	margin-top: 5px;
}
#Albrown {
	background-color: #E68C9C;
}
.bordertop {
	border-top-width: 2px;
	border-top-color: #860000;
	font-size: x-small;
	background-color: #D6ADA5;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#RightSide {
	width: 194px;
	margin-left: 5px;
	margin-top: 10px;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	height: 250px;
}
.Spiderinsight {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
}
.Important {color: #970000}
.subimportant {
	color: #0071BD;
	font-size: 60%;
}
.x-small {font-size: x-small}
-->
</style>
<link href="CSS/Spidersite.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="SpryAssets/Vertical Home.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#homebody {
	background-color: #0071BD;
	height: 82px;
}
.style14 {color: #000000}
.InnerHeading #container #mainContent {
}
.InnerHeading #container #mainContent p {
}
-->
</style>
<link href="SpryAssets/Horizontal Home.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style15 {
	font-size: 25px
}
.style17 {
	font-size: 14px
}
.style19 {
	font-size: 12px
}
.style25 {font-size: 90%}
.style28 {
	font-size: 70%
}
.style29 {font-size: 13px}
-->
</style>
</head>
 
<body class="InnerHeading" onload="MM_preloadImages('Webpages/Tickets/SeasonTicketHover.jpg')">
<div id="container">
  <div id="header">
    <h1><!-- #BeginLibraryItem "/Library/Header.lbi" --><img src="Central Images/Banner.jpg" alt="Spokane Spiders" width="780" height="178" /><!-- #EndLibraryItem --></h1><!-- #BeginLibraryItem "/Library/Horizontal Links.lbi" --><ul id="MenuBar1" class="MenuBarHorizontal"><li><a href="Webpages/Tickets/Tickets.html">Tickets</a> </li>
      <li><a href="Webpages/ProShop/ProShop.html">Pro Shop</a></li>
  <li><a href="/Webpages/Schedule/Schedule2009.html">Schedule</a></li>
      <li><a href="Webpages/Sports Club/Sports Club.html">Sports Club</a></li>
    </ul> 
  <!-- #EndLibraryItem --
    ></div>
  <div id="sidebar1"><!-- #BeginLibraryItem "/Library/Vertical.lbi" -->
<ul id="o" class="MenuBarVertical">
  <li><a href="Webpages/News/News.html">News</a></li>
  <li><a href="Webpages/The Club/The Club.html">The Club</a></li>
  <li><a href="Webpages/Game Statistics/Game Statistics.html">Game Stats</a></li>
  <li><a href="/Webpages/Tickets/Purchase.html">Tickets</a> </li>
  <li><a href="Webpages/Corporate Partners/Corporate Partners.html">Corporate Partners</a> </li>
  <li><a href="Webpages/Stadium/Stadium.html">Stadium</a></li>
  <li><a href="index.html">Home</a></li>
</ul>
<!-- #EndLibraryItem --><div id="sidebarspace">
<h3 align="center" class="InnerHeading style2"><a href="Webpages/Tickets/Tickets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','Webpages/Tickets/SeasonTicketHover.jpg',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','Tickets/SeasonTicketHover.jpg',1)"></a>Please support our Soccer Sponsors</h3>
      <!-- #BeginLibraryItem "/Library/Sponsors.lbi" --><p align="center"><a href="http://www.rockwoodclinic.com/default.htm"><img src="Sponsors/Rockwood Clinic2.JPG" alt="Rockwood Clinic" width="190" height="36"></a></p>
<p align="center"><a href="http://www.euroah.com/"><img width="111" height="103" src="Library/Sponsors_clip_image001.jpg" alt="logo"></a></p>
<p align="center"><a href="http://www.countryhomes.net/"><img src="Sponsors/Country Homes Realty.gif" alt="CountryHomesRealty" width="146" height="37"></a></p>
<p align="center"><a href="http://www.uslsoccer.com"><img src="Sponsors/USL.gif" alt="United Soccer Leagues" width="107" height="115"></a></p>
<p align="center"><a href="http://www.qualityinn.com/hotel/WA181"><img src="/Sponsors/quality inn.jpg" alt="quality inn" width="145" height="149"></a></p>
<!-- #EndLibraryItem --></div>
    </div>
  <div id="sidebar2">
    <div id="Scoreboard1">
      <h5 align="center" class="Inner">Become a Spider Sponsor<br />
      </h5>
      The Spiders are looking for sponsors for the upcoming 2009 season.  If interested, contact <a href="mailto:fredbowman@spokanespiders.com">Fred Bowman</a> at 509-999-3891
      <h5 align="left" class="style29">&nbsp;</h5>
    </div>
    <div class="MenuBarSubmenuVisible" id="UpcomingEvents">
      <h5 class="Inner style17">Upcoming Soccer Events</h5>
      <p align="left" class="InnerHeading style14 style25"><a href="http://www.sposports.com">Click here to participate in the fan forum boards for Spokane Spiders and other Spokane Sport Programs!</a></p>
      <p align="left" class="InnerHeading style14 style25"><span class="style14"><a href="/Webpages/Tickets/Purchase.html">Regular Game Tickets can be purchased ONLINE! </a><a href="Webpages/Tickets/Tickets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Webpages/Tickets/SeasonTicketHover.jpg',1)"></a></span><a href="Webpages/Tickets/Tickets.html"></a><a href="Webpages/Tickets/Tickets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Webpages/Tickets/SeasonTicketHover.jpg',1)"></a>3</p>
      <p class="InnerHeading style2"><a href="Webpages/Tickets/Tickets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Webpages/Tickets/SeasonTicketHover.jpg',1)"><img src="Webpages/Tickets/SeasonTicketActive.jpg" alt="Season Tickets" name="Image11" width="156" height="124" border="0" id="Image11" /></a></p>
      </div>
    <div id="insight">
      <h5 class="Inner style17">Spider  Insight</h5>
      <p class="Spiderinsight"><em>&quot;The shots you don't take don't go in&quot;</em> </p>
      <p class="Spiderinsight">&nbsp;</p>
      <div class="bordertop" id="14">        Al Brown, Technical Director</div>
    </div>
  </div>
  <div id="mainContent">
    <div id="MainStory">
      <h2 align="center" class="Headlines style15">Top Story</h2>
    
      <h4 class="BelowLine style17">Spiders Tryouts to be held the First Weekend of March</h4>
      <p class="scroller">On Saturday and Sunday, March 7-8, from 9 AM - 2 PM at Plantes Ferry Park, open tryouts will be held. There is <strong>no charge</strong> to try out. Show up at 9 AM on Saturday with cleats and a willingness to pit yourself against some of Spokane's best. <br />
        <br />
      Detailed instructions to Plantes Ferry Park can be found <a href="/Webpages/TryoutsAdd.html">here</a>.<br />
      <br />
      If you have any further questions, you can contact Coach Moug at <a href="mailto:rolin22099@msn.com">rolin22099@msn.com</a>.</p>
      <p class="scroller">&nbsp;</p>
      <p class="scroller">&nbsp;</p>
    </div>
    <div id="LeftSide">
      <h4 class="Inner style17">Sponsor a Spider Player</h4>
      <p class="style28">For only $500, you can sponsor a Spider player for the 2009 season and have you or your company recognized every time that player is announced on the broad speaker.</p>
      <p class="style28">Money goes to uniforms, registration, and travel arrangements for your sponsored player.</p>
      <p class="style28">Contact <a href="mailto:wbrown@spokanespiders.com">William Brown</a> for more information.</p>
    </div>
    <div id="RightSide">
      <h4 class="Inner style17">Recent News</h4>
      <p class="divider style19"><a href="/Webpages/News/2008 Season/July 27, Vancouver wins Division.html">Vancouver Whitecaps win Western Conference</a></p>
      <p class="divider style19">Jake Moug to be head coach for the 2009 season.</p>
      <p class="divider style19">Discussion and plans for creating a future USL W-League Women's Team are underway</p>
    </div>
    <div><!-- #BeginLibraryItem "/Library/Placeholder.lbi" -->
<p>&nbsp;</p>
<p align="center"><a href="http://acmeintegration.us/"><img src="Sponsors/AcmeIntegration.jpg" alt="AcmeIntegration" width="376" height="98"></a></p>
<!-- #EndLibraryItem --></div>
    <p align="center"><img src="/Central Images/ModifiedBackgroundSponsor.gif" width="361" height="191" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
  <div id="footer">
    <div align="center"><!-- #BeginLibraryItem "/Library/Footer.lbi" -->
<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</style>
<p align="center"><a href="index.cfm">Home</a>| <a href="Webpages/News/News.html">News</a> | <a href="Webpages/The Club/The Club.html">The Club</a> | <a href="Webpages/Game Statistics/Game Statistics.html">Statistics</a> | <a href="Webpages/Tickets/Tickets.html">Tickets</a> | <a href="Webpages/Corporate Partners/Corporate Partners.html">Sponsors</a> | <a href="Webpages/Stadium/Stadium.html">Stadium</a> | <a href="Webpages/The Club/The Club.html">About Us</a> | <a href="Webpages/The Club/Roster/Staff.html">Staff</a> | <a href="Webpages/The Club/Roster/Roster.html">Roster</a> | <a href="Webpages/The Club/Roster/Alumni.html">Alumni </a>|  <a href="Webpages/Schedule/Schedule.html">Schedule</a> | <a href="Webpages/Policy.html">Privacy</a><br>
 Pictures, unless otherwise stated, are credited to Kent Henderson &copy;2007<br>
Copyright &copy; 2008 Spokane Spiders Soccer. All Rights Reserved. </p>
 
<!-- #EndLibraryItem --><!-- ADDFREESTATS.COM AUTOCODE V4.0 -->
        <script type="text/javascript">
<!--
var AFS_Account="00522702";
var AFS_Tracker="auto";
var AFS_Server="www5";
var AFS_Page="DetectName";
var AFS_Url="DetectUrl";
// -->
      </script>
        <script type="text/javascript" src="http://www5.addfreestats.com/cgi-bin/afstrack.cgi?usr=00522702">
      </script>
        <noscript>
        <a href="http://www.addfreestats.com" >
        <img src="http://www5.addfreestats.com/cgi-bin/connect.cgi?usr=00522702Pauto" border=0 title="AddFreeStats.com Free Web Stats!" /></a>
        </noscript>
        <!-- ENDADDFREESTATS.COM AUTOCODE V4.0  -->
        
        <!-- end #footer -->
        
    </div>
  </div>
<!-- end #container --></div>
 
//-->
 
</body>
</html>

Open in new window

w-absolute-positioning-copy.jpg
w-relative-positioning-copy.jpg
0

Featured Post

Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now