I have a unordered list styled in CSS to create a horizontal navigation. Each list item has a border-left property to create a separator line. The last item in the list does not have this border-left property (override by using border-left:0). It works, however, the <a> link element (as opposed to the <li> element) is showing the border-left property. I cannot for the life of me figure out how to remove it.
Here is the web page in question: http://sa4idev.com/stabilis/buy-lng-here/ -- if you look at the bottom navigation, you'll see "BUY LNG HERE" with a stray vertical border just to the left of the "BUY" -- it is not supposed to be there. Any suggestions on how to remove that?
Thanks!
It seems like that's actually coming from the background image background:url('images/buy_lng_on.png') no-repeat; applied to #menu-item-59.current-menu-item a (inspector said line 659). Double-check that the image doesn't have stray blue lines in it.
EDIT:
It's actually because you're putting the background image on both the li and the a inside it (and on a:hover, incidentally). The blue line at the far left of the image is showing once for the li and once for the a. Removing the background image from the a fixed the issue in my testing.
you can use CSS2 pseudo CSS selector.
in your case you want to remove border from the last li so you can do this by selecting last-child or if you want to remove border from the first li then you can choose first-child CSS selector.
li:first-child{border:0}
li:last-child{border:0}
Related
I'm using tree view to populate rows in my webpage.
In html this is rendered as tables and anchor tags. The top edge and bottom edges are not being selected on hover (i.e. if we place mouse on the top edge of a item the anchor tag has no hover.
problem-
when I hover on Image, then anchor tag is not selected.
problem- I need edges to be covered by <a>.
http://jsfiddle.net/krishnathota/tGWsH/
I need edges to be covered by <a>.
I need color of the <a> anchor tag text to be changed when the mouse is hovered on the image.
Actually I have copied the pageSource from browser into the fiddle.
If you wish I wil give the treeview code.
Can you help me in achieving this?
Is that what you want?
Demo
You need to add another class by extending CSS.
So I have something to show you how-
Added on anchor-
.anchor-back
{
background:#98bf26;
color:white;
}
Javascript-
$('a').hover(function(){
$('a').removeClass('anchor-back');
$(this).addClass('anchor-back');
});
I hope you will get an idea from here.
Used to this
.treeView table tbody tr:hover a{
color:#fff;
}
Demo
In order to properly place a bullet image on each navigation li element we normally use the background property to place it.
If however, we wish to, also, add a background change to the list, we should set our anchors inside li to have "display:block;"
Problem:
Once we add "display:block" to our element and we set a background color, our bullet will vanish.
What is the best way to have a menu that will:
Change the background color when the user overs it,
but that doesn't also loose the bullet ?
Update:
Please take into consideration the following code:
http://jsfiddle.net/4PUFa/1/
k. regards
You should not be using the background property for list bullets. You should be using this:
ul { list-style-image: url(path/yourImage.gif); }
which still leaves background for background work.
EDIT: For a right image (per your comment), I can make two possible suggestions, but only one will work for IE7, so I will offer that only:
Put the bullet in the background of the a tag and change the color on the li.
Like so: http://jsfiddle.net/4PUFa/3/
Problem: Once we add "display:block" to our element and we set a background color, our bullet will vanish.
I find this to be false. Look: http://jsfiddle.net/dbugger/4PUFa/
You are probably using twice the shorthand "background", and not know that this the second abckground will invalidate ALL the seeting of the first one.
Okay, I have typical menu (ul>li>a). The mission is to draw background <div> (shadow, gradient etc) into an <li> element (ul>li>.shadow-bg-white)
(for example, the div is green bordered. all other borders are just for better visibility of problem)
http://jsfiddle.net/voilalal/P57yE/embedded/result/ or http://jsfiddle.net/voilalal/P57yE/6/
(for example, the div is bordered with green color)
If I hover over the items from left to right, everything is okay. However, if I hover over the items from right to left, items on the left side do not react to the :hover pseudo-class.
Every block has the CSS position property assigned, so z-index should work well, I hope.
At least, .shadow-bg-white z-index seems to be placed higher than the a item.
What solution can you recommend?
Benjam was on the general right track I think. I don't know your ultimate purpose, so the solution may not work in your case, but there is no other solution. The li you are hovering on must be set lower than the others so the div in it does not overlap them. Adding this:
#header-menu ul li:hover {
z-index: 498; /* one lower than your set z-index for li */
}
See here: http://jsfiddle.net/P57yE/8/.
The reason it worked going left is that by default when items are at the same z-index the one coming later in the source order is given precedence, so as you move right you move down in your html source order and the hover is picked up on the new element with the same z-index. But when you move left, you are going up in the html source order so the one you were hovering on had precedence and the hover remains.
They don't react because they are being covered by the div, therefore the div is stealing the hover from anything below it.
If the div does not need to be covering all of the LIs, you might want to place it below the LIs with z-index. But I'm not sure exactly what you're trying to do here, so I'm not sure if that solution will work for you.
I would like to remove the border around the widgets on my home page. The CSS of my theme removes this universally. I thought I could specify the location and name of the Div text widget, (ie text-7, text-6) etc. and alter this. I can control the elements within the widget doing this, but it still will not remove the border. For example, the text widget:
#text-7. {border:1px solid transparent; text align: center}
Centers the elements, but does not remove the border. I've tried a few variations with no luck. Here is the source code: http://pastebin.com/7dSUebhk. Link to the live site in the comments below.
Thank you very much.
Alex
There is no border around the div#text-7 element on your page so that is why your css does not remove the border. There is a border around div.sidebox which if you add:
.sidebox {border:0px}
Will remove all sidebox borders.
Your options are: a) use javascript/jquery to select the parent div of #text-7 and remove the border that way, b) add a unique ID to the .sidebox DIVs so you can then remove the border for the specific sidebox DIV.
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul