Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2004-04-20
5
Medium Priority
?
282 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:Caiapfas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 1000 total points
ID: 10870775
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
 
LVL 2

Author Comment

by:Caiapfas
ID: 10870920
ok, looking good , but how can i keep the black message topper in the right hand corner from moving?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10871001
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
 
LVL 2

Author Comment

by:Caiapfas
ID: 10871139
You have a lot of required width there so far, so moving it all together would likely be a better solution...<<<<plz explain
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10871230
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question