...

View Full Version : Help Please - Reposition CSS Drop Down Menu.



elz88
02-07-2012, 12:45 AM
Hi All, I'm trying to help a friend make a site for her roller derby team

I'd like to reposition the menu from the top left, I have tried putting the menu in a div tag, and this didn't work. I've also had a play around with all of the position codes in the CSS file, this didn't work either and mostly just skewed the menu.

Code From CSS file:



ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=84)";opacity:0.84;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#f70000;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;filter:alpha(opacity=84)}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li:hover{
position:relative;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;opacity:1;}
ul#css3menu1{
display:block;font-size:0;float:left;}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a,ul#css3menu1 a.pressed{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Tahoma;color:#414141;text-shadow:#FFF 0 0 1px;cursor:pointer;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#f70000;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#ffffff;text-decoration:none;}
ul#css3menu1 li:hover>a{
background-color:#f70000;border-color:#C0C0C0;border-style:solid;font:bold 14px Tahoma;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 li a.pressed img.over{
display:inline;}
ul#css3menu1 li a.pressed img.def{
display:none;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
background-image:url("arrowsub.png");padding-right:28px;}
ul#css3menu1 a{
padding:10px;background-color:#8f8f8f;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#414141;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#f70000;background-image:url("mainbk.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 1px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#f70000;background-image:none;font:14px Tahoma;color:#0b0b0b;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}


Code From page:



<div style="position: absolute; left: 394; top: 263">
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="home.htm" target="main" style="height:17px;line-height:17px;">Home</a></li>
<li><a href="#" target="main" title="About" style="height:17px;line-height:17px;"><span>About</span></a>
<ul>
<li><a href="lcrd.htm" target="main" title="About LCRD">About LCRD</a></li>
<li><a href="aboutderby.htm" target="main" title="About Rollerderby">About Rollerderby</a></li>
</ul>

</li>
<li><a href="#" title="Teams" style="height:17px;line-height:17px;"><span>Teams</span></a>
<ul>
<li><a href="megahertz.htm" target="main" title="Mega Hertz"><span>Mega Hertz</span></a>
<ul>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Player Profiles"><span>Player Profiles</span></a>
<ul>
<li><a href="#" title="Player 1">Player 1</a></li>
<li><a href="#" title="Player 2">Player 2</a></li>
<li><a href="#" title="Player 3">Player 3</a></li>
<li><a href="#" title="Player 4">Player 4</a></li>
<li><a href="#" title="Player 5">Player 5</a></li>
</ul>

</li>
</ul>

</li>
<li><a href="zebras.htm" target="main" title="Zebras">Zebras</a></li>
</ul>

</li>
<li><a href="freshmeat.htm" target="main" title="FRESH MEAT" style="height:17px;line-height:17px;">FRESH MEAT</a></li>
<li><a href="events.htm" target="main" title="Events" style="height:17px;line-height:17px;"><span>Events</span></a>
<ul>
<li><a href="abcd.htm" target="main" title="Events 1">Events 1</a></li>
</ul>

</li>
<li><a href="gallery.htm" target="main" title="Gallery" style="height:17px;line-height:17px;">Gallery</a></li>
<li><a href="#" title="Media" style="height:17px;line-height:17px;">Media</a></li>
<li><a href="sponsors.htm" target="main" title="Sponsors" style="height:17px;line-height:17px;">Sponsors</a></li>
<li class="toplast"><a href="contactus.htm" target="main" title="Contact LCRD" style="height:17px;line-height:17px;">Contact LCRD</a></li>
</ul>
</div>


Any and all help greatly appreciated!!

abduraooft
02-07-2012, 06:34 AM
Can we have a link to your page?

elz88
02-07-2012, 07:25 AM
Can we have a link to your page?

This is the header for the page

http://www.latrobecityrollerderby.com.au/home4.htm

abduraooft
02-07-2012, 07:30 AM
Try
ul#css3menu1 li {
display: block;
/* float: left;*/
font-size: 0;
white-space: nowrap;
}
(assuming, you need a vertical menu on the left, rather than a horizontal one at the top.)

elz88
02-07-2012, 11:40 AM
Try
ul#css3menu1 li {
display: block;
/* float: left;*/
font-size: 0;
white-space: nowrap;
}
(assuming, you need a vertical menu on the left, rather than a horizontal one at the top.)


Hey thanks, but I do actually want the horizontal menu, I just want to move it to the right of the picture, so it sits about centre of the page.

abduraooft
02-07-2012, 12:04 PM
Since you have no width set to the menu, you'd need to use t he technique given at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum