How can I produce the effect of a border on the inside of one side of my element?
My goal is to create a marker that indicates the currently selected item from a vertical list. Such as in the mockup below, where the 3rd item is selected:
Because this is a updatable state, which I'm setting by giving the li tag a class="active", I have been going down the path of the ::after pseudo-element.
The closest I have gotten is the following :
ul li::after {
background-color: #fbc123;
content: "";
float: right;
height: 40px;
position: absolute;
width: 5px; }
This is still putting the highlight on the outside of the 40px-by-40px box. How can I shift this, 5 pixels to the right?
I have create a jsFiddle, but it is behaving differently then what I see in my real code. In the jsFiddle the yellow lines remain on the left, instead of the aligning to the right.
http://jsfiddle.net/EvilClosetMonkey/m8A3e/
How can I create the effect of the 5px border on the right side only?
I think you can just try using border-right, set the relative position for the inner direct child and send them to the back using z-index like this:
ul > li.active {
border-right:5px solid yellow;
box-sizing:border-box;
}
ul > li.active > * {
position:relative;
z-index:-3;
}
You don't need to use pseudo-element at all. Here is the working demo.
Look closely to the above demo, the right border seems to be zigzaged a little at the end (because of the top and left borders). You can try using inset box-shadow instead for better result:
ul > li.active {
box-shadow:-5px 0 yellow inset;
}
Updated demo
NOTE: if you have some inline element (like the a element) as the most direct child (and fill the parent space), you should set style display:block for that element, otherwise it will seem to be hidden after being applied the style position:relative.
Is this what you're after?
http://jsfiddle.net/m8A3e/1/
First of all I removed the float because floats and position: absolute; can't be used together. Then I gave the li relative positioning and gave the marker the proper top/right positions.
Related
Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.
What i've tried so far : JsFiddle Demo
Simply give your <li> elements a margin. For example:
ul li {
margin: 0 0 10px;
}
To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:
li:last-of-type {
margin-bottom: 0;
}
Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:
ul li {
width: 145px;
}
Here your adjusted fiddle.
For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.
I want to add image to every li, but I would like to display it only on mouse over.
However, I want to avoid 'moving' effect, which is consequence of new element (image) added to DOM. I tried to fix it with visibility:hidden, since that takes space, but without luck.
Here's the simple example, as you can see, on hovering these li's, they are moving on the right.
What is the simplest way to achieve this?
http://jsfiddle.net/UQAjh/
You'd want either position the :before pseudo element absolutely to prevent it from entering the layout flow when shown, or create the pseudo element independently from the :hover state at an opacity of 0 and set opacity to 1 when hovered.
Keeping :before out of layout flow
ul > li:hover:before {
/* all the other styles */
position: absolute;
left: 25px;
}
Fiddle: http://jsfiddle.net/marionebl/UQAjh/1/
Creating :before regardless of :hover state
ul > li:before {
/* all the other styles */
display: inline-block;
float: left;
opacity: 0;
}
ul > li:hover:before {
opacity: 1;
}
Fiddle: http://jsfiddle.net/marionebl/Nda6Z/1/
I am experiencing a problem when using % values instead of px.
For example:
http://jsfiddle.net/FXZMS/1/ works the way I want it to. Hovering over "About" gives a drop-down list. However, I would prefer to use % values so that spacing between the list items is dependent on screen size.
I tried doing it with a 10% value and this is what happens:
http://jsfiddle.net/FXZMS/2/
In the above examples all I'm changing is in the:
#navcontainer ul a {
border: 1px solid #000;
display: inline-block;
padding-right: 10%;
padding-left: 10%;
}
in the first example the padding values are 56px, and in the second - 10%
Using % values, when hovering over "About" the drop-down list looks... weird. Can someone tell me why exactly this happens?
Why don't you set your menu elements to width:25% and do the same fo the child elements. Add text-align: center and it should all look nice and uniform.
Try This:
Added CSS
#navlist > li > a {
padding-right: 4.5%;
padding-left: 4.5%;
}
#navlist ul {
width:100%;
}
DEMO
I didn't change the CSS you had but just added this below your CSS, you might want to replace this added part above in your CSS
I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.
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;
}