This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
Related
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
I have some social media links in the footer here that are styled to be in circles: https://milfordpa.us
Everything looks good on Chrome, but on Safari, the last one appears to get "cut off" and I can't seem to figure out why.
Here is my current SCSS:
.social-links {
display: block;
float: right!important;
a {
border-radius: 50%;
padding: 10px 11px;
font-size: 20px;
background: $color3;
color: $color2;
margin-left: 5px;
&:hover {
background: $color4;
color: $color2!important;
}
}
i {
width: 21px!important;
height: 20px!important;
text-align: center;
}
}
Thank you in advance for your help!
In one of your parent elements for .social-link you're changing the width to something that safari seems to struggle with.
A quick fix is to reapply the width on .social-link
.social-link {
text-align: right;
min-width: -webkit-fill-available;
}
I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.
How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
My CSS code is:
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
Here is what is happening when I apply it as is:
https://postimg.cc/image/471owh7w7/
Your black <div> should have position: absolute, and you should in style use blur for it.
Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div>.
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.