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>
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>
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 have a problem regarding CSS styling for my list.
Here is the code.
CSS
NAV {
width: 940px;
height: 50px;
float: left;
font-family: Geneva,Arial;
border: 1px solid #000000;
background-color: #D0DBF0;}
NAV ul {
margin: 0px auto;
padding-top: 15px;
padding-left: 70px;
list-style-type: none;
}
NAV li {
display: inline;
}
NAV li a {
float: left;
text-align: center;
border-right: 2px solid #00DBF0;
width: 100px;
font-size: 14px;
padding: 0px 10px;
color: #0000FF;
text-decoration: none;
}
HTML
<NAV>
<UL>
<LI>Home</LI>
<LI>About Us</LI>
<LI>Contact Us</LI>
<LI>Red Widgets</LI>
<LI>Blue Widgets</LI>
<LI>Green Widgets</LI>
</UL>
</NAV>
So here i have designed everything for navigation list, but for the first list i.e home.
<LI>Home</LI> i want right border. please help me.
You can do it using the :first-child pseudo-class:
nav li:first-child
or
nav li:first-child a
depending on whether you want to target the list item (<li>) or anchor (<a>).
You should add a class, or id.
For example (Let's also assume later you want a "current selected" item):
CSS:
.first a { /* specific style for first item */ }
.current a { /* specific style for current item */}
HTML:
<NAV>
<UL>
<LI class="first">Home</LI>
<LI>About Us</LI>
<LI class="current">Contact Us</LI>
...
<!-- if the first item happens to be the curent one: -->
<LI class="first current">Home</LI>
</UL>
</NAV>
JsFiddle here
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/
basically i have div with width of 960px and it has navigation on right hand, the navigation works fine, just the last sub navigation shows content extended to 960px, so i was wondering if somehow i can push it to left side, without pushing top navigation with it, i been trying but it dont work. following is the example and css code
navigation, the last black line is the
end of 960px;
screenshot for navigation question two
(question from comment)
css code example
#topNav {
float: right;
position: relative;
}
#topNav li {
position: relative;
float: left;
line-height:1.5em;
padding: 0 .5em;
}
#topNav a span {
clear: both;
}
#topNav ul ul {
display:none;
position: absolute;
top: 20px;
right: 0;
}
#topNav ul ul li {
float:none;
white-space:nowrap;
position: relative;
margin:0;
}
#topNav li.active {
height: 50px;
background-color:#FFF;
border-top:#666 1px solid;
border-right:#666 1px solid;
border-left:#666 1px solid;
border-bottom:#FFF 1px solid;
z-index: 2;
}
#topNav ul ul.active {
display: block;
background-color:#F8F8F8;
border:#666 1px solid;
margin-top: -1px;
margin-right: -1px;
z-index: 1;
}
html 5 code
<nav id="topNav">
<ul>
<li class="active">Home</li>
<li>Everyone</li>
<li>Profile</li>
<li><a href="#" title="Account" >Account</a>
<ul>
<li>Edit Friends</li>
<li>Account Settings</li>
<li>Privacy Settings</li>
<li>Help Center</li>
<li>Logout</li>
</ul>
</li>
<li>Layouts
<ul class="active">
<li>Default Layout</li>
<li>Default Elements</li>
<li>Default Form</li>
<li>Media Detail</li>
</ul>
</li>
</ul>
</nav>
Try adding the following:
#topNav ul ul {
right: 0;
}
Rather than left: 0;. This should make it line up with the right hand side of the top menu item (Layouts in this case), rather than the left hand side.