I am working on this : Menu List
What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.
So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.
Has anyone any ideas on the best way to approach this?
Thanks in advance.
Give image inside anchor. Write like this:
.menu-header ul li a{
display:block;
padding: 70px 55px;
text-indent:-9999px;
}
#access .menu-header ul li#menu-item-26 a{
background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;
}
#access .menu-header ul li#menu-item-24 a{
background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}
#access .menu-header ul li#menu-item-23 a{
background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}
Check this http://jsfiddle.net/FN6f5/2/
I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.
http://jsfiddle.net/FN6f5/3/
Related
I cannot get my hover or the other effects to work properly. What part of my code is incorrect?
CSS
#nav a {
display: block;
width: 180px;
height: 150px;
background-image: url(https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg);
background-repeat: no-repeat;
}
#nav a {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;
}
#nav a:hover {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;
}
#nav a:active {
background: url ('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;
}
HTML
<body>
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</body>
your css is looking for an a tag inside of an id called nav but you dont have that in your html. Change it to
<div id="nav"><img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" /></nav>
also you are trying to change the background of a but you have an image tag inside of the a. You should make everything a background image
In your CSS, you're accessing the element inside another element with an ID of "nav"... but in your HTML, there is no #nav element. You have two options, the first being:
Change your CSS to remove all the #nav before the a's.
Change your HTML to something like this:
<div id="nav">
<img src="https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg" />
</div>
Also, as Hashem Qolami said, you should remove the white space between "url" and your opening parenthesee. On another note, make sure the url inside your parentheses is inside quotes as well.
You should remove the white space between url and the opening parentheses in url (...), as follows:
#nav a {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 0;}
#nav a:hover {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -39px;}
#nav a:active {background: url('https://bboard.mcckc.edu/bbcswebdav/pid-1284576-dt-content-rid-6702240_1/courses/1141_PV_1_CSIS_128_13995/css-sprites.jpg') 0 -83px;}
WORKING vs NOT WORKING.
Also as you've used #nav a selector, you should have a wrapper for the anchor tag with the id of nav as well. If there's not such a element in your real markup remove the #nav from the CSS selectors.
So here's how I'd do it, in its simplest form
http://jsfiddle.net/7wh9z/
Add your image paths as needed - I've used colours as an example, you can take them out if you need to.
a {background: url('') #ff0000; width:150px; height:45px; display: block}
a:hover {background: url('') #00ff00;}
a:active {background: url('') #0000ff;}
The fact you've got an image in there already means whatever is in your IMG tag will display above the background - So that will prevent you from seeing the background and hover effects, so you're best off taking that out.
Remember to give your links classes or ID's as what I've given you will affect all a tags.
I have encountered a very interesting problem about img src which change on a:hover.
SCREENSHOT
As you see, hovering the <a> sector,you cant see logically the white img. So I had the same icons on black and white, I want on hovering the sectors of #menu, the img src changes img links to black icons, instead of white, which are for only non-hovered sectors.
CSS+HTML: http://paste.laravel.com/KJ1
ul li a{
background:#000000 url(/path/to/white/icon) left no-repeat;
background-color:black;
}
ul li a:hover{
background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}
try this one
Please see this below example. it's shows how to change the background image of li on mouseover event.
change background image of li on an a:hover
Hope it help.
You could use background image sprites for this there is an article about sprites here: http://css-tricks.com/css-sprites/ this will also reduce server calls to get images as all images can be in a single file.
CSS Example:
ul li a{
background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
background-color: #FFFFFF;
}
//then classes for each different link
ul li a.home {
//white icon
background-position: 0 0;
}
ul li a.home:hover {
//black icon
background-position: 0 -20px;
}
I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;
I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/