I'm struggling with an anchor (specifically a:hover) tag in CSS. Here's my JSFiddle:
http://jsfiddle.net/yXwng/
Basically I have a nav bar with a custom image (in the fiddle I got rid of it because I'm just trying to understand the syntax and line things up). The nav bar is a div and I have five links on the nav bar which are all nested divs.
In order to make the each of the nested divs links (I made the entire div a link), I added a transparent png as the background image and set the link to the background image, thus the nav bar custom image still shows and you can click the link on the nav bar.
Now, I'm trying to make a hover/rollover image for each nav bar element. When I rollover, it shows the new image but it's aligned completely wrong (down and to the right of where the original image was). On my fiddle, I used the code, but instead of the images I'm using, I just used borders for alignment purposes. You can see on the example that the red box (which is the anchor) is not lined up for some reason with the div. That is exactly where the hover image shows up when I try to implement it.
Any ideas? Thanks!
if you add the same dimensions to your a link, it should work perfectly:
#homelink a{
border:1px solid red;
width: 200px;
height: 40px;
display:inline-block;
}
You need to give a display block and some line height to <a> like this:
#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}
It will be aligned with div. BTW you need to use UL LI structure for it.
Related
I am trying to add a dropdown arrow on menu items that have submenus and would like to adjust the position of the image so that it is directly below the menu link and centered. How can I adjust the positioning of the image?
Here is my current CSS:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
}
This adds the image directly to the right of the menu item but I'm not sure how to reposition it.
Thanks!
I came up with 2 different approaches.
The first is much like yours, using content: url(path_to_image) directly: JS Bin
This is done by adding display: block; in both .menu-item and it's :after, causing a "line-break". text-align: center; take cares of centring the image, since it's display property is set by default to inline.
The other is a little bit different: JS Bin
The concept is the same, but now we're using the arrow image as the background of :after instead of content.
I does generates a little bit more of code, but gives you a ton more flexibility when positioning the pseudo-element.
Use this css instead:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
display: block;
margin-left: -10px;
}
Or you can use this:
nav li.hasChild {
background-image: url(../images/layout/dropdownOver.png);
background-repeat: no-repeat;
background-position: right;
}
Then in the image you need to put a transparent border around the edge
basically i've 6 pictures with 6 text links down to them
i've done css hovering on pictures (color version -> on hover -> black & white version)
and on text links (black font -> on hover -> red font)
when i'm hovering on links - picture is getting hovered version (B&W) and that's ok, but that's only working in this direction, in opposite direction when i'm hovering on picture - text link stays the same (black font)
and that's my question, how to connect this two elements (text links and pictures)?
here's my code:
HTML
<ul class="menu">
li class="element_1">
Text of the<br>First<br>Link</li>
[rest of the elements list]
</ul>
CSS
ul.menu element_1{
width:130px;
margin-left:20px;
height:130px;
display: block; background: url(img/menu_1.jpg) top center no-repeat;;
}
ul.menu li.element_1:hover{
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;;
I don't see any CSS for changing the link color. I guess you're counting on the browser to do it?
You can fix this by adding the rule to your existing CSS:
ul.menu li.element_1:hover{
color: red;
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}
The alternative is to put your image and text inside a single element, in which case the browser will apply its automatic link highlight to the whole element.
Particularly as you're making use of background images, I would recommend restructuring your HTML to use only a single anchor. Then, when hovering that, you can apply both your image and font colour change.
Take a look at the jsFiddle for a simple example*. Here's the new CSS:
.element_1 a {
width:130px;
margin-left:20px;
height:130px;
display: block;
background: url('http://placekitten.com/200/300') top center no-repeat;
color: red;
}
.element_1 a:hover{
background-image: url('http://placekitten.com/300/300');
color: green;
}
When defining your :hover state, you only need to specify those things that are changing, rather than re-stating everything.
* Note that your HTML/CSS needed tidying up. You missed the . for your class selector and had multiple semi-colons. Make sure that your code validates and doesn't have these simple mistakes, as they will mask the true problem.
I am using Twitter Bootstrap (ver 2.3.1) to build a website and I am trying to achieve the following:
http://jsfiddle.net/MgcDU/2916/
On that website, I am using a large image as a background to a <section> which streches from the left edge of the screen to the right edge (all the way across).
I would like to place a pagination element on top of that image. With the navigation elements themselves being transparent (so the image below can shine throught) and the space left and right to the pagination element to be set in white color or page background color (it should cover the image, thats all).
I've given the pagination elements transparency:
.pagination li a, .pagination li span {
background: transparent;
}
I simply do not know how to get the white spaces around the pagination.
Can anyone help me out on this, please?!
.pull-right { position: relative; top: 2em; background: #ccc }
http://jsfiddle.net/MgcDU/2917/
Something like this?
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
I have an background image for a menu bar as follows
and it has four constant text displayed on each of the box. right most box is empty place. This image is made with all those static four vertical bars.
Now the problem is those four texts are so dynamic and are of variable lengths for different situation. Because of the variable lengths, its overlapping with those vertical bars when the texts not able to accommodate inside the box.
What is the best option to deal with this scenario using styling or another way.?
Thanks in advance.
Case 1: Using Borders
You can give the links a border-right instead of relying on the image.
.nav li a {border-right: 2px solid #000;}
Case 2: Using Ellipsis
You can give a text-ellipsis for those links and make sure they come fit inside the lines:
.nav li a {max-width: 150px; text-ellipsis: ellipsis; overflow: hidden; display: inline-block;} /* Get this thing right */