This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
The problem is, if I put any margin on any element which is inside the product div or the slider div the whole list-items are moving down.
.product-slider {
margin-top: 16px;
text-align: center;
}
.slide-item {
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider {
height: 200px;
border: 1px solid black;
display: inline-block;
}
.product {
width: 25%;
}
.slider {
width: 5%;
}
<ul class="product-slider">
<li class="slide-item"><div class="slider"><i class="fas fa-angle-left"></i></div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="slider"><i class="fas fa-angle-right"></i></div></li>
</ul>
Also try this:
.product-slider{
margin-top: 16px;
text-align: center;
}
.slide-item{
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider{
height: 200px;
border: 1px solid black;
display: inline-block;
vertical-align:text-top;
}
.product{
width: 25%;
}
.slider{
width: 5%;
}
<ul class="product-slider">
<li class="slide-item">
<div class="slider"><i class="fas fa-angle-left"></i></div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="slider"><i class="fas fa-angle-right"></i></div>
</li>
</ul>
Try this:
.product-slider{
margin-top: 16px;
text-align: center;
}
.slide-item{
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider{
height: 200px;
border: 1px solid black;
display: inline-block;
}
.product{
width: 25%;
}
.slider{
width: 5%;
}
<ul class="product-slider">
<li class="slide-item slider"><div class="slider-left"><i class="fas fa-angle-left"></i></div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item slider"><div class="slider-right"><i class="fas fa-angle-right"></i></div></li>
</ul>
Related
I am a fresh newcomer and I have been studying and practising flexbox and CSS, just now I was trying to move my float elements into flexbox, but for a reason, I don't know my menu is broken I see the drop-down menu items upper the hamburger button, I would be happy if someone could explain what I am doing bad, thank you in advance. Here is the code:
.header {
background-color: #fff;
position: fixed;
text-align: center;
height: 50px;
width: 100%;
max-width: 480px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
z-index: 3;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
}
.header .logo {
/*float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .logo img {
height: 12px;
width: 12px;
}
.header .mail {
/* float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .mail img {
height: 15px;
width: 19px;
}
.header .menu-item {
font-size: 1em;
color: #000;
padding-top: 30px;
line-height: 2.5em;
}
.header .menu-sub-item {
font-size: 1em;
color: #c4c0bf;
line-height: 2.5em;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
display: flex;
}
<header class="header">
<img src="" alt="">
<img src="" alt="">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
</ul>
</header>
[as you see, the menu has reduced his size and the drop down went up after moving all elements into flexbox, before the menu cover his width and drop down cover all the background]
I have created a bubble conversation html.
Now I am trying to add a footer to it.
(Footer similar code in https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer)
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
width: 80%;
background: #eee;
}
.him {
float: left;
border: 1px solid #000000;
}
.me {
float: right;
}
#footer {
height: 30px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
But I am not seeing the last lines of the conversation. The problem is that the footer is overlaping them because of the float property of the < li > elements.
How can I avoid it?
check this out: css grid is a very good property of css.
we can divide screen into number of columns and rows . i used here css-grid.
for more info on css-grid read
https://css-tricks.com/snippets/css/complete-guide-grid/
ul {
list-style: none;
margin: 0;
padding: 0;
display:grid;
grid-template-columns:33% 33% 34%;
}
ul li {
display: block;
clear: both;
padding: 5px;
border-radius: 20px;
margin-bottom: 2px;
background: #eee;
}
.him {
grid-column:1/3;
border: 1px solid #000000;
}
.me {
grid-column:2/4
}
#footer {
height: 30px;
position: fixed;
bottom:0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
body {
padding-bottom: 30px;
}
<div>
<div>
<ul>
<li class="me">N-19</li>
<li class="me">N-18</li>
<li class="him">N-17</li>
<li class="me">N-16</li>
<li class="me">N-15</li>
<li class="me">N-14</li>
<li class="him">N-13</li>
<li class="me">N-12</li>
<li class="me">N-11</li>
<li class="me">N-10</li>
<li class="me">N-9</li>
<li class="me">N-8</li>
<li class="him">N-7</li>
<li class="me">N-6</li>
<li class="me">N-5</li>
<li class="me">N-4</li>
<li class="me">N-3</li>
<li class="me">N-2</li>
<li class="me">N-1</li>
<li class="him">N</li>
</ul>
</div>
<div id="footer">
Footer
</div>
</div>
Due to padding-bottom could not be applied here, my answer didn't fit in the case, therefore I've done a research on the alternatives for a grid layout proposed and, surprisingly, for the fixed positioning of the footer block.
In this example I've decided to leave the code without the <ul> which has quite a big list of default element css values. I supposed that the first message always comes from the user, and used :not() CSS selector to style the replies blocks. You can change .user and :not(user) to any classes like .me and .him according to your HTML.
section {display:flex;flex-direction:column}
section * {
width: 75%;
border: 1px solid #757575;
border-radius:20px;
padding:2px 10px;
margin-bottom:2px
}
.user {
background:#ccc;
margin-left: auto
}
section :not(.user) {
background:#eee
}
section :not(.user) + .user, .user + :not(.user) {
margin-top:5px
}
footer {
height: 30px;
position: sticky; /* Yes. It works now */
bottom: 0;
background: #000;
color: white;
text-align: center;
line-height: 28px
}
<section>
<div class="user">Need some help with HTML</div>
<div class="user">And CSS maybe</div>
<div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
<div>Sure</div>
<div>Lets test this one</div>
<div>Quite a good in terms of browser support in 2019</div>
<div class="user">Awsome!</div>
<div class="user">Thank you so much</div>
<div>You are welcome</div>
<div class="user">Goodbye</div>
</section>
<footer>
<p>Sticky Footer</p>
</footer>
I am trying to create a horizontal bar chart by combining an ul with a flexbox grid. For some reason, my lis are not lining up with the correct lines on the chart based on their width(it's close but slightly off):
section {
width:300px;
position:relative;
}
ul {
list-style-type:none;
padding:0;
margin:0;
padding:10px 0;
}
ul li {
background:red;
color:#fff;
font-weight:700;
margin-top:10px;
}
ul li:first-child {
margin-top:0;
}
div {
display: flex;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
flex: 1;
z-index:-1;
justify-content: space-between;
flex-wrap: nowrap;
padding:inherit;
}
div span {
width: 1px;
height: 100%;
background: grey;
position:relative;
}
<section>
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:90%;">Ipsum</li>
<li style="width:30%;">Dolor</li>
<li style="width:60%;">Sit</li>
<li style="width:70%;">Emet</li>
<li style="width:10%;">Lorem</li>
<li style="width:80%;">Ipsum</li>
<li style="width:50%;">Dolor</li>
</ul>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
The li with 100% width works fine, but the others don't line up correctly on the chart.
Consider backgroud to do this instead of a lot of code:
ul {
list-style-type: none;
width: 300px;
margin: 0;
padding:0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%)
0 /calc(100%/10) 100%;
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:90%;">Ipsum</li>
<li style="width:30%;">Dolor</li>
<li style="width:60%;">Sit</li>
<li style="width:70%;">Emet</li>
<li style="width:10%;">Lorem</li>
<li style="width:80%;">Ipsum</li>
<li style="width:50%;">Dolor</li>
</ul>
It will be responsive and you can easily scale it to any number of lines:
ul {
list-style-type: none;
width: 300px;
margin: 5px;
padding: 0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%)
0 /calc(100%/var(--n,10)) 100%;
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
Here is a different syntax:
ul {
list-style-type: none;
width: 300px;
margin: 5px;
padding: 0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100%/var(--n,10) - 1px)
,grey calc(100%/var(--n,10) - 1px) calc(100%/var(--n,10)));
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
Add one more pair of span tags.
Currently, there are only nine (9) white space gaps between the 10% gray horizontal bars.
This could be a simpler approach:
.container {
display: flex;
flex-flow: column wrap;
background-color: lightgray;
margin: 5%;
padding: 1%;
width: 86vw;
}
.sidebar {
background-color: lightskyblue;
flex-grow: 1;
margin: 1%;
padding: 0.5%;
height: 10vh;
text-align: center;
}
.sb1 {
flex-grow: 0;
width: 50%;
}
.sb2 {
flex-grow: 0;
width: 70%;
}
.sb3 {
flex-grow: 0;
width: 80%;
}
.sb4 {
flex-grow: 0;
width: 30%;
}
.sb5 {
flex-grow: 0;
width: 40%;
}
<div class="container">
<div class="sidebar sb1"></div>
<div class="sidebar sb2"></div>
<div class="sidebar sb3"></div>
<div class="sidebar sb4"></div>
<div class="sidebar sb5"></div>
</div>
I'm looking to distribute the space between the links evenly, so each take up 1/3 of the space of the containing div. The whole reason they are within this div is because I want to line it up with the banner, and I'm unsure how to it otherwise.
Here is a fiddle:
https://jsfiddle.net/yuy84gmq/13/
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Use flexbox and set justify-content to space-between or space-around:
space-between
Flex items are evenly distributed in the line. [...]
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. [...]
.navLinks {
display: flex;
justify-content: space-around;
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
.navLinks {
display: flex;
padding: 0;
justify-content: space-around;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a></li>
<li><a href='#'>Hours</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I see a flexbox solution has been posted, so I'll post the table/table-cell solution. It's a simple but effective, and you don't have to worry about browser discrepancies.
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
/* set the container to act like a table */
.navLinks {
display: table;
table-layout: fixed; /* evenly space all elements */
/* remove default styling */
width: 100%;
margin: 0;
padding: 0;
}
.navLinks li {
display: table-cell;/* set to a table-cell */
text-align: center;
font-size: 25px;
padding: 10px;
}
.navLinks a {
border: 1px solid black;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Try This code
is working for me
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
border: 1px solid black;
display: inline-block;
font-size: 25px;
width:32%;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
hi xD
your css:
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto; /*After setting a width this will make object sit centrally within parent container. Auto sets left and right margins equally. 0 denotes no top or bottom margin */
}
.li1 {
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;
}
.li2 {
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 {
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */
#navBar {
border: 1px solid black;
width:553px;
margin: 0 auto;
}
your html:
<body>
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li class="li1"><a href='#'>About</a></li>
<li class="li2"><a href='#'>Hours</a></li>
<li class="li3"><a href='#'>Contact</a></li>
</ul>
</nav> <!--#navBar-->
</body>
This is my jsfiddle example. My ul.nav is 910px and i have 7 li.nav inside it. I set their width to 130px each but the last one is out of place. Thanks.
Try increasing the min/max width of ul.nav
ul.nav {
width: 90%;
min-width: 1000px;
max-width: 1000px;
margin: 0 auto;
}
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 90%;
min-width: 1000px;
max-width: 1000px;
margin: 0 auto;
}
li.nav,
a.nav {
width: 130px;
display: inline-block;
}
<nav class="nav">
<ul class="nav">
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
</ul>
</nav>
set an exact width on your last nav and it works:
<a href="#" class="nav" style="width:40px">
<li class="nav">Home</li>
</a>
try to reduce nav length
li.nav, a.nav {
width: 110px;
display: inline-block;
}
I reduced 130 to 110
Try adding the below css
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 90%;
min-width: 910px;
max-width: 910px;
margin: 0 auto;
}
li.nav, a.nav {
width: 130px;
float: left;
}
ul.nav:after {
content:"";
clear:both;
display:block;
}
li.nav {
list-style-type:none;
padding: 12px 0;
box-sizing:border-box;
}
instead <li class="nav">Home</li>
use - <li class="nav">Home</li>
maybe use display: flex; justify-content: space-between; for ul.nav?
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
margin: 0 auto;
text-align: center;
padding-left: 0;
list-style: none;
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
}
ul.nav > li {
width: 130px;
}
ul.nav > li a{
display: block;
}
ul.nav > li a:hover{
background: #ccc;
}
<nav class="nav">
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
</ul>
</nav>