This question already has answers here:
Mystery white space underneath image tag [duplicate]
(3 answers)
Closed 4 years ago.
for some unknown reason i am getting this gap between the images after the wrap
see the sample code here:
https://codepen.io/mohammad-hossein-amri/pen/NEpzro
but the result i want should be like this
i tried almost everything and still the gap exist. somehow this extra space is getting added between the images after wrap
html, body{
background: #fff;
padding:0; margin:0;
height:100%;
}
ul#flex-container{
list-style-type: none;
margin:0; padding: 0;
display: flex;
flex-wrap: wrap;
}
ul li{
margin:0; padding: 0;
flex-grow: 1;
width:250px;
color: #fff;
font-size: 2.2em;
position: relative;
}
ul li img{
width: 100%;
}
a{
margin: 0;
padding: 0;
}
<div>
<ul id="flex-container">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
</ul>
</div>
Update
I saw others mark another question with the same answer, but that one doesn't appear in the google search because isn't related to flex. different symptoms but the same solution doesn't make questions duplicate of each other!
Set font-size: 0; and the whitespace-only nodes won't take any space:
html, body{
background: #fff;
padding:0; margin:0;
height:100%;
}
ul#flex-container{
list-style-type: none;
margin:0; padding: 0;
display: flex;
flex-wrap: wrap;
}
ul li{
margin:0; padding: 0;
flex-grow: 1;
width:250px;
color: #fff;
font-size: 0;
position: relative;
}
ul li img{
width: 100%;
}
a{
margin: 0;
padding: 0;
}
<div>
<ul id="flex-container">
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1532304887200-8db8cf689891?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c00cde864c07aaffc35fb0b5567015e&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1484849764956-0988adac7e5c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=81b2754a46f790afd076f2293820c487&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1489832049190-666d39b40b7e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dbc2c8c1720440ddfc6618eccd9f1656&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1535966092542-fcdb19e1ea4e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=28c12f97d6789fc30a2755b983293905&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512238701577-f182d9ef8af7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c396959d87964c1b361672856f73c67b&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
<li>
<a href="">
<img src="https://images.unsplash.com/photo-1512341875699-0b87026a8d5e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a6119da2cefcae7d1a886c7ce698abef&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</li>
</ul>
</div>
Give a margin-bottom to each li.
ul li {
margin-bottom: 5px;
}
Related
I have this set of boxes with links and they are displayed as flex items. The problem is that the coverage of the clickable area(yellow area) is not consistent due to the height of each box. Setting the line height of anchor tag to zero will fix the issue but that introduces other problems like overlapping text. How can I fix this issue while keeping both line height and flex behavior?
Thanks
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
li {
border: 1px solid red;
background: #fff;
flex: 1 1 0;
}
a {
background: yellow;
text-decoration: none;
padding: 40px;
display: inline-block;
line-height: 1.3;
/*height: 100%;
box-sizing: border-box;*/
width: 100%;
}
<ul>
<li>
<a href="#">
one
</a>
</li>
<li>
<a href="#">
two blah blahdfdfdfdfdfdfd
</a>
</li>
<li>
<a href="#">
three blah blah
</a>
</li>
<li>
<a href="#">
four
</a>
</li>
<li>
<a href="#">
five
</a>
</li>
<li>
<a href="#">
six
</a>
</li>
</ul>
You must add height: 100%; box-sizing: border-box; to the a css
ul {
list-style: none;
display: flex;
}
li {
border: 1px solid red;
background: #fff;
}
a {
background: yellow;
text-decoration: none;
padding: 40px;
display: inline-block;
line-height: 1.3;
height: 100%;
box-sizing: border-box;
}
<ul>
<li>
<a href="#">
one
</a>
</li>
<li>
<a href="#">
two blah blah
</a>
</li>
<li>
<a href="#">
three blah blah
</a>
</li>
<li>
<a href="#">
four
</a>
</li>
<li>
<a href="#">
five
</a>
</li>
<li>
<a href="#">
six
</a>
</li>
</ul>
I'm trying to make responsive proportionally rectangles for my gallery, which was working, but i can't centering text vertically. I don't understand how to proportionally resize centering text. Any help or advice will be appreciated.
Thanks.
#container{
margin-left:auto;
margin-right:auto;
}
#MyList li{
float: left;
background-image: url(../images/bardiches.png);
background-size: cover;
background-position: center;
}
#MyList a{
text-align: center;
line-height: 100%;
display: block;
background-color: rgba(255,255,255,.0);
transition: background-color 500ms ease-out;
}
#MyList a:hover{
background-color: rgba(255,255,255,.95);
}
Desktop/Tablet Styles
#media only screen and (min-width: 768px){
#container{
width:80%;
}
#MyList li{
width:46%;
margin-bottom:50px;
margin-left: 2%;
margin-right: 2%;
}
#MyList li:nth-child(4n){
margin-right:0px;
}
#MyList a{
height:100%;
padding-bottom: 55%;
}
}
html
<div id="container">
<ul id="MyList">
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
Bardiches
</a>
</li>
</ul>
</div>
My current test site below:-
http://benson.graphics/test/
Try wrapping the text inside span tags like this and add the following CSS rules. It will work in multi lines text too. Hope this will help you.
<a href="#">
<span>Bardiches</span>
</a>
#MyList a {
position: relative;
}
#MyList a span {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
#MyList li {
margin-bottom: 50px;
margin-left: 2%;
margin-right: 2%;
position: relative;
width: 46%;
}
#MyList a span {
bottom: 0;
height: 5%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
Just put 'span' tag between all 'a' tag
Here's another way using using flex:
Just change the definition of the following block in CSS:
#container li {
width: 46%;
margin-bottom: 50px;
margin-left: 2%;
margin-right: 2%;
height: 200px;
display: flex;
justify-content: space-around;
flex-direction: column;
}
I had to add a height tag for my tests but it might be bec of the pic I used.
There is a padding-bottom rule of 55% which is in all your anchor tags contained in your li tags. Take this out..because this will display that long white space after your span with text
You can divide this padding space equally top and bottom
#MyList a{
padding-bottom: 27.5% !important;
padding-top: 27.5% !important;;
}
Snippet
#MyList a{
padding-bottom: 27.5% !important;
padding-top: 27.5% !important;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="http://benson.graphics/test/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>
</head>
<body>
<section>
<div id="container">
<ul id="MyList">
<li>
<a href="#">
Bardiches
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
<li>
<a href="#">
<span class="title">
Bardiches
</span>
</a>
</li>
</ul>
</div>
</section>
<script type="text/javascript" src="js/custom_behaviors.js"></script>
</body>
</html>
I am trying to make a simple piece of code that makes some links sit in the top right corner of the page, but they won't line up nicely. They keep lining up vertically, and I want them horizontal. I'm sure it's probably something obvious I'm missing, but I'm not sure what. I also tried using float left but it didn't change anything.
CSS & HTML
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<ul class="social-buttons-list">
<li>
<a href="">
<img src="img/Twitter.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Facebook.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Snapchat.png" alt="" class="social-button">
</a>
</li>
</ul>
</div>
You're forgetting that the <li> of your list has a default display:block. By addressing that and adding text-align: right to your list you'll achieve a horizontal, right-aligned list.
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
text-align: right;
}
.social-buttons-list li {
display: inline-block;
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<ul class="social-buttons-list">
<li>
<a href="">
<img src="img/Twitter.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Facebook.png" alt="" class="social-button">
</a>
</li>
<li>
<a href="">
<img src="img/Snapchat.png" alt="" class="social-button">
</a>
</li>
</ul>
</div>
They are aligning because you have the buttons in "un-ordered list" , they are used to display list. Just remove them
.social {
position: fixed;
right: 0;
/* display:inline-block; */
/* float:left; */
}
.social-buttons-list {
list-style-type: none;
list-style-position: outside;
margin: 0;
padding: 0;
/* display: inline-block; */
/* float:right; */
}
.social-button {
margin: 5px;
width: 50px;
height: 50px;
display: inline-block;
/* float:right; */
}
<div class="social">
<a href="">
<img src="img/Twitter.png" a class="social-button">
</a>
<a href="">
<img src="img/Facebook.png" class="social-button">
</a>
<a href="">
<img src="img/Snapchat.png" class="social-button">
</a>
</div>
ul {
list-style-type: none;
}
li {
float: right;
}
li a {
display: block;
color: white;
}
http://codepen.io/anon/pen/BLBBWG
Here is your solution
i am making a website and tried to connect link via img and after coding i am getting a space before facebook image is there any way to eliminate space before the image starts
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>
Set the padding of your ul to 0.
By browser-default an ul has always a padding-left.
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding: 0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>
Each browser sets its value default styles for a variety of HTML-elements. With CSS Reset, we can neutralize this difference to ensure cross-browser style.
http://cssreset.com
Remove the padding on your <ul>:
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding:0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>
Add padding: 0 to ul
#social {
height: 50px;
border: 1px solid black;
}
#social>ul {
list-style: none;
padding: 0;
}
#social > ul li {
display: inline;
line-height: 40px;
}
#social > ul li a {
display: inline-block;
padding: 0px;
margin: 0px;
}
#social > ul li a img {
width: 35px;
height: 35px;
}
<section id="social">
<ul>
<li>
<a href="">
<img src="SocialButtons/facebook-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/googleplus-square.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/mail.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/github.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/rss-feed.png" />
</a>
</li>
<li>
<a href="">
<img src="SocialButtons/twitter.png" />
</a>
</li>
</ul>
</section>
^^ The above images show =900px, >900px, <900px...I just want to center and shorten padding as window shrinks.(at 15px)
^^Using 1.666666666666666%
Right now im trying to make my webpage navbar work with changes in widths. When the window is exactly 900px The navbar fits perfectly. I have 30px spacing around each block (15px left and right; 15px start and end of list). I took 900 and divided by 60 to get 15px and that is my percentage (%/60). When i use the formula calc(1/60*100%) the navbar has the wrong spacing. Am i misunderstanding something.
I dont think this is google chrome issue assuming something is wrong with the above logic. I can post the html file if anyone needs it. Don't know if its neccessary.
body {
margin:0px;
font-family:avenir, sans-serif;
}
.nav {
margin: 0px 0px 0px 0px;
overflow:hidden;
width:100%;
<!--box-shadow: 0px 0px 10px 0px #000000;-->
}
.link-header {
background-color:rgb(242,242,235);
}
.school-header {
background-color:rgb(40,110,123);
}
.nav-left {
display: inline-block;
float:left;
}
.nav-right {
display: inline-block;
float:right;
}<!--
.nav-center {
text-align: center;
}-->
a {
text-decoration: none;
}
.school-header a {
color:white;
}
.link-header a {
color:rgb(40,40,40);
}
.nav-li-outer {
padding-left:calc(1/60*100%);
padding-right:calc(1/60*100%);
display: inline-block;
margin-top: 0px;
vertical-align: top;
}
.school-header li {
line-height:80px;
}
.link-header li {
line-height:30px;
}
.link-header li:hover {
box-shadow:inset 0 -3px 0 rgb(40, 40, 40);
}
ul {
margin: 0;
list-style-type: none;
padding-left: calc(1/60*100%);
padding-right:calc(1/60*100%);
}
html:
<html>
<head>
<link rel="stylesheet" href="kamsc.css">
</head>
<body>
<div class="school-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
<img src="Logo-Test.png" width=600px style="vertical-align:middle">
</li>
</div>
</a>
</ul>
</div>
<div class="nav-right">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Login
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
<div class="link-header">
<div class="nav">
<div class="nav-left">
<ul>
<a href="#">
<div class="nav-li-outer">
<li>
Home
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Staff
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Admissions
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Curriculum
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Sizzling Summer
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
KAMSC Connection
</li>
</div>
</a>
<a href="#">
<div class="nav-li-outer">
<li>
Alumni
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
</body>
</html>
You can significantly simply your HTML, particularly for the nav section. Here's a JSFiddle: http://jsfiddle.net/vanu2ynx/
I didn't completely recreate what you're trying to do, but you can probably fill in the details.
Here's the HTML I used:
<header>
<h1>Title</h1>
<div class="login">Login</div>
</header>
<nav>
<ul>
<li>Home</li>
<li>KAMSC</li>
<li>Staff</li>
<li>Adminssions</li>
<li>Curriculum</li>
<li>Sizzling Summer</li>
<li>KAMSC Connection</li>
<li>Alumni</li>
</ul>
</nav>
And the CSS:
header {
background: teal;
overflow: hidden;
padding: 2% 2%;
}
header h1 {
float: left;
margin: 0;
padding: 0;
}
header .login {
float: right;
}
nav {
background: lightgray;
padding: 2% 2%;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
text-align: justify;
}
nav ul:after {
content: '';
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
font-size: 16px;
}
The trick here is the text-align: justify; on nav ul and then the :after creates a full width child element for the justify to work.
You'll need to add media queries to have this break properly, but that should be pretty straight-forward.
Read more here: How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container