homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

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




msg:4636821
 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




msg:4636843
 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:4637178
 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




msg:4637179
 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