Log in

View Full Version : horizontal menu sizing problem


93036web
05-16-2007, 07:54 PM
hi

i used the horizontal hover menu from DD. and everytime i minimize my windows, the menu moves or resize. please help and i'm a newbie. here's the code


<!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" lang="en" xml:lang="en">
<head>
<title>DTI - About Us</title>


<style type="text/css">

.menu ul{
font: bold 12px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
position: absolute;
right: 0px;
top: 135px;
}

.menu ul li{
list-style: none;
display: inline;
}

.menu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: right;
color: white;
background-color: #0066CC;
border: 2px solid #0066CC;
}

.menu ul li a:hover{
background-color: #0099CC;
border-style: outset;
}

html>body .menu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

<style type="text/css">
BODY{
background-image: url(background/background w collage1.jpg);
background-repeat: no-repeat;
}
</style>


</head>


<BODY>

<div class="menu">
<ul>

<li><a href="http://www.driven-technologies.com">HOME</a></li>
<li><a href="http://www.driven-technologies.com">ABOUT US</a></li>
<li><a href="http://www.driven-technologies.com">CONTACT US</a></li>
<li><a href="http://www.driven-technologies.com">EXCITING NEWS</a></li>
<li><a href="http://www.driven-technologies.com">TECHNICAL SUPPORT & REPAIR SERVICE</a></li>
<li><a href="http://www.driven-technologies.com">PRODUCTS & SERVICES</a></li>


</ul>
</div>


<div id="content" style="color:black; position:absolute; left:50px; top:200px; width:450px; height:250px;">


<p><font size="6" face="Slipstream LET">ABOUT US</font></p>


<p><font face="Arial">
DTI is Corporatioin, incorporated in 2002, offering a specialized products and services to the Military and Commercial Aerospace communities.
DTI is committed to meeting and exceeding our customer's expectations for all facets of our design and mufacturing activities, including
on-time delivery of the highest quality products.<br><br>

DTI maintains a 3600 square foot CAD/CAM design and integration facility, complete with a documented Quality System compatible with ISO 9001
and MIL-I-45208. Our facility has in place a wide variety of test equipment, manufacturing and assembly equipment, and ESD protection.<br><br>

DTI's workforce has many years of combined experience with the precise technologies and customer requirements associated with the products and
services that we offer. Please contact DTI personnel at any time for any level of inquirty or assistance.<br><br>

DTI is a woman-owned small business located in an area of Santa Ana designated by the California Trade and Commerce Agency as an Enterprize Zone.
</font>
</p>


<p align="center"><font face="Arial">An Equal Opportunity Employer</font></p>


</div>



</body>

</html>
93036web
05-17-2007, 12:20 AM
here's the website: http://jrod.awardspace.com

minimize your brower window and you'll see that the menu is moving. I don't know how to fix it. please help!
Spiritvn
05-17-2007, 04:04 AM
hi,

It's caused becoz you don't format the width for the menu. And i think it's usual, if you to fix it, just format the width for the menu class or the ul property width. When you force the width, it will not change when you change ur screen resolution or the window browser

hf
93036web
05-17-2007, 04:24 AM
i added the width in the menu class, see below i highlighted in red. it still didn't work. i don't know what i'm doing wrong. please help.

<style type="text/css">

.menu ul{
font: bold 12px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
width: 700px;
position: absolute;
right: 0px;
top: 135px;
}

.menu ul li{
list-style: none;
display: inline;

}

.menu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: right;
color: white;
background-color: #0066CC;
border: 2px solid #0066CC;
}

.menu ul li a:hover{
background-color: #0099CC;
border-style: outset;
}

html>body .menu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
Spiritvn
05-17-2007, 04:35 AM
I think you just need to think about the resolution problems when you add a fixed width, and i had checked, the codes work fine.

But if you use minimize ur window browser, certainly it make the browse width be smaller, and you see at the moment it moved.

The menu resize the position becoz you align it on the right. So if the browser reisze it width the menu also move to fix the position.

You can test with any web page and see all the content will move if you minimize the window browser -.-
93036web
05-17-2007, 05:26 AM
yeah, i changed the format. thanks so much! i haven't upload it yet but here's the code

.menu ul{
font: bold 12px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
width:100%;
position: absolute;
top: 135px;
left:486px;
}

i really appreciate your help.