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>
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>
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;
}
So I making a menu for a website, whenever the website loads the menu looks like img#1, the icons on the side are stacked, which I don't want to.
img1
After you hover over the icons they stack properly img#2.
after hovering
Which is how I actually want it.
I am sure it's just something small but I can't figure it out?
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right:auto;
padding-left:4%;
width:fit-content;
}
nav li {
display: inline;
padding-right:5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
.icon-nav{
margin-left:auto;
padding-right:4%;
}
.icon-nav a{
padding: 0 5%;
}
html
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</div>
</nav>
Your problem is likely related to a problem in your layout of .icon-nav and it's padding.
Some ways you can fix this is by:
Adding :not(:last-child) in the .icon-nav a CSS selector making it:
.icon-nav a:not(:last-child) {
padding: 0 5%;
}
OR
Adding:
First, adding width: 15%; to .icon-nav.
Second, sdding width: 75%; to .main-nav.
and adding a .icon-nav::before { content: ""; width: 15%; display: inline-block;}
/******* EXTRA *******/
#screen{
resize:horizontal;
overflow:hidden;
background-image: url('data:image/svg+xml;utf8, <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1" ><rect x="0" y="0" width="10" height="10" fill="lightgrey"/><rect x="10" y="10" width="10" height="10" fill="lightgrey"/></svg>');
}
/*********************/
/********** Things forgotten **********/
html {
--main-bg-color: black;
--light-color: red;
--font-h: /*monospace*/
;
}
ul {
display: inline;
list-style-type: none;
}
#screen div {
display: inline-block;
height: 1em;
}
#screen div * {
border-width: 0;
}
/**************************************/
nav {
height: 40px;
background-color: var(--main-bg-color);
width: 100%;
margin: 2% 0;
}
.menu-icon {
display: none;
}
.main-nav {
margin-right: auto;
padding-left: 4%;
width: fit-content;
/* ADDED { */ width: 70%; /* } */
}
nav li {
display: inline;
padding-right: 5%;
}
nav a {
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: var(--light-color);
font-family: var(--font-h);
}
/*= ADDED =======================*/
.icon-nav::before {
content: "";
width: 15%;
display: inline-block;
}
/*===============================*/
.icon-nav {
margin-left: auto;
padding-right: 4%;
/* ADDED {*/ width: 15%; /* } */
}
.icon-nav a {
padding: 0 5%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="screen">
<nav>
<div class="menu-icon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="main-nav">
<ul>
<li>
Home
</li>
<li>
About me
</li>
<li>
Skills
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="icon-nav">
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
<a href="" target="_blank">
<i class="fa" aria-hidden="true"></i>
</a>
</div>
</nav>
</div>
</body>
</html>
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