I want to put a button that is fixed on the right hand side of my webpage however as it stands right now, there is too much spacing between each letter.
Here is my html
<i class="style-switcher-btn">B
l
o
g
</i>
And this is the css class I am using:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
}
The letters are too spaced out as of right now and I would like them to be more compact... Any suggestions?
Just add line-height: 17px; to your CSS. Or whatever number is best for your needs
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
line-height: 17px;//ADD THIS
}
DEMO
Not 100% sure what you're asking but play around with letter spacing:
i.style-switcher-btn {
right: 0;
top: 60px;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 555555;
position: fixed;
padding: 7px 19px;
background: #585f69;
border-radius: 6px 0 0 6px !important;
white-space: pre;
letter-spacing: 2px;
}
Related
I am using Angular, TypeScript in WebStorm. I am trying to put a close icon on top of a span.
The first picture shows the result I obtained until now, in the second one I made it look as I would using Photoshop:
I was thinking to use span but I hope there is a more intelligent way to do that?
Here is my actual css:
NOTE : the dark blue side is in class "badge" the light grey is "general"
.general {
display: inline-block;
font-size: small;
color: black;
padding: 0.8em 0.7em 0 0.7em;
background-color:#EEEEEE;
line-height: 1em;
position: relative;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 0 4px 4px 0;
margin-bottom: 8px;
}
.badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color:#405061;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
border-radius: 4px 0 0 4px;
margin-bottom: 8px;
}
I have created two chat bubbles which one of them I need to be left aligned and other one I need to be right aligned .As of now my css grow both till the end like below image .
As of now I do not want to hardcode the width and want the bubble to grow with chat text and both one should be left aligned and other one should be right aligned like below:
CSS:
.speech-wrapper{
padding: 5px 6px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #075698;
color: #FFF;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.chatbox_other{
height:auto;
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:0px;
background: #DCDCDC;
color: #000;
position: relative;
border-radius: 10px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
box-shadow: 0 8px 6px -6px black;
}
.name_other{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #1970b0;
}
.name_other1{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ba006e;
}
.name_other2{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #007670;
}
.name_other3{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #3b0256;
}
.name_other4{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #00512b;
}
.name_other5{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #a91024;
}
.name_other6{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #b8471b;
}
.name_other7{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #7f1c7d;
}
.timestamp_other{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 0px;
right: 10px;
text-transform: uppercase; color: #fff
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0px 0px 9px;
color: #ffffff;
}
.triangle.left-top:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -10px;
right: auto;
top: 0px;
bottom: auto;
border: 22px solid;
border-color: #DCDCDC transparent transparent transparent;
z-index: -1;
}
.triangle.right-top:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: auto;
right: -10px;
top: 0;
bottom: auto;
border: 32px solid;
border-color: #075698 transparent transparent
transparent;
z-index: -1;
}
.alt{
margin: 0 0 0 60px;
}
HTML:
<div class="speech-wrapper">
<div class="chatbox triangle right-top alt">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div>
</div>
<div class="speech-wrapper">
<div class="chatbox_other triangle left-top">
<div class="txt">
<p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span>
</div>
</div>
</div>
</div>
I have tried uisng float left but while reducing the windows size the chat started overlapping on eachother
For testing out try below link
https://codepen.io/rajesh-kumar-dash/pen/KbvqQX
I think using float: right; for the right bubble and for the left bubble: float: left; with width: auto; should work
The "dirty" way to do it is by adding a after the divs just to clear the float:
<div class="speech-wrapper"><div class="chatbox triangle right-top alt"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
<div class="speech-wrapper"><div class="chatbox_other triangle left-top"><div class="txt"><p class="name">Apple TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div></div>
<div style="clear:both"></div>
The cleaner way to do it is called "Clearfix". I suggest you take a look on these two links to understand it and use on your code:
https://www.w3schools.com/css/css_float.asp
https://css-tricks.com/snippets/css/clear-fix/
If you want the size of your box as large as the text in it, you have to set "display: inline-block";
To make sure your box wont get bigger then a certain size use "max-width".
With "overflow-wrap: break-word" your text breaks if it reaches the max-width.
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
I am new to CSS and I have created a website but after whole work is done my all css elements are getting disordered on screen while minimizing the browser window..how to solve this?
I thought I should have provided the % value instead of pixels value...bt its also not working...
Please Help!
One of the stylesheet having this problem is...
.card-panel{
transition: box-shadow .25s;
padding: 20px;
padding-left: 150px;
margin: 0.5rem 0 1rem 0;
border-radius: 2px;
background-color: #f0f8ff ;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
position:absolute;
top: 100px;
left: 300px;
bottom:300px;
right: 300px;
font-family: calibri;
font-size: 18px;
color: #708090;
z-index: 2;
}
body{
background: #dcdcdc;
}
.profile{
float: right;
position: absolute;
left: 50px;
top: 33px;
bottom:40px;
padding-top: 0px;
padding-left: 0px;
border: 5px solid #708090;
}
.name{
color: #3299cc;
font-weight: bold;
font-size: 30px;
position: relative;
top: 10px;
left: 60px;
font-family: cambria;
}
.profession{
color: #3299cc;
font-size: 15px;
position: relative;
top: 16px;
left: 60px;
font-family: cambria;
}
span{
color: #708090;
}
You should try to use any Front-end frameworks like bootstrap, foundation, skeleton, frame etc. This will solve your problem.
As you've mentioned you're new to css, I strongly recommend you to use skeleton or frame
I want to make a speech bubble and I'm almost achieving my goal. Just a simple thing that is driving me crazy.
Check HERE to see my code and what I need.
I tried this:
HTML:
<div class="date">
03 Fev 14
</div>
CSS:
.date{
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 6px 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 0px;
}
As you can see, at the moment I have a triangle with two angles of 45degrees, and I want it to have an angle of 90degrees on top aligned to the left.
How can I achieve this without the use of an additional image?
You need to add the last value for border-width. Try this:
.date:after {
border-width: 10px 10px 0 0;
}
.date {
display: block;
width: 50px;
font-weight: 400;
background-color: #00a1e0;
color: #FFFFFF;
font-size: 11px;
text-transform: uppercase;
padding: 10px 15px;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-bottom: 20px;
}
.date:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 0 0;
border-color: #00a1e0 transparent;
display: block;
width: 0;
z-index: 1;
top: 100%;
left: 0px;
}
<h3>What I want: (image)</h3>
<img src="http://i.imgur.com/wlyK9EN.png">
<br>
<br>
<h3>What I have:</h3>
<div class="date">
03 Fev 14
</div>