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/
Related
This question already has answers here:
Vertically center ul in div
(5 answers)
Closed 3 years ago.
I have this unordered list and I want to display it vertically and also make it completely centered inside the parent container. I've managed to make it display vertically and be centered on the x-axis, but not on the y-axis. "vertical-alignment: middle;" doesn't seem to do what I want.
Consider this html-code:
div {
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
width: 100;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
To vertically align on y-axis add the below given css to ul:
display:flex;
justify-content:center;
align-items:center;
And remove width:100; from ul tag.
Demo
div {
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
padding: 0;
display:flex; /*add this */
justify-content:center; /*add this */
align-items:center; /*add this */
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
You can use display: flex for the div and margin: auto for the ul. And remove height and width rules from ul. here's the working Fiddle
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
div {
display: flex;
margin: auto;
width: 90%;
height: 200px;
background-color: lightblue;
}
ul {
margin: auto;
list-style: none;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
To align vertically u can use line-height.
use line-height instead of height in div tag.
div {
margin: auto;
width: 90%;
line-height: 200px; /*change this */
background-color: lightblue;
}
div {
margin: auto;
width: 90%;
line-height: 200px;
background-color: lightblue;
}
ul {
list-style: none;
height: 100%;
padding: 0;
text-align: center
}
ul li {
display: inline;
margin-right: 20px;
vertical-align: middle;
}
<div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
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 want my list items to be displayed next to each other but for some reason they always overlap. Can someone tell me how to fix this?
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Thank you in advance!
You need to remove position: fixed in 'li' element, because if you giving every 'li' element position fixed that will make your item always overlap.
May be you can try update your 'ul' and 'li' element style like this code bellow:
ul {
list-style: none;
position: fixed;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
That's because you have define position: fixed for li tags.
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
}
li {
display: inline;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
//position: fixed;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
Take out the position: fixed. This fixes an element within the browser viewport and removes it from the flow. Not what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
fixed
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left.
give position fixed to ul and you will get list item properly
#background {
height: 1000px;
background-image: url("https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg");
background-position: center center;
background-size: cover;
}
#menu {
background-color: white;
border: 2px solid grey;
}
ul {
list-style: none;
background-color: white;
position: fixed;
padding:5px;
}
li {
display: inline-block;
padding: 5px 10px 5px 10px;
border: 2px solid grey;
overflow: none;
background-color: white;
}
<div id="background">
<div id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
I am trying to show border color on hover over the list of items. When i move mouse over first row items, the second row items move towards right. Please check jsFiddle
<ul class="tiles">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
css
ul.tiles { width: 400px; }
ul.tiles li {
float: left;
list-style-type: none;
width: 100px;
height: 100px;
margin: 10px;
background: white;
}
ul.tiles li:hover {
border: 1px solid black;
}
}
Add a transparent border to your li:
li {
border: 1px solid transparent;
}
ul.tiles { width: 400px; }
ul.tiles li {
float: left;
list-style-type: none;
width: 100px;
height: 100px;
margin: 10px;
background: white;
}
ul.tiles li:hover {
border: 1px solid black;
}
ul.tiles li {
border: 1px solid transparent;
}
<ul class="tiles">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
you can user box-sizing: border-box; on the ul.tiles li
http://jsfiddle.net/gm8zvfsk/
The box-sizing property is used to tell the browser what the sizing
properties (width and height) should include.
Should they include the border-box or just the content-box which is
the default value of the width and height properties.
For example, if you want two bordered boxes side by side, it can be
achieved through setting box-sizing to "border-box". This forces the
browser to render the box with the specified width and height, and
place the border and padding inside the box.
JS Fiddle.
As Praveen said, using outline fixes the issue.
ul.tiles li:hover {
outline: 1px solid black;
}
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/