css menu <ul><li> dinamically centered or width of buttons that covers the whole page
- by Tony Stark
I am building a home page for my minecraft server. Probably in the following 4-6 months I will opend my second and this is why I am in trouble.
My first site is 1000 pixel wide, and the second will be 1200. First big difference.
My menus are dinamically generated by my php code. It checks on my databases if there is another button or it is over. These buttons can be added or removed directly online.
Another big issue is the browser compatibility. In a survey I did on our previous server I had a lot of users using: chrome, internet explorer, safari and firefox. That means that I must find a solution that is compatible with most browsers.
What do I have to do?
I came up with this CSS, which is touch compatible, it allows menus to be swapped to the left and it is enough to set 1 parameter to fix it for every page width. Sadly it is left aligned.
body, nav, ul, li, a {margin: 0; padding: 0;}
body {font-family: Verdana,"Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
max-width: 900px;
margin: 0px auto 0px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #999999;
}
.nav {
border: 1px solid #424242;
background-color: #121212;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#686868', endColorstr='#121212');
background-image: -moz-linear-gradient(#686868, #121212);
background-image: -webkit-gradient(linear, left top, left bottom, from(#686868), to(#121212));
background-image: -webkit-linear-gradient(#686868, #121212);
background-image: -o-linear-gradient(#686868, #121212);
background-image: -ms-linear-gradient(#686868, #121212);
background-image: linear-gradient(#686868, #121212);
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
list-style: none;
*zoom: 1;
position: relative;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 11em;
z-index: 1;
background-color: #121212;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
}
.nav a {
padding: 10px 15px;
color:#999999;
text-transform: uppercase;
font: bold 11px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
*zoom: 1;
}
.nav a:hover{
color:#000000;
background-color: #B2B2B2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D3D3D3', endColorstr='#B2B2B2');
background-image: -moz-linear-gradient(#D3D3D3, #B2B2B2);
background-image: -webkit-gradient(linear, left top, left bottom, from(#D3D3D3), to(#B2B2B2));
background-image: -webkit-linear-gradient(#D3D3D3, #B2B2B2);
background-image: -o-linear-gradient(#D3D3D3, #B2B2B2);
background-image: -ms-linear-gradient(#D3D3D3, #B2B2B2);
background-image: linear-gradient(#D3D3D3, #B2B2B2);
}
/*Delimitazione di ogni tab | HOME | */
.nav li {
position: relative;
border-right: 1px solid #424242;
-moz-box-shadow: 1px 0 0 #686868;
-webkit-box-shadow: 1px 0 0 #686868;
box-shadow: 1px 0 0 #686868;
}
.nav > li {
float: left;
border-top: 1px solid #424242;
z-index: 200;
}
.nav > li > .parent {
background-image: url("../downArrow.png");
background-repeat: no-repeat;
background-position: center right;
}
.nav > li li > .parent {
background-image: url("../rightArrow.png");
background-repeat: no-repeat;
background-position: center right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
z-index: 100;
}
/* freccetta che indica un sottomenu nell'ultimo tab */
.nav > li:last-child li > .parent{
background-image: url("../leftArrow.png");
background-repeat: no-repeat;
background-position: left;
}
/*flip subsubmenu*/
.nav li.last.hover > ul {
left:auto;
right: 0;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover > ul {
left: 100%;
top: 0;
}
/* Spostare il 2^ sottomenu a sinistra */
.nav li.last li.hover ul {
left:auto;
right: 100%;
top:0;
}
.nav li li a {
display: block;
background-color: #686868;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
z-index:100;
border-top: 1px solid #686868;
}
.nav li li li a {
background-color: #686868;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
z-index:200;
border-top: 1px solid #686868;
}
.nav li li li li a {
display: block;
background-color: #686868;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
z-index:300;
border-top: 1px solid #686868;
}
.nav li li li li a {
background-color: #686868;
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
z-index:400;
border-top: 1px solid #686868;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("../downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
My girlfriend (who adapted this code) is really busy for school and cannot help me.
Leaving the borders on the whole square (page width), is it possible to make buttons cover the page width dinamically? Or is it possible to center the buttons?
Thank you very much!
