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
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.
Good afternoon,
I am trying to create a menu bar with a sub-nav under some parents, however the childs are not aligning.
I have change the child bicolour to red to highlight the concern.
There is a chance that by entering the sub-nav text may cure the concern.
I have listed below the CSS and HTML.
Kind regards
Gary.
Danceblast
Your problem is this:
#dropnav ul li {
margin-left: 20px;
}
It's being applied to the subnav's child li's aswell, you can target the subnav directly and set the margin to 0
#subnav li {
margin-left:0px !important;
}
OR
#dropnav #subnav li {
margin-left:0px;
}
if you dont want to use !important.
#dropnav ul li {
margin-left: 20px;
}
You want to remove the margin as well as you want to check for your text-alignment.
At the moment your elements use
text-align: center;
on all its parents and childs. You probably want that to be:
text-align: left;
Hope that helps.
I have a list with some elements. Simple list. I've coded a hover property on <li> tag to change his background colour to white. Simple behaviour.
My problem is: the height doesn't filled totally.
I've tried to reset margin and padding li{padding:0; margin:0;} but didn't work too.
This is the code: http://jsfiddle.net/ctvalex/jh3t5t1b/2/
Any help is welcomed
Just Change the display styling for
#bottom-menu ul li
to
display: inline-block;
so it'll be like that
#bottom-menu ul li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
line-height: 50px;
}
Check the Edited Example http://jsfiddle.net/jh3t5t1b/6/
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.
I am trying to create a grid-style navigation menu, which I have done. Here is a jsFiddle of what I have so far. If you hover over the links you can see there is a 1 or 2px gap between the left and right hand columns, and I can't seem to get rid of it.
At the moment I have:
#nav {
float:left;
width:230px;
display:inline;
text-align:right;
}
#footer li {
display:inline-block;
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
}
If I set the li {width:50%} the list doesn't fit into 2 columns, but when it is set to 49% I get the gap between list elements. There must be some padding or margin coming in somewhere but I can't see it. Any help would be great.
My favorite method of fixing this is to use a font-size: 0 in the parent and then restore the font size in the child. What happens is that a physical space in your html code (for example, pressing enter after an element) renders a physical space in the code, aka a space in between lis. The font-size: 0 renders that space as no physical width, thus allowing for two 50% lis.
#nav {
font-size: 0;
}
#nav ul li {
font-size: 15px;
}
Check it out: http://jsfiddle.net/3XqZ3/9/
Another option would be to use floats to get the elements right up next to each other. This also gets rid of the space in between.
#nav ul li {
float: left;
}
A third option would be to make sure that there are no breaks in between elements in the html. Like:
<li>This is an li</li><li>This is another li</li>
Or:
<li>This is an li</li><!--
--><li>This is another li</li>
That is white space caused by your inline-blocks. Because they are 'inline', your white space is taken into account.
There are a number of ways to overcome this. One is commenting out the whitespace:
<li class="green">Home</li><!--
--><li class="green">FAQs</li>
JSFiddle
Or you could use floating:
#footer li {
float:left;
}
JSFiddle
You should use float instead of display, like this:
#footer li {
text-align:left;
line-height:32px;
text-indent:10px;
width:49%;
float: left;
}
Demo: http://jsfiddle.net/3XqZ3/11/