I have a list using li for my nav bar. I set a border-radius on my background so that it would be rounded. Now I just need to delete the border-left of the home element. Here are the snippets of code:
HTML:
<li class="home">
home
</li>
CSS:
li.home {
border-left:0px;
}
I hope this is enough context to help answer my question. Please let me know if it isn't.
try li.home { border-left:0px !important; }
if you dont want left border dont mention it..i.e dont write border:1px solid; or boder-left:1px;..only mention the borders you need like border-right or border-top and to have rounded edge use border-top-right-radius:10px;
EXAMPLE :: FIDDLE
Related
My Site - Product Grid
When you hover over either of the product images on this page, there is a 2px horizontal line that appears to the left. I tried setting my padding, margin, no-wrap, I just can't figure it out. Thanks for looking and any advice.
I know I can cheat it by adding:
.mz-productlisting-image img {
margin-left: -4px;
}
But I don't want to if I don't have to!
This is the text-decoration:underline; of the anchor tag.
Simply add to
.mz-productlist-tiled a:focus,
.mz-productlist-tiled a:hover{
text-decoration:none;
}
Hope it helps :)
On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
I am trying to set the height of my top border. I have read around that this is not possible in traditional ways. But I am yet to find a workaround for this. I need my border to align at the very top of the page. So what can I do?
HTML
<li class="active">Hjem</li>
CSS
li.active
{
border-top:3px solid #000;
}
** The problem is that with the current code the height of the border, meaning the space between the border and the text is locked. I need to control this.
I had tried out. I dont see any problem with the current code. Created JsFiddle. It worked as expected.
li.active
{
border-top:3px solid #000;
}
JsFiddle
I am trying to implement a sub navigation menu under "Jewellery". The problem is I want a space between the two menus when they open. To achieve this I added "margin-top:5px;" to the sub navigation. It does create the space however as you can see as soon as I bring the mouse down to the sub navigation it becomes deselected.
What is the correct way to achieve this?
nav ul ul {
margin-top:5px;
background-color: #101010;
color: #FFF;
}
Link to jsfiddle
http://jsfiddle.net/2mpcQ/4/
You should use padding-top:5px and the black submenu inside this padded DOM Element
border-top: 5px solid #fff;
This will give the appearance of space between the Menu and sub menu.
and will still give it functionality.
You can use div tag sub menu to get the desired vertical space. I have modified your jsfiddle for reference.
.rowheight {background: #fff; font-size: 5px;}
<ul>
<li>
<div class="rowheight"> </div>
<ul><li>Item</li></ul>
</li>
</ul>
jsfiddle link -
http://jsfiddle.net/2mpcQ/25/
or can use border-top: 5px solid #fff; for nested ul but it is not controllable. It will affect all nested UL tags.
hope this helps!
If you want just to solve this issue, try adding border-top to .nav ul ul (border-top:5px solid #fff;). Though, your question was "what's the correct way to achieve this?". I think the right way is styling the "a" element, as Diodeus said.
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}