i'm trying to center the navigation tabs on top of a div. basically, I want the navigation centered on top of the div with a 2px stage in between each tab. The nav tabs now don't seem to sit centered on the .row.
any help would be GREATLY APPRECIATED!
.row {
margin: 0 auto;
width: 960px;
}
#top-menu{
font-family: "LeagueGothicRegular",sans-serif;
text-align: center;
margin-top:240px;
}
#top-menu li{
display: block;
float: left;
line-height: 1;
margin: 0 17px;
text-align: center;
}
#top-menu a{
font-family: 'LeagueGothicRegular', sans-serif;
background-color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #000000;
display: inline-block;
font-size: 1.97em;
line-height: 1;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
padding: 6px 18px;
text-decoration: none
}
#top-menu a:hover,
#top-menu .active a{
color: #fff;
background: #E80B44;
}
#top-menu a:hover .nav-arrow{
border-top-color: {{settings.nav_hover_colour}};
}
#top-menu ul .first ul{
left: 0;
}
#top-menu ul ul li{
color: #000000;
display: inline-block;
font-family: 'LeagueGothicRegular', sans-serif;
text-shadow: 1px 1px 1px transparent;
}
#top-menu ul ul {
font-family: 'LeagueGothicRegular', sans-serif;
display: inline-block;
border: none;
text-shadow: 1px 1px 1px transparent;
}
#top-menu > ul > li {
font-family: 'LeagueGothicRegular', sans-serif;
}
Change display: block; of #top-menu li to display: inline-block; and remove float: left;
Add text-align:center; to #top-menu ul
When this is done, your navigation will be centered when you decrease the margins.
Related
I'm working on a css/html site and I have this problem: in my style.css I got two divs, one for sidebar and one for content. I would like the sidebar to be, well, at the side, but when both are present the content always goes below the sidebar, unless I put that in position:absolute. In that case I have a problem when small screens are used, 'cause they get one over the other.
I paste the code, hope you can help!
/* This is for content */
article, aside, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#modal {
position: relative;
width: 100%;
display: inline-block;
display: table;
display: table-cell;
float: none;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
text align: center;
background-color: #f2f2f2;
overflow: auto;
}
#modal header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
}
#modal h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #323232;
text-align: center;
}
#modal section {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
font-size: 12px;
line-height: 175%;
color: #333;
text-align: center;
}
while this is the sidebar
/*sidebar */
#sidebar{
position: static;
margin-top: 15px;
max-width: 150px;
}
#sidebar ul,
#sidebar ul li,
#sidebar ul ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
top: 5%;
}
#sidebar ul {
position: static;
top: 90px;
z-index: 1000;
}
#sidebar ul li {
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#sidebar ul li.hover,
#sidebar ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#sidebar ul ul {
margin-top: 1px;
visibility: hidden;
position: absolute;
top: 1px;
left: 99%;
z-index: 598;
width: 100%;
}
#sidebar ul ul li {
float: none;
}
#sidebar ul ul ul {
top: 1px;
left: 99%;
}
#sidebar ul li:hover > ul {
visibility: visible;
}
#sidebar ul li {
float: none;
}
#sidebar ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#sidebar {
font-family: 'Lato', sans-serif;
font-size: 18px;
width: 180px;
}
#sidebar ul a,
#sidebar ul a:link,
#sidebar ul a:visited {
display: block;
color: #000000;
text-decoration: none;
font-weight: 300;
}
#sidebar > ul {
float: none;
}
#sidebar ul {
background: #a0a0a0;
}
#sidebar > ul > li {
border-left: 3px solid #000000;
}
#sidebar > ul > li > a {
padding: 10px 20px;
}
#sidebar > ul > li:hover {
border-left: 3px solid #9b1a1c;
}
#sidebar ul li:hover > a {
color: #9b1a1c;
}
#sidebar > ul > li:hover {
background: #f6f6f6;
}
/* Sub Menu */
#sidebar ul ul a:link,
#sidebar ul ul a:visited {
font-weight: 400;
font-size: 14px;
}
#sidebar ul ul {
width: 180px;
background: none;
border-left: 20px solid transparent;
}
#sidebar ul ul a {
padding: 8px 0;
border-bottom: 1px solid #eeeeee;
}
#sidebar ul ul li {
padding: 0 20px;
background: #fff;
}
#sidebar ul ul li:last-child {
border-bottom: 3px solid #000000;
padding-bottom: 10px;
}
#sidebar ul ul li:first-child {
padding-top: 10px;
}
#sidebar ul ul li:last-child > a {
border-bottom: none;
}
#sidebar ul ul li:first-child:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 13px;
border-left: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
I am using jmenu.js and setting child menu elements to have transparency. Problem is that the child elements with transparency show the parent's (i.e. main menu bar) background. What I want is have transparency on the child menus which show through to the page background. The CSS is:
.jMenu {
display: table;
margin: 0 0 0 50px;
padding: 0;
}
/* First level */
.jMenu li {
display: table-cell;
background: url('../images/tile_gray.png');
margin: 0;
}
.jMenu li a {
padding: 10px;
padding-right:55px;
display: block;
background-color: transparent;
color: white;
text-transform: uppercase;
margin-top:2px;
cursor: pointer;
font-size: 14px;
font-family: Myriad Pro, Lucida Sans, Segoe UI, Calibri, sans serif;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
/* Lower levels */
.jMenu li ul {
display: none;
position: absolute;
z-index:9999;
padding: 0;
margin: 0;
}
.jMenu li ul li {
background-color: #fff;
display: block;
padding: 0;
}
.jMenu li ul li.arrow {
background: url('../images/tile_pink.png');
padding: 0;
border-bottom: none;
padding-bottom: 5px;
margin-top: 10px;
}
.jMenu li ul li a {
font-size: 13px;
text-shadow: 0px 0px 0px rgba(0,0,0,0);
text-transform: none;
padding: 7px;
display: block;
border-top: 1px solid transparent;
text-decoration: none;
}
.tran {
background: rgba(120, 120, 120, .2);
}
.jMenu li ul li a.isParent {
background: url('../images/tile_darker.png');
}
.jMenu li ul li a:hover {
background: url('../images/tile_green.png');
}
UPDATED
I changed the css to have the background transparent not on the anchor but on the li:
.jMenu li ul li {
background-color: #fff;
display: block;
background: rgba(0, 0, 0, .4);
padding: 0;
}
It looks like you have a background image on all .jMenu li. Even though you think you are just applying this background ('.../images/tile_gray.png') to only the first level, it is leaking down into the inner <li>'s
Try adding background-image: none; to your child li:
.jMenu li ul li {
background-color: #fff;
background-image: none;
display: block;
padding: 0;
}
This might work but it is hard to tell what exactly is going on without seeing it in action and without your HTML.
I've created a drop down menu using css where the drop down appears as a horizontal row instead of a vertical list. My only problem is that the drop down menu does not line up with the rest of menu. I want it to be flush with the left side of the navigation bar.
The page is up at this address: http://concept82.com/CBHweb/index2.html
The code for my drop down menu is:
#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
#nav {
margin: 1px;
padding: 0px;
}
#nav li {
list-style: none;
float: left;
}
#nav li a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-align: center;
margin-top: 5px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
width: 140px;
}
#nav li a:hover {
color: #201E30;
}
#nav li ul {
display: none;
}
#nav li ul a{
width: auto;
font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-right: 1px solid #594361;
padding: 0px 15px 0px 15px;
margin-top: 3px;
margin-bottom: 3px;
white-space: nowrap;
}
#nav li.first, #nav li.hover li.first {
float: left;
display: block;
text-decoration: none;
color: #594361;
font-size: 11px;
border-left: 1px solid #594361;
padding: 2px 15px 2px 5px;
margin-top: 3px;
white-space: nowrap;
}
#nav li:hover li a, #nav li.hover li a {
color: #201E30;
background-color: #FFFFFF;
}
#nav li li a:hover {
color: #201E30;
}
Thanks ahead of time!
You should change position of #navholder as relative.
#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
}
When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place
#nav li:hover ul, #nav li.hover ul {
position: absolute;
left: 0;
display: inline;
padding-top: 5px;
}
I want to code this so the active and hover li's appear over the normal li. But what happens is the hover and active li's appear inside the normal li. When I add padding (to hover and active li's) in an attempt to duplicate the size of the normal li, the normal li remains visible and simply expands by the increase padding of the hover and active li and not covered as I need it to be.
Here is my CSS:
/***********HORIZONTAL NAVS***********/
.menu-horizontal {
margin: 3px 2px 0.75em;
}
.menu-horizontal ul.top-level {
background-color: #FFFFFF;
clear: none;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-horizontal ul.top-level li {
background: #FEAB27;
border-radius: 7px 7px 0px 0px;
display: inline-block;
height: 28px;
padding: 0 25px;
}
.menu-horizontal ul.top-level {
display: inline-block;
float: left;
height: 23px;
margin-left: 173px;
padding-top: 5px;
text-align: center;
text-transform: none;
}
.menu-horizontal ul.top-level li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
display: inline-block;
line-height: 24px;
text-decoration: none;
font-family: Verdana,'Magra','Gafata',sans-serif;
font-size: 102%;
font-weight: bold;
}
.menu-horizontal ul.top-level li.selected a, .menu-horizontal ul.top-level li a:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
text-decoration: underline;
}
.menu-horizontal li ul.second-level {
display: block;
left: -999em;
margin: -1000px 0 0;
overflow: visible;
padding: 0 0 9px;
position: absolute;
text-align: left;
}
.menu-horizontal li:hover ul.second-level, .menu-horizontal li.hover ul.second-level {
left: auto;
}
Thanks!
I am not sure if I got your question right, but did you want something like this?
.menu-horizontal ul.top-level li.selected, .menu-horizontal ul.top-level li:hover {
background: #FDCC00;
border-radius: 7px 7px 7px 7px;
}
.menu-horizontal ul.top-level li a:hover, .menu-horizontal ul.top-level li.selected a {
text-decoration: underline;
}
http://jsfiddle.net/svSwA/
If you want to change another element as an A you have to put the :hover selector on it, or you have to use JavaScript.
I can't get the color of my dropdown items white, someone knows how I can fix this?
My normal links needs to be black, the not active ones needs to be black, the active one needs to be white, the dropdown items needs to be white. I've got it all with that code except for the most up dropdown item.
Heres my css:
.menuitems{
line-height: 240%;
text-transform: uppercase;
}
.menuitems ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
}
.menuitems ul li {
display: block;
position: relative;
float: left;
}
.menuitems li ul {
display: none;
}
.menuitems ul li a {
height: 40px;
display: block;
text-decoration: none;
color: black;
border-left: 1px #D0D0D0 solid;
padding: 0px 30px 0px 30px;
}
.menuitems li > ul li a
{
color:white;
}
.menuitems ul ul li{
text-transform: none;
border-bottom: 1px #ff5c38 solid;
line-height: 380%;
}
.menuitems ul li:hover{
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li a:hover {
height:40px;
color: white;
padding-left: 30px !important;
padding-right: 30px !important;
}
.menuitems li:hover ul {
display: block;
position: absolute;
}
.menuitems li:hover li {
float: none;
font-size: 13px;
background: #fa3423;
}
.menuitems li:hover a { }
.menuitems li:hover li a:hover {
}
/* What to do on active */
.menuitems ul li.current_page_item {
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems ul li.current_page_item a{
color: white;
}
.menuitems li.current_page_parent a {
color: white;
}
.menuitems li.current_page_parent {
color: white;
background: url('images/menu-background1.png') repeat-x 0 0;
}
.menuitems li:hover ul:hover a:hover{
color: white !important;
}
.menuitems ul li ul{
color: white;
}
I tried everything.. :(
Castra, I assume you're talking about the text? If you want the text to always be white, you'll need to change color: black; in .menuitems ul li a to color: white;
Here's a JSFiddle that shows it.