Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help Please - Reposition CSS Drop Down Menu.

    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:

    Code:
    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:

    Code:
    <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!!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Can we have a link to your page?
    This is the header for the page

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    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.)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Try
    Code:
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Since you have no width set to the menu, you'd need to use t he technique given at http://matthewjamestaylor.com/blog/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    elz88 (02-09-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •