I am trying to achieve the following:
But what I am getting is this:
Here is my HTML (react JSX but is the same thing):
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
And my (S)CSS:
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
.icons_ul {
justify-content: center;
}
.toplefticon {
justify-content: flex-start;
}
I cannot find out for the life of me how to do this, whether with flexbox or something else!
Thanks for your answers,
Henry
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li{
margin: 1em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
left: 5px;
transform: translateX(-50%);
margin-top: 25%;
}
<div class="snavbarcontainer">
<div class="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div class="mainIcons">
<ul class="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
Try this:
//JSX
<div className="snavbarcontainer">
<div className="toplefticon">
<a class="test" href="#"><img src={topleft} alt="Testing Logo" /</a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
//added this
<div className="bottomlefticon">
<a class="test" href="#"><img src={bottomLeftIcon} alt="Testing Logo" /</a>
</div>
</div>
//CSS
body {
//! background-color: red; - DEBUGGING ONLY!
margin: 0
}
.snavbarcontainer {
background-color: black;
width: 3.5em;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
//added this
justify-content: space-between;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
li /* Adds property to EACH LI, not the UL itself. */{
margin: 1em 0;
}
}
I added the bottom left icon at the bottom of the code so there can be proper space between them.
I want to make a page similar to Instagram to train techniques etc, but I can not align the texts with the photos, follow the code and pictures.
.div-stories {
width: 100%;
height: 104px;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami...</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea...</p>
</li>
<li>
<p class="text-stories">princejack...</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
I'm learning html and css
This might help you; using Flexbox you can align items either in rows or columns pretty easily without defining exact sizes. This also helps keep the names aligned even if they are not the same size.
The width I set on the container is just to demonstrate how each item spreads out and aligns with its name; you can set this however you want
.container {
overflow-x: auto;
width: 1000px;
}
.stories {
display: flex;
list-style: none;
padding: 0;
flex-wrap: nowrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.pic {
border-radius: 50%;
border: double 6px white;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="container">
<ul class="stories">
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username large</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username very large</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
<li class="item">
<img src="https://via.placeholder.com/80" alt="" class="pic">
<span>username</span>
</li>
</ul>
</div>
If you remove height: 104px; from .div-stories it will wrap your content inside the gray background.
.div-stories {
width: 100%;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150g"></li>
<li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami...</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea...</p>
</li>
<li>
<p class="text-stories">princejack...</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
Example codepen: https://codepen.io/brooksrelyt/pen/pGEZOp
I advice you to change your HTML but if you want keep your HTML, you can add this css rules :
ul {
list-style: none;
}
ul li {
margin-left:5px !important;
border:1px solid green;
width:82px;
text-align:center;
}
ul li p {
overflow: hidden;
text-overflow:hidden;
font-size:14px;
}
.pic-stories {
margin:0;
}
Full code :
.div-stories {
width: 100%;
height: 104px;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.stories {
overflow: auto;
white-space: nowrap;
scrollbar-width: none;
}
.stories ul {
list-style: none;
width: auto;
margin-top: -5px;
}
.stories ul li {
display: inline-block;
}
.pic-stories {
width: 58px;
height: 58px;
border-radius: 50px;
margin-left: 15px;
margin-top: 10px;
z-index: 5;
}
.more-stories {
position: static;
top: 63px;
left: 37px;
margin-left: -15px;
width: 18px;
height: 18px;
}
.txt-stories ul {
list-style: none;
}
.txt-stories ul li {
display: inline-block;
position: relative;
margin-left: 23px;
}
.effect-stories {
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
ul {
list-style: none;
}
ul li {
margin-left:5px !important;
border:1px solid green;
width:82px;
text-align:center;
}
ul li p {
overflow: hidden;
text-overflow:hidden;
font-size:14px;
}
.pic-stories {
margin:0;
}
<div class="div-stories">
<nav class="stories">
<ul>
<li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>
<li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
<li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
</ul>
<nav class="txt-stories">
<ul>
<li>
<p class="text-stories">Seu story</p>
</li>
<li>
<p class="text-stories">shinigami</p>
</li>
<li>
<p class="text-stories">italo_rmds</p>
</li>
<li>
<p class="text-stories">rodrigotea</p>
</li>
<li>
<p class="text-stories">princejack</p>
</li>
<li>
<p class="text-stories">viainfinda</p>
</li>
<li>
<p class="text-stories">designer.bot</p>
</li>
<li>
<p class="text-stories">mjacksonh</p>
</li>
<li>
<p class="text-stories">reyzeryt</p>
</li>
</ul>
</nav>
</nav>
</div>
This solution have a new HTML and use "data-title" attribut :
Modern and short fast solution :
div.stories {
width: 100%;
background: #FAFAFA;
position: absolute;
top: 45px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
div.stories ul {
list-style: none;
margin: 0;
}
div.stories ul li {
display: inline-block;
margin-left: 5px !important;
width: 82px;
text-align: center;
}
div.stories ul li::after {
content: attr(data-title);
font-size: 14px;
}
img {
z-index: 5;
width: 70px;
height: 70px;
border: double 6px white;
border-radius: 50px;
background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
background-origin: border-box;
background-clip: content-box, border-box;
}
<div class="stories">
<nav>
<ul>
<li data-title="username one"><img src="https://randomuser.me/api/portraits/women/57.jpg"></li>
<li data-title="username two"><img src="https://randomuser.me/api/portraits/women/51.jpg"></li>
<li data-title="username tree"><img src="https://randomuser.me/api/portraits/women/52.jpg"></li>
<li data-title="username four"><img src="https://randomuser.me/api/portraits/women/53.jpg"></li>
<li data-title="username five"><img src="https://randomuser.me/api/portraits/women/54.jpg"></li>
</ul>
</nav>
</div>
I am trying to center the contact icons but its not working. I tried to set the margin to auto and used text-align:center but it doesnt work either. Please help
#contact {
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footer .row li {
float: left;
list-style-type: none;
text-align:center;
}
.footer .row img{
display: inline-block;
height: auto;
vertical-align: middle;
}
<div class="container">
<div class="footer">
<div class="row">
<div id="contact" class="col-xs-12 center">
<ul>
<li><img src="./images/logos/fb.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/twitter.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
<li><img src="./images/logos/insta.png" class="img-responsive inline-block" alt="Responsive image" width="90px" height="90px" /></li>
</ul>
</div>
</div>
</div>
</div>
g
Don't use bootstrap for now, i suggest to learn the basics first.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
display: table;
width: 100%;
padding: 10px
}
ul li{
list-style: none;
float: left;
background: #ddd;
margin-right: 10px;
padding: 10px
}
ul li img {
width: 25px;
height: 25px;
background: red;
}
ul li span, ul li p{
line-height: 25px;
height: 25px;
background: blue;
color: #fff
}
/* here the style */
.vertical-align li {
text-align: center;
}
.horizontal-align li img,
.horizontal-align li span {
float: left;
}
<h1>Vertical</h1>
<ul class='vertical-align'>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
<li><img src='url.png' /><p>VALUE</p></li>
</ul>
<h1>Horizontal</h1>
<ul class='horizontal-align'>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
<li><img src='url.png' /><span>VALUE</span></li>
</ul>
I want to vertically align images inside li, My code works fine in firefox but not in chrome. Can any body help me with this?
Here is the HTML:
<div class="brands container content">
<ul id="brandlogo">
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt=""/></li>
<li><img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt=""/></li>
</ul>
</div>
and CSS:
#brandlogo {
text-align: center;
padding: 0px;
margin: 30px 0px 0px;
position: relative;
list-style: outside none none;
}
#brandlogo li {
border: 1px solid #DDD;
float: none;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;
}
#brandlogo li a {
float: none;
width: 100%;
}
#brandlogo li a img {
vertical-align: middle;
}
http://jsbin.com/wizati/1/edit?html,css,output
Thanks in advance.
Add vertical-align: middle; to li element:
#brandlogo {
text-align: center;
padding: 0px;
margin: 30px 0px 0px;
position: relative;
list-style: outside none none;
}
#brandlogo li {
border: 1px solid #DDD;
float: none;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;
vertical-align: middle;/*Add vertical align middle*/
}
#brandlogo li a {
float: none;
width: 100%;
}
#brandlogo li a img {
vertical-align: middle;
}
<div class="brands container content">
<ul id="brandlogo">
<li>
<a href="http://scrub-market.hostedbywebstore.com/Alegria/b/11442638011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12MlwaGE42L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Cherooke/b/11442639011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12rC5bPL82L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Dickies/b/11442640011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/220GuD5uB5L.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Healing-Hands-Purple-Label/b/11442641011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12qBKSlxODL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Heart-Soul/b/11442643011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/127dR7ho7TL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Koi/b/11442644011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22gR5V1VEFL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/New-Balance/b/11442645011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22Sr0En0GzL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Nurse-Mate/b/11442646011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12JRdD3GOjL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Renova/b/11442647011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22bm9-FDvpL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Skechers/b/11442648011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/12mGjpXipJL.png" alt="" />
</a>
</li>
<li>
<a href="http://scrub-market.hostedbywebstore.com/Wonderwink/b/11442649011" class="">
<img src="https://images-na.ssl-images-amazon.com/images/I/22D0pbgaokL.png" alt="" />
</a>
</li>
</ul>
</div>
CSS
#brandlogo li a {
float: none;
width: 100%;
height: inherit;
display: table-cell;
vertical-align: middle;
}
My using the above CSS property we just make the a tag to act as a table cell and occupy full height of its parent and vertical-align:middle its childern
JS BIN DEMO
Add a float: left; as shown:
#brandlogo li {
border: 1px solid #DDD;
float: left;
display: inline-block;
padding: 0px 35px;
width: auto;
margin: 10px 10px 10px 0px;
height: 150px;
line-height: 150px;
border-radius: 5px;
Is it possible to create this checkerboard-styled social media with only this HTML (feel free to add classes/IDs):
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Google+</li>
<li>LinkedIn</li>
</ul>
I have to create empty <li></li> at my own attempt, and I think the HTML is 'dirty'. Here is my last attempt that works but 'dirty':
<!-- html code -->
<ul>
<li><img src="facebook.png" /></li>
<li></li>
<li><img src="twitter.png" /></li>
<li></li>
<li></li>
<li><img src="google.png" /></li>
<li></li>
<li><img src="linkedin.png" /></li>
</ul>
/* stylesheet */
ul
{
list-style-type: none;
width: 128px;
}
li
{
display: inline;
float: left;
background-color: #000;
width: 32px;
height: 32px;
}
li img
{
width: 32px;
height: 32px;
}
You want the nth-child selector.
ul { list-style-type: none; }
li
{
display: inline;
float: left;
background-color: #000;
width: 32px;
height: 32px;
}
ul :nth-child(2n)
{
position: relative;
top: 32px;
}
li img
{
width: 32px;
height: 32px;
}