resizing issues..I need it to stay the same , even if users resize the window.

ok with some help from EE, I was able to make a VERY fast loading, sleak menu system. based on EE's menu system. but when users resize the browser window, the menu gets crushed up and looks horrible, how can i make the menus system stay absolute? http://www.cdatasolutions.com/menus/cds.htm
LVL 2
CaiapfasAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
seanpowellConnect With a Mentor Commented:
Hello again :-)

Since you're defining a fixed width for the tabs, the easiest solution is just to set a width on the ul element large enough to hold them all in one line.

Here's example code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="cdata.js"></script>
<style type="text/css">

body
{
      margin: 0;
}

h1
{
      background: url('HeaderBG.gif');
      color: #fff;
      font-family: sans-serif;
      font-size: 32px;
      height: 40px;
      margin: 0;
      padding-left: 15px
}

#navigation ul
{
      list-style: none;
      margin: 0;
      padding: 0 0 0 15px;
      width:744px;
}

#navigation li
{

      background: url('Button.gif') no-repeat left top;
      float: left;
}

#navigation a, #navigation a:visited
{
      background: url('Button.gif') no-repeat left top;
      color: #fff;
      display: block;
      font-family: sans-serif;
      font-size: 11px;
      font-weight: bold;
      height: 17px;
      padding-top: 2px;
      text-align: center;
      text-decoration: none;
      width: 124px;
}

#navigation a:hover, #navigation a:active
{
      background-position: 100%  -19px;
}

#message
{
      background: url('MessageCurve.gif') no-repeat top left;
      right: 0;
      padding-left: 45px;
      position: absolute;
      top: 0;
}

#message p
{
      background: url('MessageBG.gif');
      color: #fff;
      display: block;
      font-family: sans-serif;
      font-size: 11px;
      font-weight: bold;
      height: 21px;
      margin: 0;
      width: 345px;
}

</style>

</head>
<body>
<h1><a href="http://www.cdatasolutions.com" style="text-decoration:none; color:#ffffff;">Computer Data Solutions</a></h1>
<div id="navigation">
<ul>
      <li id="nav_about"><a href="http://www.cdatasolutions.com/aboutus.shtml" onmouseover="changeText();" onmouseout="changeText();">About Us</a></li>
      <li id="nav_design"><a href="http://www.cdatasolutions.com/services/wsdesign.shtml" onmouseover="changeText();" onmouseout="changeText();">Web Site Design</a></li>
      <li id="nav_hosting"><a href="http://www.cdatasolutions.com/services/wshosting.shtml" onmouseover="changeText();" onmouseout="changeText();">Web Site Hosting</a></li>
      <li id="nav_sales"><a href="http://www.cdatasolutions.com/services/pc.shtml" onmouseover="changeText();" onmouseout="changeText();">PC Sales &amp; Service</a></li>
      <li id="nav_help"><a href="http://www.cdatasolutions.com/contactus.shtml" onmouseover="changeText();" onmouseout="changeText();">Find Help Here</a></li>
      <li id="nav_portfolio"><a href="http://www.cdatasolutions.com/services/portfolio/" onmouseover="changeText();" onmouseout="changeText();">Portfolio</a></li>
</ul>
</div>
<div id="message"><p id="messagetext">For Immediate Pricing or Sales call (832) 277-8295<img src=http://www.ccds.addr.com/server-scripts/Count.cgi?df=cdsbusiness.dat width="3" height="3"></p></div>
<p id="messagetext">&nbsp;</p>
</body>
</html>


0
 
CaiapfasAuthor Commented:
ok, looking good , but how can i keep the black message topper in the right hand corner from moving?
0
 
seanpowellCommented:
You can't...
It's set with position:absolute to the top right of the screen, and so it will move as the screen moves...

You would need to redesign the layout so that the message floats to the left of the <h1> tag, and simply gets cut off at smaller screen sizes.
You have a lot of required width there so far, so moving it all together would likely be a better solution...
0
 
CaiapfasAuthor Commented:
You have a lot of required width there so far, so moving it all together would likely be a better solution...<<<<plz explain
0
 
seanpowellCommented:
Sorry - I just mean that you may be better off having the h1 and the message on different lines, so that the width of the browser would not be an issue anymore...
0
All Courses

From novice to tech pro — start learning today.