Well if you click 'home' on the front page you'll end up here.
http://www.r-gaming..../home/index.phpI tried making the 'Other' button a drop down menu. I copied a code from another website and customized it to my liking, which worked great. (I'm still new to PHP/CSS coding, so yeah it's a noob method, lol.)
Anyways, now I wanted to position the 'Other' button onto the navigation bar, but I can't center everything on it because its missing a button so it shifts all the buttons a bit to the left to center the ones already on there, and if I position the drop down "Other" button, it'll only go on top. What I did was add an image to the navbar "Other.png" so it centers everything, and then I moved the 'Other" button with the drop down on top of that. Problem is on larger screens you can see the buttons overlapping because they have a larger screen than mine. It should look like this:
Here is a snippet of that section for theme.php
<td align="center" class="Estilo4"> <a href="/urban-rp/home/index.php"></centre><img src="/urban-rp/home/img/news.png" /></centre></a> <a href="/forums/forum.php"><img src="img/forums.png"/></a><a href="http://www.r-gaming.net/urban-rp/home/donation.php"><img src="img/donate.png"/></a><a href="http://www.r-gaming.net/urban-rp/home/rules.php"><img src="img/rules.png"/></a><a href="http://www.r-gaming.net/urban-rp/home/controlpanel.php"><img src="img/UCP.png"/></a><a href="http://www.r-gaming.net/urban-rp/home/skins/skins.php"><img src="img/skins.png"/><img src="img/Other.png"/></a>
<body class="css" onLoad="highlightCurrentMenuItem()">
<div class="mainmenu" id="mainmenu">
<div class="menu">
<div><img src="img/Other.png"/>
<div class="popup">
<a href="index.html">Staff Members</a>
<a href="#">About Us</a>
</div>
Here's the snippet for the style.css
<style type="text/css">
body { font-family: Verdana; }
div.mainmenu {
position: absolute;
left: 932px;
top: 188px;
font-weight: italic;
z-index: 1;
}
div.menu {
float: left;
margin-left: 10px;
}
div.popup a:hover { background-color: #FFFFFF; }
div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display: block;
background-color: #333333;
}
div.menu div {
width: 85px;
background-color: #33333;
padding: 5px;
border: none;
}
div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 5px; }
div.popup div + div, div.popup a + a { margin-top: 10px; }
div.content {
position: absolute;
left: 20px;
top: 195px;
border: 1px dashed gray;
}
.current:after { content: "<"; color: white; }
.current:before { content: ">"; color: white; }
.current { color: white; }
</style>
All help is appreciated, and Im willing to pay in neopoints if needed!
Edit - I tried adding that #wrapper thing just like the previous problem, but it just makes things worse. Possibly because I did it wrong
Edited by Crayon, 20 November 2010 - 11:03 AM.
