CSS - avoid more than 16px space between text node and span - html
I have this elements.
<div class="container">
<h2>
Stackoverflow is a QA website<span class="link"></span>
</h2>
</div>
There must be only 1rem (16px) space between the span element and the text node irrespective of the width of the h2 element.
I have used the following CSS, but it does not work. The span element is on the right side. There is more than 1rem space between the text and the span.
html {
font-size: 16px;
}
.container {
max-width: 500px;
}
h2 {
font-size: 2.25rem;
line-height: 3rem;
margin-bottom: 1.5rem;
position: relative;
display: flex;
justfiy-content: flex-start;
}
h2>span.link {
display: flex;
visibility: hidden;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
align-self: center;
margin-left: 1rem;
width: 40px !important;
height: 40px !important;
border-radius: 20px;
background: #eee;
-webkit-mask-image: radial-gradient(white, black);
overflow: hidden;
}
h2:hover>span.link {
visibility: visible;
}
span.link:after {
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
content: "";
border-radius: 20px;
width: 40px !important;
height: 40px !important;
background-image: url("data:image/svg+xml;utf-8, <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 105 105' version='1.1' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'><g id='Medium-M' transform='matrix(1,0,0,1,-11.233,88.1885)'><path fill='#616161' d='M65.882,-56.192L58.465,-48.713C61.394,-48.446 63.917,-47.856 66.032,-46.941C68.147,-46.027 69.95,-44.822 71.439,-43.326C74.195,-40.549 76.033,-37.497 76.954,-34.168C77.875,-30.839 77.884,-27.519 76.983,-24.206C76.082,-20.894 74.256,-17.862 71.506,-15.112L55.276,1.07C52.526,3.819 49.494,5.651 46.182,6.566C42.869,7.481 39.55,7.486 36.224,6.582C32.898,5.678 29.86,3.848 27.11,1.092C24.355,-1.685 22.516,-4.737 21.596,-8.066C20.675,-11.395 20.672,-14.714 21.587,-18.024C22.502,-21.333 24.334,-24.366 27.084,-27.122L35.468,-35.497C34.69,-37.256 34.189,-39.165 33.963,-41.226C33.737,-43.287 33.836,-45.262 34.261,-47.15L20.23,-33.194C16.251,-29.206 13.589,-24.795 12.244,-19.96C10.9,-15.126 10.896,-10.284 12.233,-5.433C13.571,-0.583 16.253,3.853 20.279,7.874C24.333,11.933 28.783,14.628 33.631,15.96C38.478,17.292 43.318,17.285 48.149,15.94C52.981,14.595 57.38,11.939 61.348,7.972L78.328,-9.04C82.322,-13.034 84.992,-17.449 86.337,-22.283C87.681,-27.117 87.687,-31.958 86.352,-36.806C85.018,-41.653 82.324,-46.088 78.271,-50.108C76.852,-51.559 75.142,-52.802 73.141,-53.837C71.139,-54.871 68.72,-55.656 65.882,-56.192ZM61.585,-15.044L69.002,-22.523C66.072,-22.79 63.551,-23.38 61.439,-24.295C59.326,-25.209 57.523,-26.412 56.027,-27.901C53.245,-30.684 51.393,-33.74 50.473,-37.069C49.552,-40.397 49.551,-43.716 50.468,-47.026C51.386,-50.336 53.22,-53.365 55.97,-56.115L72.16,-72.297C74.937,-75.053 77.981,-76.888 81.294,-77.803C84.606,-78.717 87.917,-78.721 91.227,-77.814C94.537,-76.907 97.583,-75.065 100.365,-72.288C103.115,-69.532 104.95,-66.491 105.871,-63.165C106.792,-59.839 106.795,-56.52 105.88,-53.208C104.965,-49.895 103.132,-46.864 100.383,-44.114L92.007,-35.739C92.785,-33.954 93.287,-32.037 93.513,-29.99C93.739,-27.943 93.639,-25.972 93.214,-24.078L107.245,-38.042C111.224,-42.03 113.885,-46.442 115.227,-51.276C116.568,-56.11 116.571,-60.951 115.234,-65.799C113.897,-70.647 111.217,-75.084 107.196,-79.111C103.137,-83.164 98.685,-85.858 93.84,-87.192C88.995,-88.526 84.157,-88.521 79.326,-87.176C74.495,-85.832 70.079,-83.159 66.079,-79.159L49.148,-62.196C45.147,-58.197 42.476,-53.781 41.135,-48.949C39.793,-44.118 39.788,-39.278 41.119,-34.431C42.45,-29.583 45.143,-25.149 49.197,-21.128C50.621,-19.677 52.334,-18.433 54.335,-17.395C56.336,-16.357 58.753,-15.574 61.585,-15.044Z' style='fill-rule:nonzero;'/></g></svg>");
background-repeat: no-repeat;
background-position: center;
background-size: 15px 15px;
}
<div class="container">
<h2>
Stackoverflow is a QA website<span class="link"></span>
</h2>
</div>
span:after contains a svg icon. I need to keep the icon. But it does not seem to work here. That is not the issue.
I need to avoid having more than 1rem space between the text node and the span element. How to fix it?
Related
CSS how to keep span element fixed in progresbar
I am using the following CSS to display a progresbar and in it I display the time that is left. For some reason no matter what I try the displayed time wont stay at its place and is moving left as the proress bar width is decreasing. I have tried a lot of ways to keep the text from moving and keep it centered but none seems to work. Please help !
CSS:
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 20px;
width: 300px;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: red;
height: 15px;
}
The div ( the div with the ID timer needs to be in the middle of the progres bar and it should not move while the progres bar is degreasing !)
<div class="progress">
<div id='progress' class="progress-value"><span id='timer' style="display: inline; width: 300px !important;"></span></div></center></div></center>
I solved this by wrapping the progress bar and the time element in another div, position relative, then I can absolutely position the time element in any position; in this case I centered it in the div.
The time stays put because it's out of the flow of the document but it's div takes up the same space as the progress bar.
.progress {
background: rgba(5,5,5,0.5);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
padding: 0 5px;
display: flex;
height: 20px;
width: 100%;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: red;
height: 15px;
width: 35%;
}
.progress-and-timer {
position: relative;
}
.timer-value {
position: absolute;
text-align: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 20px;
color: white;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
<div class="progress-and-timer">
<div id="timer" class="timer-value">time</div>
<div class="progress">
<div id="progress" class="progress-value">
</div>
</div>
</div>
Move input element to the center of the div
I need to move form input element from left to the center of div element.
I tried to solve this problem by margin: auto and position: relative.
The second way works, but there is a small problem. When I change the size
of the browser window, the input element changes its position. How to avoid it
by solving the first problem at the same time?
Screenshot
#stretch5 {
display: flex;
justify-content: center;
align-items: center;
height: 30em;
background-image: url(img/newsletter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.frame {
position: relative;
display: inline-block;
height: 25em;
top: 50px;
bottom: 100px;
margin: auto;
width: 100%;
border: 5px solid #fff;
margin-left: auto;
margin-right: auto;
transform: scale(0.8975, 0.8975) translate(-68.5808px, -31.2925px);;
}
.frame h2 {
font-size: 1.4em;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: inline-block;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}
<div id="stretch5" class="newsletter-opt-in">
<div class="frame">
<h2>Join our<span class="vip">VIP list</span></h2>
<p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>
Try in .frame input to change the element display to flex;. So the button is displayed in the middle of the page even if the page is reduced
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
border: 0 none;
display: flex;
margin: auto;
outline: 0;
cursor: pointer;
width: 2em;
}
I hope it will solves your problem
Just apply text-align:center to the form.
#stretch5 {
display: flex;
justify-content: center;
align-items: center;
height: 30em;
background-image: url(img/newsletter.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.frame {
height: 25em;
border: 5px solid #fff;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.frame h2 {
font-size: 1.4em;
}
form {
text-align: center;
}
.frame input[type=submit] {
padding: 5px 15px;
background: #f7e0cd;
text-transform: uppercase;
outline: 0;
cursor: pointer;
}
<div id="stretch5" class="newsletter-opt-in">
<div class="frame">
<h2>Join our<span class="vip">VIP list</span></h2>
<p class="vip-list-paragraph">For the exclusive tips, free resources and best tips</p>
<form action="#">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</div>
How can I align the text in the center of the image
I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .
slogan and background image attach responsively
I am trying to design such header where the slogan and background image are attached in the stated picture. I want to use flex to make it work but it is not working. Giving width breaks the responsiveness. I have created a jsbin to show the demo and here it is
http://jsbin.com/muguwavosa/edit?html,css,output
The source code
.header {
display: flex;
flex-direction: column;
background-image: url('https://www.rj-investments.co.uk/wp-content/uploads/2018/02/Home-Featured.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
padding: 100px 0;
}
.slogan-wrapper {
background: #fff;
padding: 80px 0 0 40px;
margin-top: 70px;
}
.slogan-text > h1 {
font-size: 3.375rem;
font-weight: 900;
letter-spacing: 5px;
color: #373f48;
}
.slogan-text {
padding: 100px 70px 100px 0;
position: relative;
background: #fff;
z-index: 1;
}
<div class="header">
<div class="slogan-wrapper grid">
<div class="slogan">
<div class="slogan-text">
<h1>Hustle, Loyalty, Respect</h1>
</div>
</div>
</div>
This is what I wanted exactly and its a full width header
Did you notice that the class 'span' div is closed with a p tag? If you wanted to put the width there then that would be the problem.
Change the below code in CSS file and try once.
.header {
display: flex;
flex-direction: column;
background-image: url('https://www.rj-investments.co.uk/wp-content/uploads/2018/02/Home-Featured.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
padding: 100px 0;
}
.slogan-wrapper {
margin-top: 70px;
}
.slogan-text > h1 {
font-size: 3.375rem;
font-weight: 900;
letter-spacing: 5px;
color: #373f48;
background-color: #fff;
padding: 80px 40px;
width: auto;
max-width: 319px;
}
.slogan-text {
padding: 100px 30px 100px 0;
position: relative;
z-index: 1;
}
Use before & after Pseudo-element to make a line
I'm using Pseudo-element :before and :after to draw a line before and after a title. It's working with an image:
.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}
Here is the result :
But, I would like the line to expand and fill in the whole div before and after the title, like this :
Is there a way to specify a percentage for the image for it to stretch? I try this, but it's not working :
.mydiv img {
width: 100%;
height: auto;
}
You don't need both :before and :after, either of the 2 will be enough and as you've been told, you don't need an image. See the approach below.
#header {
width: 100%;
height: 50px;
margin: 50px 0;
text-align: center;
font-size: 28px;
position: relative;
background-color: #57585C;
}
#header:after {
content: '';
width: 100%;
border-bottom: solid 1px #fff;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
h3 {
background-color: #57585C; /* Same as the parents Background */
width: auto;
display: inline-block;
z-index: 3;
padding: 0 20px 0 20px;
color: white;
position: relative;
font-family: calibri;
font-weight: lighter;
margin: 0;
}
<div id="header">
<h3>Last Projects</h3>
</div>
In case you need <h3> title to have transparent background - you can use both :before and :after and display: flex
More about flex-grow you can read here https://developer.mozilla.org/en-US/docs/Web/CSS/flex.
body {
background: linear-gradient(0.25turn, #3f87a6, #000000, #f69d3c); /* example of custom background */
}
#header {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center; /* making vertical centerign of all children */
}
#header::before, #header::after {
content: '';
flex: 1 1 auto; /* the first digint is 'flex-grow: 1', helps elemet to occupy all free space */
border-bottom: solid 1px #fff;
}
h3 {
flex: 0 1 auto; /* the first digint is flex-grow: 0 */
padding: 0 15px 0 15px;
color: #fff;
}
<div id="header">
<h3>Last Projects</h3>
</div>
<style>
.mydiv::before{
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
bottom: 1px;
background-color: black;
}
</style>
<div class="mydiv">About us</div>