I have a menu (ul tags) whose elements are inline. Right now, the elements wrap when they reach the width of the container:
This is what I would like is to force the menu to be on two lines:
If extra entries are added, I would like the menu to equally divide on the two lines:
I'm ideally looking for a way to do it with css only. I tried using flexbox and writing-direction without succes. I'm open to a javascript solution but would like to have soft enought solution to allow for different designs in other responsive modes.
Edit:
Here is my HTML:
<ul class="main-menu">
<li class="main-menu__entry">Le projet</li>
<li class="main-menu__entry">Les numéros</li>
<li class="main-menu__entry">Obtenir le magazine</li>
<li class="main-menu__entry">Devenir coopérateur</li>
<li class="main-menu__entry">Nous contacter</li>
<li class="main-menu__entry">Proposer un sujet</li>
</ul>
and CSS (I simplified wit honly the relevant code)
.main-menu__entry {
display: inline-block;
padding: 4px 8px;
border: 2px solid gold;
margin: 0 2px 2px 0;
color: black;
}
Thanks.
Is this what you are looking for? This is definitely a scalable solution, but should be useful for now.
.main-menu__entry {
display: inline-block;
padding: 4px 8px;
border: 2px solid gold;
margin: 0 2px 2px 0;
color: black;
width: 150px;
}
<ul class="main-menu">
<li class="main-menu__entry">Le projet</li>
<li class="main-menu__entry">Les numéros</li>
<li class="main-menu__entry">Obtenir le magazine</li>
<li class="main-menu__entry">Devenir coopérateur</li>
<li class="main-menu__entry">Nous contacter</li>
<li class="main-menu__entry">Proposer un sujet</li>
</ul>
Related
I am trying to fix the behaviour of a nested navbar I have on my page. The main idea is that I have two levels of <ul>-tags, where on both levels the <li>-tags can contain links (i.e. <a>), so both levels have the ability to redirect the page. Upon hovering the top level <li>, I have the lower level display, otherwise it is hidden. This looks like this:
* {
font-family: Roboto;
}
.menu-container {
height: 29px;
background-color: #dcb400;
}
.menu {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.menu-item {
position: relative;
}
.menu-item:hover {}
.menu-item-div {
display: inline-block;
margin-left: 0;
line-height: 1.5rem;
padding: 3.5px 9.5px;
color: black;
font-weight: 700;
font-size: 13px;
cursor: pointer;
height: 22px;
}
.menu-item:hover .menu-item-div {
background-color: black;
color: white;
}
.submenu {
position: absolute;
top: 29px;
width: auto;
background-color: white;
color: black;
z-index: 100;
padding: 0px;
display: none;
-webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}
.menu-item:hover .submenu {
display: block;
}
.submenu-item {
display: block;
cursor: pointer;
}
.submenu-item:hover {
background-color: #ccc;
}
<body>
<div class='menu-container'>
<ul class='menu'>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 1</div>
</a>
<ul class='submenu'>
<li class='submenu-item'>Submenu item 1</li>
<li class='submenu-item'>Submenu item 2</li>
<li class='submenu-item'>Submenu item 3</li>
</ul>
</li>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 2</div>
</a>
<ul class='submenu'>
<li class='submenu-item'>Submenu item 4</li>
</ul>
</li>
<li class='menu-item'>
<a href='#'>
<div class='menu-item-div'>Menu item 3</div>
</a>
</li>
</ul>
</div>
</body>
Now, this works like a charm on desktop, as my submenus show up as soon as I hover a top level menu item. However, on mobile this doesn't work anymore, as the only (reasonable) way to hover a top level menu item is by clicking it, which results in the page redirecting to the top level <a> target. Is there a way to expand this code to also make it work on mobile, i.e. when tapping the top level menu item on mobile, the submenu should show up instead of the page redirecting?
The solutions I have found so far online are either concerning libraries like bootstrap or are way too clumsy. I am wondering if there is a way to do this with only HTML and CSS, or do we also have to involve some js?
Since you are not using your top level menu items for redirecting, you could abandon your references altogether and use divs instead:
<ul>
<li>
<div>Menu item 1</div>
<ul> <!-- display on hover of top level li -->
<li><a>Submenu item 1</a></li>
...
</ul>
</li>
...
</ul>
Or for your given example: https://jsfiddle.net/0fmbojqk/3/
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
I'm having some issues bootstrap breadcrumb displayed in tabs. I want to both items side-by-side (similar to a tab in chrome). However, unable to do this properly. Any suggestions?
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<i class="fa fa-close"></i>
</li>
</ul>
</ol>
EDIT:
To be more precise and clear, I want both items in the same tab. In my application, I will have tabs, each containing a topic and a close icon. I'm trying to create a UI similar to that of a internet browser tabs.
If this is not possible with this format, any suggestions in designing this UI would be greatly appreciated.
It took much longer than I expected, but it works. Check out this JSFiddle
How it works:
Bootstrap turns each child of <li class="active"> into tabs. The reason you were getting 2 tabs is because each <a> was turning into a tab, even though they were in the same <li>.
The CSS I wrote overwrites this to turn the <li class="active"> into the tab, rather than the children (by turning into a tab, I mean giving it borders, padding, etc.)
.nav-tabs li {
/* Give Bootstrap CSS normally applied to children
to the tab container */
color: #555 !important;
cursor: default !important;
background-color: #FFF !important;
border: 1px solid #DDD !important;
border-bottom-color: transparent !important;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border-radius: 4px 4px 0 0 !important;
position: relative !important;
display: block !important;
padding: 10px 15px !important;
text-decoration: none !important;
list-style: none !important;
}
.nav-tabs li * {
/* Overwrite Bootstrap CSS */
border: none !important;
margin-right: 0 !important;
padding: 0 !important;
/* To display on the same line */
display: inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ol class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">
Zika Virus
<a class="custom-inline" href="#"><i class="fa fa-close"> X</i></a>
</li>
</ul>
</ol>
I have two UL's:
How can I add text to appear in the top green area.
The text needs to not be in an LI.
Every attempt I make has the text appear outside the boxes. I've had the two UL's wrapped in both a div and a span (currently a span as below) with text before the UL but but neither helped and the text was still outside.
jsfiddle: http://jsfiddle.net/gThjy/
<html>
<head>
<style>
#list_to_process, #categories {
color: blue; background-color: green; border: solid;
border-width: 4px; padding-top:40px
}
.panel { color: red; background-color: yellow;
border: solid; border-width: 4px }
ul { padding: 10px; margin: 50px; float:left; list-style:none; }
li { color: yellow; padding: 25px 80px; cursor: move; }
li:nth-child(even) { background-color: #000 }
li:nth-child(odd) { background-color: #666 }
</style>
</head>
<body>
<span class="a_list">
header1
<ul id="list_to_process">
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
<li class="to_process" id="left5">5</li>
</ul>
</span>
<span class="a_list">
<ul id="categories">
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
</span>
</body>
</html>
With your current markup this addition to CSS will work and be semantic:
#list_to_process:before, #categories:before{
content:"Read this: ";
}
Maybe this could help:
<ul id="list_to_process">
Header 1
<li class="to_process" id="left1">1</li>
<li class="to_process" id="left2">2</li>
<li class="to_process" id="left3">3</li>
<li class="to_process" id="left4">4</li>
<li class="to_process" id="left5">5</li>
</ul>
<ul id="categories">
Header 2
<li id="righta">a</li>
<li id="rightb">b</li>
<li id="rightc">c</li>
<li id="rightd">d</li>
<li id="righte">e</li>
</ul>
Well its only valid in HTML to have an <li> as a child of a <ul> or <ol> so wrapping any text in a different element isn't possible. You can simply just add text directly after the starting tag for the <ul> and it'll show up in the green area, though I'm not sure thats exactly what you're after. I'm also unsure of whether its valid to have a text-node directly after a <ul> tag, though I will try to find a source.
http://jsfiddle.net/PerfectDark/gThjy/5/
Update: Adding text before the starting <ul> tag is also invalid according to the validator:
Line 38, Column 10: Text not allowed in element ul in this context.
I think your best option is to absolutely position an element to have it appear its inside the box.
I have the following HTML code:
<ul class="blogEntry">
<li class="title section">
<span><asp:Literal ID="litTitle" runat="server" /></span>
<span class="date"><asp:Literal ID="litDate" runat="server" Text="10/1/1000" /></span>
</li>
<li class="body section"><asp:Literal ID="litBody" runat="server" /></li>
<li class="tags section">
<ul class="tags">
<li class="tag">Tag 1</li>
<li class="tag">Tag 2</li>
<li class="tag">Tag 3</li>
</ul>
</li>
</ul>
And the following CSS code:
ul.blogEntry
{
border: 1px solid black;
border-bottom: 0px;
padding: 0px;
}
ul.blogEntry li.section, ul.blogEntry li.lastsection
{
list-style: none;
}
ul.blogEntry li.title
{
background-color: #67A7FF;
font-size: 14px;
font-weight: bold;
}
ul.blogEntry li.title span
{
display: inline;
}
ul.blogEntry li.title.section span.date
{
float: right;
}
ul.blogEntry li.section
{
padding: 4px;
border-bottom: 1px solid black;
}
As is, the date will drop to a new line and float to the right. If I change the ul.blogEntry li.title span CSS and add float: left; The outer LI element's height shrinks and the bottom border cuts right through the spans' text. Advice?
Please don't add any elements for clearing. Elements which only enable specific styling significantly breaks semantics and separation of concerns.
The simple answer is to add overflow:auto; to the container element (i.e. li.title) but there are other ways:
http://www.positioniseverything.net/easyclearing.html
http://www.innovatingtomorrow.net/2008/03/24/how-clear-floats-css
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Clearing blocks are EVIL.
try:
.section {min-height: 10px;}
that should clear your floats for all your section classes in ie7 and 8. you may try floating the element above your date left to see if that works.
also, when floating something, you should usually set the width