I am trying to give the menu elements a hover, but they are also having a padding: 10px; and as the result of that the :hover: background-color: will start from the 10px padding.
Any idea how to solve the problem? Here's a jsfiddle demo for that: http://jsfiddle.net/eufqg7d9/
This is caused by the default padding of the UL. You can either explicitly set this to padding: 0 or use a reset like http://meyerweb.com/eric/tools/css/reset/.
Here is your fiddle with a this reset applied: http://jsfiddle.net/h3erxugg/
You can also skip adding extra classes (like "list-item") and simply target the 'li' element itself within the #menu "namespace". Here's an example of what I mean:
<div id="menu">
<ul>
<li>Menü #1</li>
<li>Menü #2</li>
<li>Menü #3</li>
</ul>
</div>
And then the corresponding CSS would look something like this:
#menu ul {
list-style: none;
}
#menu li {
padding: 10px;
}
#menu li:hover {
opacity: 0.7;
background-color: red;
}
Updated fiddle: http://jsfiddle.net/eufqg7d9/3/
li.menu-item:hover {
margin-left: 10px;
padding-left: 0px;
opacity: 0.7;
background-color: red;
}
Since it was unclear what you were asking I have made you another fiddle: http://jsfiddle.net/eufqg7d9/6/. This basically creates the effect of your picture.
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
}
div#main {
width: 900px;
height: auto;
border: 1px solid #ccc;
margin: 0 auto;
}
div#menu {
width: 300px;
height: auto;
float: left;
background-color: yellow;
}
ul.menu-list {
list-style: none;
}
li span {
margin-left: 40px;
}
li.menu-item {
width: auto;
padding: 10px;
}
li.menu-item:hover {
opacity: 0.7;
background-color: red;
}
Try to update this portion of css.
ul.menu-list {
list-style: none;
padding-left: 0;
}
I have added padding-left: 0; to remove the padding on the left side.
Related
I have a <span> element followed by a horizontal <ul> element. Why is there a left and bottom margin on the <ul>? How can I remove this space?
jsfiddle
HTML
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>
CSS
body {
background-color: #000;
margin: 0;
padding: 0;
}
span {
background-color: #f00;
}
ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
}
Check this out!
Added inline-block to the span and vertical-align too.
The span has a visual margin / space because it is not inline-block and the ul next to it but is inline-block
Is this what you expected? Please let me know your feedback on this. Thanks!
body {
background-color: #000;
margin: 0;
padding: 0;
}
span {
background-color: #f00;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
}
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>
As the other users already stated, display: inline-block; should do the trick, but your fiddle seems like you already got that right. To find out where unexpected margins, borders or other css stuff come from, I rely on firebug (Firefox Plugin for web developers).
while you are using display inline-block give font-size: 0; to the parent element.
Try this code...
body {
background-color: #000;
margin: 0;
padding: 0;
font-size: 0;
}
span {
background-color: #f00;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
font-size: 14px;
}
I am practicing in making a css dropdown. However, in the following code, on hovering the "Hello" li , I want the dropdown li "Hello1" to drop just below it. It's happening. However unfortunately the other li's "Cool" and "World" also comes down. I wanna know both the reason and the solution. However I don't want to add float to any of the elements as it has created some issues previously.
html body {
height: 100%;
width: 100%;
}
.roundborder {
border-radius:5px
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 75%;
/* [disabled]background-color: rgba(153,153,153,1); */
height: auto;
}
ul {
text-align: center;
border: thin solid rgba(0,0,0,1);
width: auto;
margin-top: 0;
margin-right: 10%;
margin-bottom: 0;
margin-left: 10%;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-color: rgba(255,0,0,1);
height: 30px;
}
li {
display: inline-block;
border: 1px solid black;
/* [disabled]padding: 5px; */
height: 30px;
width: auto;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;
}
ul > li > ul {
width: 100px;
display: none;
padding-left: 0px;
margin-top: 10px;
margin-left: 0px;
}
ul > li > ul > li {
display:block;
list-style-type:none;
}
ul li:hover > ul {
display: block;
}
<div class="container">
<ul class="roundborder">
<li>Hello
<ul>
<li> Hello1 </li>
</ul>
</li>
<li>Cool</li>
<li>World</li>
</ul>
</div>
Because your not specifically setting the 'position' attribute for your dropdown it will use the default positioning(position:relative) which will affect the positioning of the elements around it try position:absolute
i.e
ul > li{
position:relative;
...
}
ul > li > ul{
position:absolute;
left:0;
top: 30px;/*or height of header*/
...
}
This article explains the positioning attribute in depth https://developer.mozilla.org/en/docs/Web/CSS/position
I have the following simple piece of code:
<li>
<div class="stripe"></div>
linktext
</li>
my goal is to have the div on the right side of the li, filling its height while having a fixed width, say 10px. I tried this css, but it is not working:
li {
display: block;
}
.stripe {
float: right;
width: 10px;
height: 100%;
}
Something that does work would be:
li {
position: relative;
}
.stripe {
position: absolute;
height: 100%;
width: 10px;
right: 0;
}
However, I don't want to use css position attributes here. I thought it should be possibly by using a special type of display-property somewhere, but I haven't figured out where. I also read that height: 100%;needs a parent height to work. Indeed it does, setting the li-height to a px-value makes the div.stripe have that height, but my li should be variable in height. Is there any simple way to make this work?
Here's a solution that uses the latest flexbox specification and requires a modern browser: http://jsfiddle.net/a956kdfL/.
HTML:
<ul>
<li>
<div></div>
linktext
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: flex;
flex-flow: row wrap;
}
ul > li > div {
flex: 0 0 10px;
outline: 1px solid red;
}
Here's a simpler solution that uses tables: http://jsfiddle.net/g7pxLcge/ and should work in older browsers.
CSS:
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
padding: 10px;
}
ul > li {
display: table;
}
ul > li > div {
display: table-cell;
width: 10px;
outline: 1px solid red;
}
ul > li > a {
display: table-cell;
}
Not sure why there is a space to the right of each li, as you can see here when you mouse over it. Obviously don't want it there and can't figure out how to get rid of it. Any help would be greatly appreciated!
Here is the code:
HTML:
<header>
<div class="nav-container">
<nav class="nav-items" role="navigation">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
position: fixed;
top:0;
background-color:#2C5463;
height:2.3em;
width: 100%;
border-bottom-color: black;
border-bottom-style: solid;
}
header .nav-container {
margin: 0 30px;
height: 100%;
display: block;
padding: 0;
}
.nav-items {
float: left;
margin: 0;
height: 100%;
}
.nav-items ul {
display: inline-block;
margin: 0;
height: 100%;
}
.nav-items ul li {
display: inherit;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
.nav-items ul li a {
display: inherit;
text-decoration: none;
color: #ffffff;
margin: 0 auto;
padding-top: 8px;
white-space: nowrap;
height: 100%; /* Width and height of top-level nav items */
width: 90px;
text-align:center;
vertical-align: middle;
}
.nav-items ul li:hover {
background: #617F8A
}
http://jsfiddle.net/eF83x/
Inline elements are sensitive to white space. Remove the white space and the problem goes away.
Ex:
<ul>
<li>list1</li><li>list2</li><li>list3</li>
</ul>
jsFiddle example
You can remove the spaces between the list items literally, occupy the space with HTML comments (<!-- -->), or float them left.
Just needs to changes on css class here for your solution,
.nav-items ul
{
display: **inline-table**;
margin: 0;
height: 100%;
}
Demostration
What you could also do is make the lis float left and display them as block. This will fix it without messing with the html code.
.nav-items ul li {
float: left;
display: block;
border-left: 1px solid #c8c8c8;
height: 100%;
margin: 0;
}
jsFiddle example
I would like to use the full width of the UL-element for the floated LI-elements. Is this somehow possible with using %-values for the padding of the LI-elements? I can't use a fixed width for the LIs, since the content is not the same lenght.
This is my HTML code:
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>...</li>
</ul>
And here comes my CSS:
ul {
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
background-color: blue;
}
li {
float: left;
padding-left: 3%;
padding-right: 3%;
background-color: #dd0000;
border-left: 1px solid #ffffff;
}
li:hover {
background-color: #ff0000;
}
Find the example at JsFiddle: http://jsfiddle.net/6Uy4y/
So the red LI-elements should end, where the blue UL ends, even when changing the width of the UL.
Thanks for pointing me into the right direction!
It looks like this is the start of tabular data. I'd use a <table>. If I'm mistaking, you can fake a table with CSS.
ul {
display: table;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
li {
display: table-cell;
padding: 0 3%;
}
Here's a quick little demo: http://jsbin.com/iwacum/1/edit