UPDATE: Okay I changed the margin on #access ul although now when I hover over it looks like this: http://imgur.com/NeUzN
Also is it possible to change the spacing between the page titles (sorry still learning css!)
I'm currently designing my wordpress theme and wondering how I could move the text up a bit to center up with the nav bar: http://i.imgur.com/BExiy.png
I'm using custom font as well. Here is my css:
#access {
background: #252525;
display: block;
float: left;
margin: 0 auto;
height: 40px;
}
#access ul {
list-style: none;
margin: -8px -13px -10px -13px;
padding-left: 0;
color:#000;
text-shadow:1px 1px 1px rgba(14,14,14,0.8);
text-transform:uppercase;
font: 24px Giantypo, Arial, Helvetica, sans-serif;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.5em;
padding: 0 1em;
text-decoration: none;
color:#f3f3f3;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #3e5d8c;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #3e5d8c;
}
#access ul ul a:hover {
background: #3e5d8c;
}
#access ul li:hover > ul {
display: block;
}
}
Any help would be great!
Cheers,
Scott
Top margin of unordered list must be negatie value. For example:
margin: -7px 0 0 0;
Set the line-height to be equal to its height. On #access a, I believe, but I cannot know for sure without seeing the HTML. And I cannot know its height without seeing all of it live.
Related
IS it possible to align menu item center? Actually my website has a lot many menus, So menus are appearing on second line from left so I want to show them as center aligned.Any suggestions?
Please find below my Css. This is edited style sheet of default twenty ten wordpress theme. I am using full width layout.
Thanks.
#access {
background:#cc0000;
margin: 0 auto;
width: 100%;
padding: 0px 0px;
border-top:2px solid #eb9999;
border-bottom:12px solid #000000;
clear:both;
margin-bottom:5px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin: 0 auto;
width: 1024px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 20px;
padding: 0 10px;
text-decoration: none;
}
#access ul{display:inline-block;}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
I need to get my navigation menu centered.
You can see my current menu at:
www.financialconsultingcareers.com
Here is the code:
#hor_nav
{
width: 100%;
color: #000000;
background: #f1f1f1;
font-size: 20px;
font-family: helvetica;
font-weight: bold;
height: 32px;
z-index: 1000;
Margin-top: -25px;
border-bottom: 5px solid #254117;
box-shadow: 0px 5px 5px #888888;
margin-bottom: 25px;
text-align: center;
}
#hor_nav UL
{
margin: 0;
}
#hor_nav LI
{
list-style: none;
display: center;
float: left;
margin-left: 3px;
padding: 0;
height: 32px;
position: relative;
text-transform: capitalize;
text-align: justify;
border-right: 1px solid #000001;
<!--left: 2.5%;-->
}
div.#hor_nav, ul.#hor_nav li.active a
{
border-radius: 5px 5px 0 0;
margin-right: 3px;
}
#hor_nav LI A
{
display: inline-block;
padding: 0 18px;
line-height: 32px;
margin-right: 3px;
color: #000;
font-weight: normal;
font-size: 100%;
text-decoration: none;
border-radius: 5px 5px 0 0;
text-align: justify;
}
#hor_nav LI.active A
{
border-radius: 4px 4px 0 0;
background-color: #254117;
color: #FFFFFF;
font-weight: normal;
padding-bottom: 4px;
margin-top: -4px;
}
#hor_nav li:last-child
{
border-right: none;
}
#hor_nav LI A:hover,
#hor_nav LI:hover A,
#hor_nav LI.sfHover A
{
background: #828282;
color: #FFF;
text-decoration: none;
border-radius: 5px 5px 0 0;
padding-bottom: 4px;
margin-top: -4px;
}
#hor_nav LI UL
{
position: absolute;
width: auto;
left: -999em;
margin-left: -4px;
border-radius: 5px 5px 0 0;
}
#hor_nav LI UL UL
{
margin: -31px 0 0 170px;
border-radius: 5px 5px 0px 0px;
}
#hor_nav LI:hover UL UL,
#hor_nav LI:hover UL UL UL,
#hor_nav LI:hover UL UL UL UL,
#hor_nav LI.sfHover UL UL,
#hor_nav LI.sfHover UL UL UL,
#hor_nav LI.sfHover UL UL UL UL
{
left: -999em;
}
#hor_nav LI LI
{
margin-left: -20px;
padding: 0;
font-size: 80%;
height: auto;
text-align: justify;
background: #CCC;
width: 225px;
border-radius: 0 0 0 0;
box-shadow: 0px 3px 3px #888888;
}
#hor_navLI LI A,
#hor_nav LI LI.active A,
#hor_nav LI LI A:hover
{
margin: 0;
height: 30px;
line-height: 30px;
background: #828282;
color: #FFF;
border-radius: 5px 5px 5px 5px;
}
#hor_nav LI LI A,
#hor_nav LI.active LI A
{
font-weight: normal;
border-radius: 5px 5px 0 0;
}
#hor_nav LI:hover UL,
#hor_nav LI.sfHover UL
{
left: 4px;
}
#hor_nav LI LI:hover UL,
#hor_nav LI LI LI:hover UL,
#hor_nav LI LI LI LI:hover UL,
#hor_nav LI LI.sfHover UL,
#hor_nav LI LI LI.sfHover UL,
#hor_nav LI LI LI LI.sfHover UL
{
left: 0;
}
#hor_nav LI
{
list-style: none;
}
It does not solve everything, but if you add a fixed width (say, width: 700px) to the <ul class="hor_nav">, the menu is centered (however, the background does not persist through the full width of the page, but you have to set the background to a different element in order to support that).
You must specify a fixed width in order for margin-left: auto and margin-right: auto to center the element.
There is no such thing as position: center. You can drop that one.
By the way, I notice the top logo is shrunk when you resize the page. Beware. ;)
If you want to center your navigation menu, you need to set a fixed width value to your UL. This is going to change how you implement your design though. So you may need to use the parent div in order to apply your border and background colors.
You have to specify a certain width. 100% would not work...
Example:
#hor_nav {
width: 500px;
margin: 0 auto;
The margin: 0 auto will centre it dead on but it will only work if you have a certain width applied to your element.
I am currently working on my nav bar. One issue I am having is that when I added 10px of padding to my main navigation .navi ul, 10px of clear space got added to all the drop down items under each menu item and I just can't figure out why. You can see this in action here: http://cbchaverhill.onedirectionconnection.com/
Here is my CSS:
.navi {
background: #222; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#252525, #0a0a0a);
background: -o-linear-gradient(#252525, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#252525, #0a0a0a);
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}
.navi ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 10px;
}
.navi li {
float: left;
position: relative;
}
.navi a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
font-weight: bold;
}
.navi ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
.navi ul ul ul {
left: 100%;
top: 0;
}
.navi ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd; color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 188px;
}
.navi li:hover > a,
.navi ul ul :hover > a,
.navi a:focus {
background: #efefef;
}
.navi li:hover > a,
.navi a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
.navi ul li:hover > ul {
display: block;
}
.navi
.current-menu-item > a,
.navi .current-menu-ancestor > a,
.navi .current_page_item > a,
.navi .current_page_ancestor > a {
font-weight: bold;
}
Any help would be greatly appreciated!
The css you apply to the .navi ul also applies to the nested ul's.
.navi ul {
padding-left: 10px;
}
One way to resolve this:
.navi ul ul {
padding-left: 0px;
}
Or:
.navi ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 0;
}
I've created a drop down hover list in the UL tags using CSS, but before I can get the mouse down over the links, they disappear. How can I stop this?
This is my code:
#header {
margin: 0px;
padding: 0px;
width: 100%;
background-color: red;
height: 30px;
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
text-align: center;
}
#header ul {
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline;
text-align: center;
position: relative;
}
#header ul li a {
text-decoration: none;
font-size: 22px;
color: white;
font-weight: bold;
line-height: 30px;
margin-left: 10px;
}
#header ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#header ul li:hover ul {
visibility: visible;
}
#header ul li a:hover {
text-decoration: underline;
font-size: 22px;
color: black;
}
Try adding height
#header ul li a{
text-decoration:none;
font-size:22px;
color:white;
font-weight:bold;
height:30px;
line-height:30px;
margin-left:10px;
}
Since your main menu is positioned at the very top of the page, it goes from 0 pixels to 30 pixels and you've left a 1 pixel gap before starting the submenu at 31 pixels. Either changing the main menu height to 31px or the top of the submenu to 30px should fix your problem.
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.