I have next navigation block in html template
<nav class="navigation">
<ul class="nav">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</nav>
with css
.navigation {
padding: 0 0 19px;
}
.nav {
font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
text-align: justify;
text-align-last: justify;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav:after {
content: "";
display: inline-block;
width: 100%;
overflow: hidden;
}
.nav li {
display: inline-block;
}
.nav a {
color: #020202;
}
Items have to be aligned justify in navigation block and occupy all entire width. And they are, if I use the code above.
But if i remove new lines after each 'li' all items move to the right without spaces between them
<nav class="navigation">
<ul class="nav">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li>
</ul>
</nav>
Is it normal behaviour or my css is wrong?
Behaviour is the same for all browsers.
Jsfiddle examples: correct - http://jsfiddle.net/x9zfP/1 wrong - http://jsfiddle.net/AMK8z/1/
Tnx!
The behaviour is expected, because of the display: inline-block. This means whitespace between the elements will be considered.
See also CSS-Tricks - Fighting the Space Between Inline Block Elements
your css is wrong, "." is for class and "#" for id.
your ul has an id, so first replace all occurencies of ".nav" with "#nav"
here the correct css:
.navigation {
padding: 0 0 19px;
}
#nav {
font: 20px/22px "futura_demi_c", Arial, Helvetica, sans-serif;
text-align: justify;
text-align-last: justify;
list-style-type: none;
padding: 0;
margin: 0;
width:100%;
display:table
}
/* useless
#nav:after {
content: "";
display: inline-block;
width: 100%;
overflow: hidden;
}
*/
#nav li {
display: table-cell;
}
#nav a {
color: #020202;
}
basically your parent element need to have a width, and child need the property "display:table-cell".
The behavior is normal because your li has no padding or margin, so there's nothing there to keep the split apart.
This fixes your issue:
.nav li {
display: inline-block;
padding: 0 30px;
}
http://jsfiddle.net/AMK8z/1/
Related
I'm trying to create a navigation bar, a logo at the left and the links centered in the remaining space. I followed the instructions in this thread:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
and used margin:auto; for the ul in order to get it centered. This worked fine so far but when I add margin or padding anywhere inside the ul the list of links wraps. I tried box-sizing:border-box; for the ul but no success. How can I fix this?
Fiddle: http://jsfiddle.net/30sy5dmy/5/
nav img {
height: 60px;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.links {
margin: auto;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 2%;
}
<nav>
<img src="https://teststein.000webhostapp.com/Logo.png">
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</nav>
The list items are wrapping because you're using percentage margins.
When you give the items horizontal margins of 2%, the browser calculates the length of that 2% after the size of the container has been determined. In other words, the percentages are not factored into the container width.
Therefore, when the 2% length is added to the items, the total length exceeds that of the container and wrapping occurs.
Solution #1: white-space: nowrap
One way to fix the problem is by suppressing line breaks in the container using the white-space property. This forces all items to stay on the same line, overflowing the container if necessary.
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
white-space: nowrap; /* NEW */
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 2%;
}
<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</nav>
Solution #2: Don't use percentage values
If you use any value other than percentages, the list items won't wrap because, unlike percentage values, they can expand the container for accommodation.
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 1em; /* adjustment */
}
<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</nav>
Solution #3: Use flexbox
An initial setting of a flex container is flex-direction: row and flex-wrap: nowrap. This means that flex items will line up horizontally and cannot wrap.
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
display: flex; /* new */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 1em; /* adjustment; avoid percentage margins on flex items;
see this post:
https://stackoverflow.com/q/36783190/3597276 */
}
<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</nav>
Solution #4: Clean and Efficient Method
This solution attempts to use the least possible code to achieve the goal. Hope it helps.
nav { display: flex; align-items: center; }
nav img { height: 60px; }
a:first-of-type { margin-left: auto; }
a:last-of-type { margin-right: auto; }
a + a { margin-left: 1em; }
<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
Link 1
Link 2
Link 2
Link 2
</nav>
Simply add display: flex to the links, and then, as using percent for margins on flex items doesn't render the same cross browser, use i.e. viewport units instead.
nav img {
height: 60px;
}
nav {
display: flex;
align-items: center;
}
.links {
display: flex;
margin: auto;
}
nav ul li {
list-style: none;
margin: 0 2vw;
}
<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 2</li>
<li>Link 2</li>
</ul>
</nav>
I'm a beginner in CSS but I'm currently trying to create a material-design header with "line" under each tab like on this Google site : Our Products | Google
If possible I'd also like the animation when changing tab.
For now my header html is :
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
</nav>
</header>
And my CSS :
header {
display: table;
background:#FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
width:100vw;
clear: both;
display: table;
overflow: hidden;
white-space: nowrap;
}
nav {
display: inline-block;
margin-left: 5vw;
vertical-align: middle;
}
nav ul {
display: inline-block;
margin 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 3vw;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: inherit;
}
nav a:hover,:active,:focus {
color: #b82525;
}
How do I position the shape to be under the .current-nav tab ?
If you inspect the example you have linked to, you will see that one way they do this is by adding a border-bottom to the selected element. You can do this like so
.current-nav {
border-bottom:1px solid #4285f4;
}
They have another technique which is to add an element below, but i'll leave that for you to investigate/reverse engineer.
just use nav ul li a.current-nav{ border-bottom: 1px solid red; } and you are done.
Try this:
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div class="line-selected right" style="display: block; left: 322px; right: 0.078px;"></div>
</nav>
</header>
The left and right values depends on the sizes of your Logo and of your <li>. You have to change the style of the "line-selected right"class for each event.
I have an unordered list with a lot of list items. Some of the list items are links, some are not. I want to add padding to the list items so the appearance is consistent regardless of whether it is a link or not, i.e. I do not want to add padding to the anchor, but to the list and for the anchor to wrap around the link AND padding.
Despite using display:block on hover the background color is only around the text inside the link. It ignores the padding. Is there a way to get the link to include the padding (without putting padding on the link)?
ul li {
float: left;
line-height: 5em;
padding: 0 2em;
}
a:link {
display: block;
}
a:visited {
display: block;
}
a:hover {
display: block;
background-color: rgb(245, 245, 245);
}
a:active {
display: block;
background-color: rgb(245, 245, 245);
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
</li>
</ul>
You can use the hover the li instead of the a to correct the background-color applied on hover by using:
li:hover a {
display: block;
}
li:hover {
background-color: rgb(245, 245, 245);
}
instead of:
a:hover {
display:block;
background-color:rgb(245,245,245);
}
See demo below:
ul li {
float: left;
line-height: 5em;
padding: 0 2em;
}
a:link {
display: block;
}
a:visited {
display: block;
}
li:hover a {
display: block;
}
li:hover {
background-color: rgb(245, 245, 245);
}
a:active {
display: block;
background-color: rgb(245, 245, 245);
}
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
</li>
</ul>
Here you go, my comments should explain everything but feel free to ask.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
ul{
list-style-type: none; /* Feel free to remove this, just easier without bullets */
}
ul li {
float: left;
line-height: 5em; /* Should be the same as height */
padding: 0 2em;
position: relative; /* Make sure a & a:before can stay contained */
height: 5em; /* Should be same as line-height */
white-space: nowrap; /* Ensure that your items don't wrap and mess up width */
z-index: -1; /* So that a:before is able to trigger with :hover */
}
a{
position: relative; /* Make sure a:before can stay contained */
display: block; /* Ensures that a can expand to full size of container */
}
a:before{
content: ""; /* Necessary for :before element to be created */
position: absolute; /* Vital - allows positioning */
top: 0;
right: -2em; /* Minus same padding as li has */
bottom: 0;
left: -2em; /* Minus same padding as li has */
z-index: -1; /* Makes sure :before doesn't go above anchor text */
}
a:hover:before,
a:active:before {
background-color:rgb(245,245,245);
}
Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
I am trying to build CSS nav bar but i am in a bit trouble. In my code, background box is collapsing with content inside it .My question is why it is collapsing and can it be solved by not giving height to the box.Here is my code.
HTML
<div class="item">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
body {
color: #648;
}
.item ul {
list-style: none;
padding: 0;
margin: 0;
}
* {
}
.item {
padding: 20px;
width: 70%;
/* height: 65px; */
background-color: blanchedalmond;
margin: 50px auto;
border-radius: 10px;
}
.item li {
float: left;
width: 45px;
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: aqua;
}
Use display:inline or display:inline-block instead of float:left.
http://jsfiddle.net/x2ubrrh3/
Update
When display:flex is used you have to stop the elements from floating afer your list is finished (clear:both)
See here: http://jsfiddle.net/x2ubrrh3/1/