I'm finishing up my first site: http://www.audio-agent.com/.
I just noticed that, while it looks correct in Firefox, the navigation menu padding and vertical alignment is off when viewed in Safari / Chrome.
Here's all the CSS I'm using for the menu:
ul#navigation {
background:url(images/navBgSlice.png);
color:#fff;
padding:6px 40px 6px 40px;
font-size:14px;
text-transform:uppercase;
text-align:right;
}
ul#navigation a.current {
color:#fcff00;
}
ul#navigation a:link, ul#navigation a:visited,
p.flip a:link, p.flip a:visited {
font-weight:normal;
}
ul#navigation a:active, ul#navigation a:hover,
p.flip a:active, p.flip a:hover {
text-decoration:none;
}
ul#navigation li {
display:inline-block;
padding:0 10px;
}
ul#navigation li:last-child {
padding-right:0;
}
And the HTML is just:
<ul id="navigation">
<a class="current" href="<?php blogInfo('url'); ?>"><li>Services</li></a> |
<li>Clients</li> |
<li>News</li>
</ul>
Any idea what could be going on? Any help is much appreciated!
Change:
ul#navigation li:last-child {
padding-right:0;
}
To:
ul#navigation li.last-child {
padding-right:0;
}
And add class="last-child" to your list:
<li class="last-child">News</li>
If you want full cross-browser support, this is the simplest way to accomplish this - As earlier IE and Safari struggle with the pseudoclass :last-child
Hope this helps.
Here's an example: http://jsfiddle.net/DAyjz/
Related
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
here is my html code
<div id="menus">
<ul>
<li>Home</li>
<li>Users</li>
<li>Project Manage</li>
<li>Transaction</li>
<li style="border-right:none;">Logout</li>
</ul>
</div>
here is my CSS
#menus li
{
float:left;
list-style-type: none;
padding-left: 25px;
padding-right: 25px;
border-right:groove 1px #FFFFFF;
background: #666666;
}
#menus li:hover
{
background: #999999;
}
#menus li a
{
font-size:24px;
text-decoration:none;
color:#FFFFFF;
}
#menus li a:hover
{
color:#000000;
}
now i want to change css when user click on li (like display current selected). can I do this using css only?? If yes then how??
Thanks in advance..
You can do it with CSS only using focus and tabindex
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/4/
li:focus {
background: red;
outline: 0;
}
A good way to employ an 'active' menu item solution is this
DEMO http://jsfiddle.net/kevinPHPkevin/LstNS/6/
Source: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
No, you can not do this with just css. I am not too sure what to say...
If you want to have a page specific active, place a different class in the backend, example:
This simple code is not working:
HTML:
<div id="topnav">
<ul>
<li>Aaaaaaa</li>
<li>Bbbbbbbb</li>
<li>Ccccccccc</li>
</ul>
</div>
CSS:
#topnav li a:hover:first-child{
color:#ff0000;
}
#topnav li a:nth-child(2):hover{
color:#FF7700;
}
#topnav li a:nth-child(3):hover{
color:#FFFF00;
}
Each link should have a different hover color. All of them show up as red. Why?
JSFiddle: http://jsfiddle.net/jeZHD/
Because there is only one <a> per parent element. That means, every <a> is the first child of its parent <li>.
Try it on <li> instead.
Working example: http://jsfiddle.net/jeZHD/2/
Here:
#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }
After wasting so much time on this, I just realized that the nth-child should be on the li's, not the a's. Like so:
#topnav li:first-child a:hover{
color:#ff0000;
}
#topnav li:nth-child(2) a:hover{
color:#FF7700;
}
#topnav li:nth-child(3) a:hover{
color:#FFFF00;
}
Here's the site: http://breteastman.com/stormwater-basics/
Here's the dropdown css & menu CSS.
#menu-main-menu{margin-left:-30px;}
#menu-main-menu a:hover {color:pink;}
#menu-main-menu{
list-style:none;
display:inline;
text-align:center;
}
.main {
margin-top:20px;
}
#menu-main-menu li{
float:left;
}
#menu-main-menu li{
padding-left:5px;
padding-right:5px;
border-right:1px #fff solid;
}
.main{
padding-top:-1000px;
}
#menu-main-menu li a{
color:#fff;
font-size:1.2em;
text-decoration:none;
}
#navigation li a:hover{
color:#399edb;
text-decoration:none;
}
/* dropdowns */
/* Hiding the other chlidren */
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;margin-left:-20px;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;}
.sub-menu { position: absolute;display: none;float:none;list-style:none;}
.sub-menu li { clear: both;width:225px;background-color:#000;padding:10px;border:0;text-align:left;}
.sub-menu {list-style:none;}
basically when I go to click, the drop down goes away. Please help!
Try taking out the display:none on .sub-menu:
.sub-menu { position: absolute;float:none;list-style:none;}
That should get you closer to your solution.
You have missing stylesheet properties. I see you are using superfish dropdowns. You can include their stylesheet :
<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
and then just adjust your website's navigation styles to what you want.
See my link : http://jsfiddle.net/nCK2P/1/ [excuse the colours used, just for the example]
I'm currently putting an HTML site into Expression Engine. The site uses the body ID tag to drive the sprite navigation rather than current/active classes. When I created the site index with blank links the navigation appeared correctly. However when I linked the pages to the appropriate templates the sprite positions all defaulted to the last sprite in the navigation's a:link position. When hovered the link would display properly and when clicked take me to the correct place and change to the correct a:focus/hover position. This behavior occurs in Firefox but not Safari. In Safari everything appears how I expected it to.
I'm using Expression Engine 2.x on a local installation. I've re-examined the channel urls and the site config settings as well but I've run out of ideas as to what the problem could be.
Any thoughts would be appreciated.
This is a visual of the issue I'm having. . The first line is what is how the nav appears in Firefox. The second row is how the link looks when a link is hovered over. The third is how the nav is rendered in Safari.
This is the css for the navigation:
/* navigation */
#nav {
background: url("/img/nav-bg.gif") no-repeat top left;
position:absolute;
top:176px;
width:960px;
height:44px;
z-index:20;
}
ul#navlist {
position:relative;
height:35px;
width:512px;
padding-left:192px;
margin-top:4px;
overflow:hidden;
}
ul#navlist li {
padding:0;
margin:0;
float:left;
margin:0px;
text-indent:-9999px;
list-style:none;
}
ul#navlist li a {
display:block;
background-image:url("/img/main-nav-sprite.jpg");
background-repeat:no-repeat;
overflow:hidden;
}
ul#navlist li a:link, #navlist a:visted {
display:block;
}
li#home a {
width:82px;
height:35px;
}
li#services a {
width:101px;
height:35px;
}
li#portfolio a {
width:105px;
height:35px;
}
li#blog a {
width:76px;
height:35px;
}
li#about a {
width:82px;
height:35px;
}
li#contact a {
width:65px;
height:35px;
}
li#home a:link, a:visited {
background-position:0px 0px;
}
li#home a:hover, a:focus {
background-position: 0px -35px;
}
li#services a:link, a:visited {
background-position:-82px 0px;
}
li#services a:hover, a:focus {
background-position: -82px -35px;
}
li#portfolio a:link, a:visited {
background-position:-183px 0px;
}
li#portfolio a:hover, a:focus {
background-position: -183px -35px;
}
li#blog a:link, a:visited {
background-position:-288px 0px;
}
li#blog a:hover, a:focus {
background-position: -288px -35px;
}
li#about a:link, a:visited {
background-position:-364px 0px;
}
li#about a:hover, a:focus {
background-position: -364px -35px;
}
li#contact a:link, a:visited {
background-position:-447px 0px;
}
li#contact a:hover, a:focus {
background-position: -447px -35px;
}
/* Main Navigation Active States */
body#home-page ul#navlist li#home a {
background-position:0 -35px;
}
body#services-page ul#navlist li#services a {
background-position:-82px -35px;
}
body#folio-page ul#navlist li#portfolio a {
background-position:-183px -35px;
}
body#blog-page ul#navlist li#blog a {
background-position:-288px -35px;
}
body#about-page ul#navlist li#about a {
background-position:-364px -35px;
}
body#contact-page ul#navlist li#contact a {
background-position:-447px -35px;
}
/* end */
This is my html nav code appended:
<div id="nav">
<ul id="navlist">
<li id="portfolio">portfolio</li>
<li id="blog">blog</li>
</ul>
</div>
<!-- ***nav -->
I tried using {path="template group/template"} as well but the result was similar.
Check to make sure that you're linking to stylesheets correctly in your templates.
If your CSS is an ExpressionEngine template:
<link href="{stylesheet=template_group/template_name}" media="all" />
If your CSS is a file on your server:
<link href="{path=/css/screen.css}" media="all" />
With your stylesheet(s) linked to correctly, the only other possibility to your problem would be the path to your sprite from within the stylesheet.
I prefer to use absolute paths to images, so it makes maintenance easy:
#foo {
background: url(/images/sprite.png) no-repeat left top;
}
To confirm your paths are correct, use whichever method is more comfortable for you and look for errors using:
Firefox's Firebug
Safari's Activity Monitor or WebKit Inspector
Chrome's Developer Tools
Apache's error_log.
If you can post some code samples, it would make further troubleshooting your issue easier.
Looking at your CSS, you're declaring some of the same rules multiple times in your stylesheet. As a result, whatever rules appear later in the stylesheet will override any previous rules matching the same selector.
Therefore, you can greatly simplify your CSS by removing the unnecessary :link, :visited, et al pseudo class selectors which will make debugging your image sprite much easier.
For example, consider the following HTML:
<div id="nav">
<ul id="navlist">
<li id="portfolio">portfolio</li>
</ul>
</div>
The relevant CSS can be simplified and consolidated into:
li#portfolio a {
background-position: -183px 0;
height: 35px;
width: 105px;
}
li#portfolio a:hover {
background-position: -183px -35px;
}
Removing and eliminating the LVHA (LOVE HATE) pseudo classes from your CSS where they're not needed will drastically reduce the complexity debugging your problem.