Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: not2easy

stuck on this menu, cant centre it. anyone help out

   
6:17 am on Jan 12, 2014 (gmt 0)



I have a menu here setup I cant seem to centre it in the screen, its always on the left side.
anyone know how I can centre it?
Also the long menu item in there, is there a way to adjust the width of the cells to be able to cater for this longer item as well automatically or not? would like to ideally have the menu cover 100% of the screen and be responsive and as it gets smaller it reduces in width.

[jsfiddle.net...]
10:16 am on Jan 12, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there TheIceman5,
try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
.menu {
background-color:#05BB74;
}
.menu:after {
content:'';
display:block;
clear:both;
}
ul.slimmenu {
position:relative;
float:right;
right:50%;
list-style-type:none;
margin:0;
padding:0;
}
ul.slimmenu li {
position:relative;
float:left;
left:50%;
text-align:center;
/*menu drop down part back ground colour */
background-color:#05BB74;
}
ul.slimmenu > li {
margin-right:-5px;
/* line between buttons colour */
border-left:1px solid #cfc
}
ul.slimmenu > li:first-child {
border-left:0;
}
ul.slimmenu > li:last-child {
margin-right: 0;
}
ul.slimmenu li a {
display:block;
text-decoration:none;
/* menu item text colour */
color:#fff;
/* this adjusts each menu rectangle area top, right, bot, left */
padding:5px 12px 5px 10px;
font-family:'Open Sans', sans-serif;
font-size:13px;
font-weight:400;
/* shadow of menu items */
text-shadow:0 1px 0 rgba(255,255,255,0.2);
transition:background-color 0.5s ease-out;
-o-transition:background-color 0.5s ease-out;
-moz-transition:background-color 0.5s ease-out;
-webkit-transition:background-color 0.5s ease-out;
margin:0 auto;
}
ul.slimmenu li a:hover {
/*mouse over menu BG colour */
background-color:#cfc;
text-decoration:none;
color:#000;
}
</style>

</head>
<body>

<div class="menu">
<ul id="navigation" class="slimmenu">
<li><a href="#">aaaa</a></li>
<li><a href="#">bbbbb</a></li>
<li><a href="#">this is a menu item</a></li>
<li><a href="#">uuuuu</a></li>
<li><a href="#">iiiiiiiiiiiiii</a></li>
<li><a href="#">oooooo</a></li>
</ul>
</div>

</body>
</html>



birdbrain
10:54 pm on Jan 13, 2014 (gmt 0)



thanks for that, I did a couple of mods and got it working pretty well from what you put there.
thanks.
10:56 pm on Jan 13, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)


birdbrain
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month