Hey guys, I was just wondering if anyone could tell me how to center this horizontal menu (modern brick from dynamic drive). Thanks in advance.

 

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

#modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}

</style>

This should do the trick:

 

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0 auto;
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

#modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

</style>

 

For those who care, I changed the margin on the Unordered-List (ul for short) from '0 on all', and '40 on left', to '0 auto' which gives it 0 margin on top and bottom, and auto margin on left and right.

 

Changes shown:

 

Existing Code:

 

#modernbricksmenu2 ul{
margin:0;
[b]margin-left: 40px; /*margin between first menu item and left browser edge*/[/b]
padding: 0;
list-style: none;
}

 

New Code:

 

#modernbricksmenu2 ul{
[b]margin:0 auto;[/b]
padding: 0;
list-style: none;
}

 

Good luck.

This should do the trick:

 

New Code:

 

#modernbricksmenu2 ul{
[b]margin:0 auto;[/b]
padding: 0;
list-style: none;
}

 

That would work if the ul style had a width, but it hasn't, and the parent div #modernbricksmenu2 has width: 100%, so I think you need to add a width to the ul style and then it will use the auto margin to center:-

#modernbricksmenu2 ul{
margin:0 auto; width: 600px; background-color: skyblue;
padding: 0;
list-style: none;
}

 

The background-color is just temporary so that you can see where it is and how wide it is.