I set up my .nav class for my nav menu but when I use it it seems to cause problems and when I remove .nav and leave just ul li it fixes it but that also has a margin problem.
the problem is on the bottom I commented /Problem/
http://jsbin.com/fupewijame/1/
You must remove .nav
.nav ul li{
width: 100%;
}
and change it to
ul li{
width: 100%;
}
that kinda fixes it but you can see a margin error. I also must use .nav class as I don't want it global. Please help I can't see the bug
I'm not entirely sure what you'd like it to look like with 100% width. If you give a little more information I can help further.
However, I noticed a few things that might be confusing your CSS.
1) The height is showing as "0" due to a float being applied to the list items. When you apply float to your items they are removed from the normal flow of the document.
To solve, try first removing this:
.nav li {
float: left;
}
2) Most browsers add default padding and/or margin to ol and ul
I recommend you reset, and then try to style.
RESET:
ul {
margin: 0;
padding: 0;
}
TARGET RE-STYLE:
.nav {
margin: /* your style here */;
padding: /* your style here */;
}
instead of :
.nav ul li{
width: 100%;
}
use:
.nav li{
width: 100%;
margin-bottom: 0;
}
if you don't want to have a margin
.nav{
margin: 0;
padding: 0;
}
This
.nav ul li{
width: 100%;
}
is saying :
an element with class .nav
with a descendant of type ul
with a descendant of type li
Since .nav is a class of your ul, and not of an ancestor of your ul, you should use
ul.nav li {
width: 100%;
}
that instead means :
an element of type ul with class .nav
with a descendant of type li
EDIT: for the margin problem, you should probably use position: relative; instead of position: absolute;, that should not be used if not completely aware of how it works
Related
I was trying the examples from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 but I doing the same in my CSS and it does not work.
CSS:
nav > ul > li{
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
}
nav > ul > li:hover{
width: 20%;
}
hover works without problems, but does not the transition... this should be easy
The browser typically cannot transition an element's property without having both a start and end value. Give it an initial width.
nav > ul > li {
width: 100px;
You'll notice that if you remove the initial width from the example you gave the transition ceases to function.
You need to define the initial/start width of the element before you apply transition
Demo
nav > ul > li {
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
background: #f00;
width: 0; /* Add this */
}
nav > ul > li:hover {
width: 20%;
}
Some tips :
Don't use px if the value is 0 so unit doesn't matter.
I hope you know that you are using inline-block so white-space will occur
Don't use too specific selectors if not required, assign a class to the parent element to uniquely identify the element. So instead of writing nav > ul > li you can write .some-class-nav > li. Also you can get rid of > if you are sure that your li items won't have child li
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I am a developer and I don't know CSS properly. Here I am stuck with a simple problem. I am using Sitefinity CMS for development. I one of the page I used ul and li. CSS given by designer for li is as below
.listing li {
list-style: circle url(/images/default-source/main_library/bullet.gif?Status=Temp&sfvrsn=2);
margin-bottom: 7px;
}
I just copied his HTML into my page but I observed li bullets are not at the same position as designer gave. I used Developers Tools and inspected. My CMS adding its own style to li as below
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
When I disable padding: 0; then it appears to be at desired position. But how can I disable padding: 0; from development environment. Means any CSS that can remove padding: 0; effect?
You need to apply padding-left: 20px; to the ul.
Add this to your css:
.listing { padding-left: 20px; }.
Edit: looks like you already have styles defined for .listing, so just append that to the .listing block, I believe it's line 730 in common.css.
The more accurate the selector, the more precedence it has.
ul li { padding:5px; }
#my-Div div.another-div ul li { padding:0px; }
In this example, the more specific li element will use the 0px padding instead of the 5px. You can also add !important after an attribute if you need to ultimately override and existing style on an element.
ul li { padding:0 !important; }
I Have a List which isn't diplaying like a list, I want every <li> to be under the other, just like a standard list.
Here is an example fiddle:
http://jsfiddle.net/w5tZ3/
#settingNev li {
display: block;
margin: 0;
padding: 0;
clear:both;
}
add clear both to show as list
If you don't want the list in horizontal way, please don't use float:left;
Clearing floats is your Answer Use clear:both; Or overflow:hidden
#settingNev li {
overflow:hidden /*Add this to the make li in flow*/
display: block;
margin: 0;
padding: 0;
}
For more Detail Refer This
Remove float: left; from a and span styles
I added the following patch to your CSS.
#settingNev ul {
display:table !important;
}
#settingNev ul li {
display:table-row !important;
}
Here is the entire code mate:
http://jsfiddle.net/w5tZ3/9/
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.