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/
Related
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 spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
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 want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle
it is now like this:
|
|
| here
and I want to be:
|
| here
|
Just increase the line-height of the li elements in question.
#iconlist li {
line-height: 2em;
}
Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. So use something like this:
#iconlist li {
padding-left: 22px;
background: url(20x20-icon.png) left center no-repeat;
line-height: 22px;
list-style: none;
}
Forget setting the list style image and use the following css...
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
Note the vertical align style, set it to minus figures to push text upwards.
Source of answer.
Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.
The only realistic way to achieve this is with background-image:
ul li {
background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
list-style-position: outside;
padding-left: 250px;
line-height: 160px; /* vertical height of image */
}
JS Fiddle demo.
This does, however, fail badly if the text of the li wraps to a second (or third) line.
Try vertical-align: middle; (css)