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>
Related
I have a vertical carousel that is in a floating div that is on top of a div that contains a horizontal slider. The floating div carousel contains scrolling logos that extend past the slider and pushes down the next div. How can I contain the floating div inside the bottom slider div?
This is the html code.
<div class="slider">
<div class="slider-1">
<ul class="rslides" id="slider-1">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">
<h3 class="home">Welcome To Company</h3>
</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">
<h3 class="home">Welcome To Company</h3>
</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">
<h3 class="home">Welcome To Company</h3>
</div>
</li>
<li>
<img src="images/slide-4.jpg" alt="">
<div class="caption">
<h3 class="home">Welcome To Company</h3>
</div>
</li>
<li>
<img src="images/slide-5.jpg" alt="">
<div class="caption">
<h3 class="home">Welcome To Company</h3>
</div>
</li>
</ul>
</div>
<div id="scrollbox">
<ul class="scroll-img">
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
<li><img class="hotel-logo" src="images/logo.png" alt="logo"></li>
</ul>
</div>
</div>
Here is the css code.
.slider {
padding: 0;
position: relative;
}
.rslides {
position: absolute;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.layer {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
text-align: center;
}
.caption {
position: absolute;
top: 38%;
left: 14%;
}
.caption h3 {
text-align: left;
font-size: 38px;
font-weight: 800;
line-height: 40px;
color: #FFF;
width: 80%;
}
.caption h3.home {
text-align: left;
font-size: 52px;
font-weight: 800;
line-height: 50px;
color: #FFF;
width: 100%;
}
.slider #scrollbox {
background-color: rgba(2,56,122,0.6);
position: relative;
z-index: 75;
right: 75px;
top: 87px;
width: 185px;
float: right;
height: auto;
padding: 20px;
}
.slider #scrollbox .scroll-img {
list-style-type: none;
display: inline;
height: auto;
width: 100%;
}
I appreciate any help!
I am designing a webpage. I have two levels of navigation, the social media buttons on the first level and later a navigation bar. I am having issues getting the background colour of the navigation bar to go the complete length of the webpage, at present it starts and stops with the navigation bar. I am guessing it is an issue related to the location or my coding of the clearfix? Anyways I would appreciate your advice. My coding is below, I have attached a photo of my site so you can see what it looks like.
My Html code:
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<a href="https://www.facebook.com/Save-NSW-Government-Disability-
Services-ADHC-709029659182219/" target="_blank"><img src="images/facebook.png" alt="Facebook" width="32" height="32"></a>
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div id="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</l>
</ul>
</div>
<div id="clearfix">
</div>
</div>
</nav>
</header>
</div>
My Css:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: sans-serif;
background-color: black;
}
#wrapper {
width: 1366px;
height: auto;
background-color: black;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 140px;
background-color: black;
}
#logo {
float: left;
margin: 0px 0px 20px 50px;
padding-left: 100px;
}
#social {
float: right;
top: 0px;
margin: 0 auto;
}
#social ul li {
float: left;
list-style: none;
padding: 5px;
}
#clearfix:after {
display: block;
clear: both;
}
#page_nav {
background-color: #c50a13;
}
ul#navmenu {
list-style-type: none;
width: 800px;
margin: auto auto 5px auto;
}
ul.submenu {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid white;
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
color: #26b0f1;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #c50a13;
border: 1px solid white;
border-radius: 5px;
color: white;
}
ul#navmenu .submenu a {
margin-top: 3px;
}
ul#navmenu li:hover > a {
background-color: white;
color: #c50a13;
}
ul#navmenu ul.submenu {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu li:hover .submenu {
display: block;
}
.darrow {
font-size: 14pts;
position: absolute;
top: 10px;
right: 1px;
color: dodgerblue;
}
Update:
You forgot something in your CSS clearfix.
#clearfix:after {
display: block;
clear: both;
content: ''; /* add me */
}
In addition, you have some errors in your HTML which can affect rendering in different ways in different browsers.
[1] Invalid close tag for an <li>
[2] Extra </div> before the close of your </nav>.
[3] Duplicate IDs: id="clearfix"
First, fix the duplicate IDs. In your CSS, change this:
#clearfix:after {
display: block;
clear: both;
}
To this:
.clearfix:after {
display: block;
clear: both;
}
Here is your HTML without errors.
<div id="wrapper">
<header id="header" role="banner">
<div id="logo">
<img src="Images/title.png" alt="logo" width="1018" height="140">
</div>
<div id="social">
<ul>
<li>
<img src="images/twitter.png" alt="Twitter" width="32" height="32">
</li>
<li>
<img src="images/facebook.png" alt="Facebook" width="32" height="32">
</li>
<li>
<img src="images/youtube.png" alt="Youtube" width="32" height="32">
</li>
</ul>
</div>
<div class="clearfix">
</div>
<nav id="page_nav">
<div class="menu">
<ul id="navmenu">
<li class="active">Home</li>
<li>About Us</li>
<li>
Get Involved<span class="darrow">▼</span>
<ul class="submenu">
<li>Social Media</li>
<li>Union Meetings</li>
<li>Rally</li>
</ul>
</li>
<li>
News<span class="darrow">▼</span>
<ul class="submenu">
<li>Shrew's News</li>
<li>Update</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div class="clearfix">
</div>
</nav>
</header>
</div>
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
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;
}