I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/
Related
I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?
Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I am making a webshop and have encountered a sort of weird bug.
I am trying to make a cart "badge" to easily view how many items that are in the cart. It's a responsive site and the badge is located on a a tag with two spans of display: block inside. On the desktop side the badges css looks like this:
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: 5px;
right: 1.5em;
}
.count::after:empty{
display: none;
padding: 0
}
Which works fine and the badge displays in the upper right corner. However on mobile, the a tags wrapper goes full-width and using the above css results in the badge flying off to the side of the screen.
Thus i wrote the following mobile code:
#media max-width: 990px{
...
.count::after{
position: relative;
top: -90%;
right: 0;
}
}
However. The top: -90% doesn't register properly.
If i enter the development tools and switch it off and on, it works perfectly. But if i refresh it goes right back down to the bottom of the icon.
JS-fiddle of the offending part: here
I agree with Shahil, you should set the position:relative to the element with the .count class and set position:absolute and top:-5px (let's say) to the .count::after
Like so:
.d-block{
display: block;
}
.d-inline_block{
display: inline-block;
}
.t-center{
text-align: center;
}
.menu{
width:100%;
text-align: center;
}
.count {
position:relative;
}
.count::after{
content: "2";
display: inline-block;
background: #FF0000;
border-radius: 20%;
padding: 0 0.5em;
transform: scale(0.7);
color: #FFF;
float: right;
position: absolute;
top: -5px;
right: 0;
}
<div class="col-xs-12 col-md-4 my-auto menu t-right">
<a href="/account/login" class="d-inline_block headerLink">
<i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
<span class="d-block t-center">Min konto</span>
</a>
<i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span>
<i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span>
</div>
This should work on both Desktop and mobile without using #media queries
I am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
I want to create a custom icon using font awesome overlays, which I can easily using the following html
<span style="width: 18px; height: 18px; line-height: 18px;" class="fa-stack">
<i class="fa fa-circle fa-stack-1x" style="color: rgb(20, 77, 99); font-size: 18px;"></i>
<i style="font-size: 12px;" class="fa fa-question fa-stack-1x fa-inverse"></i>
</span>
I can simplify it a bit my removing the inline CSS, but what I would like is to be able to wrap the whole think in a css class for ease of reuse, so that I can just do something like
<i class="fa fa-my-icon"></i>
The problem is that I have no idea how to create a CSS rule that generates the DOM elements needed. Is this possible, and if so any pointers as to how it can be done? I'm not too familiar with less, but a solution based on that would be fine too.
I know how to do it using javascript, but I want to avoid that if possible.
Ok, figured it out with less. In case anyone else is trying to do this:
#import "font-awesome/less/variables.less";
#icon-size: 18px;
.icon-mixin() {
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
left: 0;
}
.my-icon {
position: relative;
display: inline-block;
width: #icon-size;
height: #icon-size;
line-height: #icon-size;
vertical-align: middle;
color: blue;
&:before {
content: #fa-var-circle;
font-size: 18px;
.icon-mixin;
}
&:after {
content: #fa-var-question;
vertical-align: middle;
color: #fa-inverse;
.icon-mixin;
}
}