I want a parent class (ul tag) to hold a bunch of li tags to that overlap each other, here is my code:
<ul class="overlap">
<li>
Overlap One
</li>
<li>
Overlap Two
</li>
<li>
Overlap Three
</li>
</ul>
I don't want them to be positioned absolutely, because I have a parent element that has a background border and color, but when I position the children absolutely, the parent doesn't stretch, here is the code in its entirety.
<blockquote>
<ul class="overlap">
<li>
Overlap One
</li>
<li>
Overlap Two
</li>
<li>
Overlap Three
</li>
</ul>
</blockquote>
The blockquote tag has a background color on to it, that is why the children cannot be positioned absolutely.
Thanks in advance for the help!
Like this? http://jsfiddle.net/2N8Jz/
<blockquote class="clearfix">
<ul class="overlap">
<li>Overlap One</li>
<li>Overlap Two</li>
<li>Overlap Three</li>
</ul>
</blockquote>
blockquote {
border: 1px solid black;
padding: 10px;
}
.overlap {
padding-left: 10px;
}
.overlap li {
border: 1px solid grey;
float: left;
margin: 0 0 0 -10px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Giving the <li>'s a negative margin should do the trick.
here's an example: http://jsfiddle.net/wvEms/1/
Related
I need to design a navigation rendered dynamically by a CMS (so I have no control over HTML markup). The menu has a unknown, variable number of items, and all items have a variable, unknown width. I need to layout those menu items in one line with an equidistant spacing in between (easily done with flexbox) and with a visual separator exactly in the middle of the spacing (this is my unsolved problem).
Below is the code I've got so far. The HTML is just an example output, and I can't modify it. I'm also not allowed to use JS. The CSS is from myself and I can fully control it.
.mainnav {
width: 100%;
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
}
.mainnav__item {
flex: 0 0 auto;
background-color: yellow;
position: relative;
white-space: nowrap;
}
.mainnav__item + .mainnav__item::before {
content: '';
width: 1px;
height: 100%;
background-color: red;
position: absolute;
left: -50%;
top: 0;
}
<ul class="mainnav">
<li class="mainnav__item">
<a class="mainnav__link" href="#">Short</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Looooooooooooooong</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Mediuuum</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">whatever else</a>
</li>
</ul>
My problem is the red separator line. It should be exactly in the middle, but I don't know how to calculate the horizontal position.
Can anybody tell me a CSS only solution for the delimiter placement?
The solution should work in common, up-to-date browsers (current version of [Android|Win] Chrome, [macOs|iOs] Safari, Firefox, Edge), but also in IE11
One idea is to consider display:contents;1 within the li element and keep the pseudo element in-flow (remove position:absolute). This will make the pseudo element and the a to be the flex items instead of the li element thus space-between will do the job.
Simply pay attention to the browser support since it's a new feature.
.mainnav {
width: 100%;
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
}
.mainnav__item {
flex: 0 0 auto;
position: relative;
white-space: nowrap;
display:contents;
}
.mainnav__item a {
background:yellow;
}
.mainnav__item + .mainnav__item::before {
content: '';
width: 1px;
display:block;
background-color: red;
}
<ul class="mainnav">
<li class="mainnav__item">
<a class="mainnav__link" href="#">Short</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Looooooooooooooong</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Mediuuum</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">whatever else</a>
</li>
</ul>
1 The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes and text runs as normal. For the
purposes of box generation and layout, the element must be treated as
if it had been replaced in the element tree by its contents (including
both its source-document children and its pseudo-elements, such as
::before and ::after pseudo-elements, which are generated before/after
the element’s children as normal).ref
Another idea is to adjust flex-grow and use border instead of relying on space-between:
.mainnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
}
.mainnav__item {
flex: 0 0 auto;
position: relative;
white-space: nowrap;
flex-grow:2; /*middle elements need to grow twice that edge element*/
text-align:center;
border-left:1px solid red;
border-right:1px solid red;
}
.mainnav__item a {
background:yellow;
}
.mainnav__item:first-child {
flex-grow:1;
text-align:left;
border-left:none;
}
.mainnav__item:last-child {
flex-grow:1;
text-align:right;
border-right:none;
}
<ul class="mainnav">
<li class="mainnav__item">
<a class="mainnav__link" href="#">Short</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Looooooooooooooong</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">Mediuuum</a>
</li>
<li class="mainnav__item">
<a class="mainnav__link" href="#">whatever else</a>
</li>
</ul>
https://jsfiddle.net/ccaf8msu/1/
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="first leaf">Frontpage</li>
<li class="leaf">Library</li>
<li class="expanded active-trail active">About the website
<ul class="nav navbar-nav navbar-right">
<li class="first leaf">About the book</li>
<li class="last leaf">The authors</li>
</ul>
</li>
<li class="leaf">Categories</li>
<li class="last leaf webshop-link">Webshop</li>
</ul>
</nav>
I have this 2 levels menu, and want both levels be horizontal as shown. The issue is when second level is active, and menu item 'about the website' gets a lot of whitespace after the item.
What i need is to get rid of the whitespace, and positioned the 2.level menu items to the right
Add style to li position:relative and inner ul position:absolute
nav.navbar-default {
width: 100%;
}
ul {
list-style: none;
}
ul li {
float: left;
position: relative;
}
li ul{
position:absolute
}
li a {
display: block;
height: 55px;
margin: 0 20px;
}
There's a whitespace because your dropdown is 1) after the <li> in the DOM order but 2) still takes up space before it goes to the next <li>.
What you need to do is set your dropdowns to have position: absolute so that it doesn't move your other elements around.
Also, in 2016, it's probably best to avoid floats and use flexbox for your layouts as it is much more powerful.
Here's a working code without white space:
CSS:
nav.navbar-default {
width: 100%;
}
ul {
list-style: none;
display: flex;
}
ul li {
justify-content: flex-start;
position: relative;
}
.navbar-right {
position: absolute;
top: 100px;
left: 0;
}
li a {
display: block;
height: 55px;
margin: 0 20px;
}
And here's the Fiddle.
so I've encountered a bug that I can't figure out in IE8. I've seen some doozies, but this one might take the cake.
I tried replicating it in Codepen, but we have a lot of code for this so I'll try including the computed styles from IE8.
Using Foundation 5, I have a Top Bar that starts out looking like this:
The dropdown is positioned absolutely, so it obviously shouldn't be stretching out the parent container. It doesn't actually stretch out the parent, but the grandparent. Here's the markup:
<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar >
<section class="top-bar-section">
<ul class="title-area">
<li class="name">
Title
</li>
</ul>
</section>
<section class="links top-bar-section">
<ul class="left">
<li class="divider"></li>
<li>Create
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a>Explore</a>
<ul class="dropdown tab-left" id="explore-menu">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</li>
<li class="divider"></li>
<li>Find
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li class="has-form search">
<form id="header_search" name="search_form">
<input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" />
<button id="search_submit"></button>
</form>
</li>
<li class="login">
Login
</li>
</ul>
</section>
The computed CSS from IE8:
#global-nav{ //this is the topbar that is stretching
background: #2a2d43;
background-image: none;
color: #666;
display: block !important;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: 80px;
line-height: 60px;
margin: 0px;
overflow: visible;
padding: 0;
position: relative;
vertical-align: baseline;
width: 100%;
}
li.has-dropdown .dropdown{
background: #fff;
box-sizing: border-box;
clip: rect(1px 1px 1px 1px);
z-index: 99;
color: #666;
display: block;
font: inherit;
font-family: sans-serif;
font-size: 16px;
height: auto !important;
left: 10%;
line-height: 60px;
margin: 0;
max-height: none;
max-width: 200px;
overflow: hidden;
padding: 0px;
position: absolute !important;
right: auto;
top: 64px;
vertical-align: baseline;
visibility: hidden;
width: auto;
}
li.has-dropdown.hover .dropdown{ //the open dropdown state
clip: rect(auto auto auto auto);
visibility: visible;
}
If you need more information let me know. Thanks in advance.
For reference, I'm testing on a Parallels VM of Win7 with IE8, using IE8 document mode and IE8 Standards.
Do you have a link to view this? I am wondering if maybe you should set the ul to position relative. I think the li is falling back to the first relatively positioned item. Hopes this helps.
If any of the parent elements of the absolute element has position: relative then the absolute is computed relative to that,
try removing the position: relative from the parent containers maybe it could help
also make sure you have correct
<!DOCTYPE html>
at the beginning of your file
It is not an IE8 rendering error, but a coding error/incompatibility somewhere. This demo code shows that IE8 does take absolutely positioned drop-down elements out of the flow:
<!DOCTYPE html>
<head>
<title>Demo IE8 Drop-Down Menu</title>
<meta charset="utf-8">
<style>
#navDivParent { /* = grandparent of the dropdown menu */
background-color: darkblue;
text-align: right;
color: white;
height: 100px;
width: 550px;
}
#navDiv ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
#navDiv ul li {
float: left;
position: relative;
margin-right: 10px;
}
#navDiv ul li ul li {
clear: left;
}
#navDiv ul ul {
display: none;
}
#navDiv ul li:hover ul {
display: block;
position: absolute;
}
#navDiv a {
display: block;
padding: 0 10px 0 10px;
background: yellow;
color: blue;
text-decoration: none;
}
#navDiv #item2SubList a {
width: 175px;
}
#navDiv a:hover {
background: red;
color: white;
}
</style>
</head>
<body>
<div id="navDivParent">This is the grandparent<br> of the dropdown menu.
<div id="navDiv">
<ul>
<li>Menu item</li>
<li>Menu item w/ child
<ul id="item2SubList">
<li>Menu sub-item</li>
<li>Menu sub-item</li>
<li>Menu sub-item</li>
</ul>
</li>
<li>Menu item</li>
</ul>
</div>
</div>
</body>
</html>
.
I haven't made a live demo because JSFiddle, JSBin and the likes don't function in IE8, but I tested it in both a real IE8 and IE9 in IE8 mode.
As the in the question provided code does not contain a CSS :hover state declaration, the coding error/incompatibility might lie in the Javascript that would drive the hover state.
Your dropdown has a max-width of 200px. IE8 doesn't deal well with max-width. Essentially it's treated as a width declaration. Your forcing a width of 200px in IE8. You would need to set it to none...
max-width:none\9; /* IE8 */
I do not think this "bug" has anything to do with the position: absolute; not taking the .dropdown out of the flow. li.has-dropdown also has a .hover state applied to it. There is likely some other styling applied to li.has-dropdown that is causing #global-nav to shift. Perhaps some extra padding is being applied to li.has-dropdown. Unfortunately we don't have all the code to properly debug this.
I want to remove the dots in a ul but when I do, the height of the ul is reduced to 0px, so the contained li s have a transparent background. Can you give me an alternative ? This is the code :
<ul class="class_1" style="z-index: 1; top: -557.15px; left: 801px; display: block; position: relative; width: 200px;">
<li class="class_2">
<a>Ba</a>
</li>
<li class="class_2">
<a>Baa</a>
</li>
<li class="class_2">
<a>Baar</a>
</li>
</ul>
<style>
li {
list-style-type: none;
}
.class1
{
background-color: #FFFFFF;
border: 1px solid;
}
</style>
Thanks.
add css style for <li> elements - add display:block for them as well. that should do the trick, assuming there's no other style that is messing with this <ul>
Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.