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
Related
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.
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 am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I'm building a navigation menu where I use a regular ul#nav.
In my example bellow I'm trying to make the div inside the li#third hang over the bottom of the ul#nav. I know I need to use position: absolute on the div inside li#third but if I do that then it just takes up the 100% of the width assigned to it.
I tried changing the position: absolute; width: 40%; on the div but then the last li slides under it.
How can I keep the width the same as the li#third element and still have it flow over it at the bottom?
Updated example: http://jsfiddle.net/VyHJR/24/
HTML :
<ul id="nav">
<li id="first">item</li>
<li id="second">item</li>
<li id="third"><div id="search">search</div></li>
<li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>
CSS :
ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }
ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }
ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }
li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }
See: http://jsfiddle.net/thirtydot/VyHJR/34/
Now I understand what you were trying to do, it makes sense.
I removed overflow: hidden on ul#nav, which I assume was there to contain the floats, and replaced it with display: inline-block. I could also have used clearfix.
I added position: relative; height: 1px; to ul#nav li#third. Some height was required, otherwise the fourth li takes the place of the third. position: relative to contain the absolutely positioned div#search.
I added left: 0 to div#search purely to fix IE7.
li{ overflow: hidden;
position: relative;}