I was asked my Boss to create this button on our web page
I can create the button add color and text to it but i cannot include that icon present in the button. I shared the problem with my boss then he gave me this link https://gourmet.epark.jp/detail/EG00541264 and told me to look the button in it and do in the same way.
I tried inspecting elements and other ways but still cannot make this.
I don't have much experience of working with CSS so need help.
Thanks in advance.
Edit - I tried this but cannot add that small icon in front of button text
<button style="background-color:#e24f01;color:#fff;border-radius:2px;line-height:30px;font-size:14px;font-weight:700;width:150px">WEB予約</button>
So basically you need to do something like below (copied from the given link):
.shop-navi-app {
font-size: 14px;
font-weight: 700;
width: 200px;
text-align: center;
}
.btn {
background-color: #e24f01;
color: #fff;
border-radius: 2px;
line-height: 30px;
}
.shop-navi-app>a {
padding: 0;
line-height: 35px;
}
.btn>a, .main-search-area-body .search-box .btn-search>a {
color: #fff;
display: block;
line-height: 1;
padding: .3em .8em;
}
a {
color: #2f0a0a;
text-decoration: none;
}
.shop-navi-app .icon {
display: inline-block;
vertical-align: middle;
font-size: 15px;
margin: -1px 10px 0 0;
}
.icon {
font-family: epg-pc!important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shop-navi-app .icon-caption {
display: inline-block;
vertical-align: middle;
}
.icon-reserve2::after {
content: url(https://image.ibb.co/esaspT/if_Leaf.png);
}
<div class="shop-navi-app btn">
<a href="/reserve/EG00541264">
<i class="icon icon-reserve2"></i>
<span class="icon-caption">WEB予約</span>
</a>
</div>
Explnation:
<div class="shop-navi-app btn">//for button class
<a href="/reserve/EG00541264">//for link to other page
<i class="icon icon-reserve2"></i>// for icon
<span class="icon-caption">WEB予約</span>// for text
</a>
</div>
In the code, you have div for whole button. Then you have a tag inside div which contains link to redirect when you click on button. a tag contains icon in i tag and span tag for text.
Related
I am using Bootstrap's tooltip to display text against some of the buttons within the display page. Everything is working fine except that the display of the tooltip goes entirely below the footer. For e.g.
The click button highlighted in blue should give "add new record":
The image below shows the "add new record going below the footer instead of being displayed near to the button itself
Error image:
The CSS code goes something like this:
.tooltip {
position: absolute;
z-index: 1070;
display: inline;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: .875rem;
word-wrap: break-word;
opacity: 0;
pointer-events: none
}
.tooltip.show {
opacity: .9
}
.tooltip .arrow {
position: absolute;
display: inline;
width: .8rem;
height: .4rem
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid
}
The html looks something this
<div class="tooltip fade bs-tooltip-bottom" role="tooltip" id="tooltip785907">
<div class="arrow">
</div>
<div class="tooltip-inner">Add a new record
</div>
</div>
Any guidance would be much appreciated
On which relative positioned element is the tooltip absolute positioned? I think that is the problem.
Can you show more of your HTML and CSS?
I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}
I am trying to append an icon to an input.
with font awesome is possible to attach that icon on the value of the input, like this:
<input class="btn" type="submit" value="">
where value="" is the equivalent of <i class="fa fa-sign-in"></i>, that is perfect so far, but I need that icon to be bigger, how can I accomplish that ? or what is the other way to attach that icon the input ?
and css
input[type="submit"] {
font-family: FontAwesome;
}
and the icon must be attached to the left.
I would use <button type="submit"></button>
#font-face {
font-family: FontAwasome;
src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff");
}
.sign-in:after {
content: '';
display: inline-block;
font-family: FontAwasome;
font-size: 2em;
line-height: 2.75rem;
height: 2.75rem;
vertical-align: top;
}
button {
background-color: blue;
border: none;
color: white;
min-height: 2.75em;
margin: 0;
padding: 0 1em;
}
<button type="submit" class="sign-in"></button>
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..