Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS browser resizing and element position

Status
Not open for further replies.
HMKS

HMKS

MIS
Feb 25, 2008
6
US
I really do appreciate the help that some of you guys give.

In the code example below I'm trying to display a menu on a webpage but have the menu display in it's entirety when the browser is resized. Currently when the browser is resized and dragged to the left the menu links wrap to the next line to stay displayed on the screen. Instead what I want to happen is the menu to stay in place as the browser is resized. Just to make it clear I want all the links to stay on the same line when the browser is resized then the links should dissapear from the screen as the browser gets smaller and smaller only displaying what will fit in the space that is relative to the browsers width at the time. I do not want the links to wrap or stretch or do anything else to try to stay visible as the browser resizes. I had an example of this last week where I have been able to fix the rest of the elements on the page but I can't seem to resolve the menu wrapping. I know certain tags or code may be missing this is only an example of the code this is only a snippet. This code is only for demonstration purposes not for code validation. Thanking you in advance.

Code: 
<html>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
 <html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Menu</title>
 <style type="text/css">
 #multi-level {height:30px; position:relative; z-index:100;}
 #multi-level .pad {float:left;}

 .menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

 .menu li.top {display:block; float:left; position:relative;}

 .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

 .menu li.top a.top_link {display:block; float:left; height:35px;}
 .menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;}

 .menu li.p1 {width:90px; background:url([URL unfurl="true"]http://www.cayema.com/homeg.gif)[/URL] no-repeat;;}
 .menu li.p2 {width:90px; background:url([URL unfurl="true"]http://www.cayema.com/steeg.gif)[/URL] no-repeat;; }
 .menu li.p3 {width:118px; background:url([URL unfurl="true"]http://www.cayema.com/enterg.gif)[/URL] no-repeat;;}
 .menu li.p4 {width:105px; background:url([URL unfurl="true"]http://www.cayema.com/contg.gif)[/URL] no-repeat;; }
 .menu li.p5 {width:120px; background:url([URL unfurl="true"]http://www.cayema.com/aboug.gif)[/URL] no-repeat;; }
 .menu li.p6 {width:120px; background:url([URL unfurl="true"]http://www.cayema.com/commg.gif)[/URL] no-repeat;; }

 .menu li a#home {width:90px; background:url([URL unfurl="true"]http://www.cayema.com/home.gif)[/URL] no-repeat;}
 .menu li a#shop {width:90px; background:url([URL unfurl="true"]http://www.cayema.com/stee.gif)[/URL] no-repeat;}
 .menu li a#entertainment {width:118px; background:url([URL unfurl="true"]http://www.cayema.com/enter.gif)[/URL] no-repeat;}
 .menu li a#contacts {width:105px; background:url([URL unfurl="true"]http://www.cayema.com/cont.gif)[/URL] no-repeat;}
 .menu li a#aboutus {width:120px; background:url([URL unfurl="true"]http://www.cayema.com/abou.gif)[/URL] no-repeat;}

 .menu li a#community {width:120px; background:url([URL unfurl="true"]http://www.cayema.com/comm.gif)[/URL] no-repeat;}

 .menu a:hover {visibility:visible;}
 .menu li:hover {position:relative; z-index:200;}

 .menu li a#home:hover, .menu li:hover a#home,
 .menu li a#shop:hover, .menu li:hover a#shop,
 .menu li a#entertainment:hover, .menu li:hover a#entertainment,
 .menu li a#contacts:hover, .menu li:hover a#contacts,
 .menu li a#aboutus:hover, .menu li:hover a#aboutus,
 .menu li a#community:hover, .menu li:hover a#community {background:transparent;}
 .menu ul, 
 .menu :hover ul ul, 
 .menu :hover ul :hover ul ul,
 .menu :hover ul :hover ul :hover ul ul,
 .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}
 .menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
 .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
 .menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
 .menu :hover ul.sub li a.fly {background:#fff  80px 7px no-repeat;}
 .menu :hover ul.sub li a:hover {background:#63C6DE; color:#fff;}
 .menu :hover ul.sub li a.fly:hover {background:#63C6DE 80px 7px no-repeat; color:#fff;}
 .menu :hover ul li:hover > a.fly {background:#63C6DE 80px 7px no-repeat; color:#fff;} 

 .menu :hover ul :hover ul,
 .menu :hover ul :hover ul :hover ul,
 .menu :hover ul :hover ul :hover ul :hover ul,
 .menu :hover ul :hover ul :hover ul :hover ul :hover ul

 {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto;}

 .links { position:absolute; left: 180px; top: 104px; }
 </style>
 <div id="multi-level" class="links">
<ul class="menu">
	<li class="top p1"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="home" class="top_link"><span>Home</span></a></li>

	<li class="top p2"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="shop" class="top_link"><span>Products</span><!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]--
		<ul class="sub">

			<li><a href="[URL unfurl="true"]http://www.cayema.com/Stee-Lo/catalog?PHPSESSID=a2c94998a0a36d9d68b3af2d70b2861c"[/URL] class="fly"  ONMOUSEOVER="window.status='Check out our latest styles of clothing';return true" title="Browse our selections">Stee-Lo Clothing<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>
	<li class="top p3"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="entertainment" class="top_link"><span>Services</span><!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">

			<li><a href="[URL unfurl="true"]http://www.cayema.com/jizoke.html?PHPSESSID=a2c94998a0a36d9d68b3af2d70b2861c"[/URL]  title="Video Clips, Sound Clips and Jokes"  ONMOUSEOVER="window.status='Submit your best joke or read ours, watch video clips and listen to sound clips, great for a good laugh';return true">Jokes</a></li>

			<li><a href="[URL unfurl="true"]http://www.cayema.com/kma_feat.php?a_id=20&PHPSESSID=a2c94998a0a36d9d68b3af2d70b2861c"[/URL]   ONMOUSEOVER="window.status='Hating with an attitude, check out this column for advice from Haters Inc.';return true" title="Need advice! Haters Inc. can help!">Advice Column</a></li>
		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>
	<li class="top p4"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="contacts" class="top_link"><span>Contacts</span><!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">

			<li><a href="[URL unfurl="true"]http://www.cayema.com/kma_feed.php?a_id=17"[/URL] ONMOUSEOVER="window.status='Contact the staff at KMA';return true" title="Questions, comments and suggestions are welcome. Click here for our feedback form">Contact KMA</a></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>
	<li class="top p5"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="aboutus" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="sub">

			<li><a href="[URL unfurl="true"]http://www.cayema.com/kma_feat.php?a_id=19&PHPSESSID=a2c94998a0a36d9d68b3af2d70b2861c"[/URL] ONMOUSEOVER="window.status='Just some detailed info from the creator of cayema.com';return true" title="Ideas from the ceo of Cayema">Webmaster Note</a></li>

			<li><a href="[URL unfurl="true"]http://www.cayema.com/Policy.html">Privacy[/URL] Policy</a></li>
		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->

	</li>

	<li class="top p6"><a href="[URL unfurl="true"]http://www.cayema.com"[/URL] id="community" class="top_link"><span>Shop</span><!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="sub">
			<li><a href="[URL unfurl="true"]http://amazingforums.com/forum1/TIERRARICA/forum.html">Message[/URL] Boards</a></li>
			<li><a href="[URL unfurl="true"]http://www.cayema.com/icture.html?PHPSESSID=a2c94998a0a36d9d68b3af2d70b2861c"[/URL]   ONMOUSEOVER="window.status='Send in your pic to win a cash prize in the cayema picture contest';return true" title="Enter the picture contest winner gets a cash prize">Picture Contest</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>
 
Sort by date Sort by votes
I don't know how your menu looks like and I just cannot look at the mess of the code you posted. This is a very complex way of doing the menu and as such hard to maintain. I would suggest you drop this entire code and use a simpler menu (something like a suckerfish menu).

Basically, if your container for the menu will have its width defined in pixels, it will always stay the same regardless of the screen size. However, I do not see any relative (percentage) sizes in your code to begin with, so I don't know why it is happening in your code. Could the problem exist only in IE6?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
766
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
593
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top