homepage Welcome to WebmasterWorld Guest from 50.17.86.12
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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



 
Msg#: 4636819 posted 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...]

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636819 posted 10:16 am on Jan 12, 2014 (gmt 0)

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

TheIceman5



 
Msg#: 4636819 posted 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.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636819 posted 10:56 pm on Jan 13, 2014 (gmt 0)

No problem, you're very welcome. ;)


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved