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.
Related
I have a cshtml page that has a list of images in DIV tags. It looks like this:
<div id="ActionButtonContainer" class="containerRight">
<div id="ActionButtonSidebar" class="sidebarRight">
<ul style="list-style-type:none">
<li title="Show More"><div class="icon lefticon" onclick="openNav()" /></li>
<li title="Edit"><div class="icon editicon" /></li>
<li title="Save"><div class="icon saveicon" /></li>
<li title="Cancel"><div class="icon cancelicon" /></li>
</ul>
</div>
</div>
When I run the above code, nothing shows up on the page. If change 1 of the elements to an image tag, all of a sudden all 4 items show up:
<div id="ActionButtonContainer" class="containerRight">
<div id="ActionButtonSidebar" class="sidebarRight">
<ul style="list-style-type:none">
<li title="Show More"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="icon lefticon" onclick="openNav()" /></li>
<li title="Edit"><div class="icon editicon" /></li>
<li title="Save"><div class="icon saveicon" /></li>
<li title="Cancel"><div class="icon cancelicon" /></li>
</ul>
</div>
</div>
The reason the src is that string, is that represents a blank 1kb image. If that's not there, Chrome will automatically put a border around the image for some stupid reason. I have tried src='', src='#', src='//:0', src='javascript:void(0)', they all end up showing a broken image on top of the image defined in the CSS class.
The reason I want the image source defined in the CSS file that when I change the src of the image tag to the actual image file, it refuses to size properly. I fought with it for an hour and I don't hate myself enough to continue down that road.
Any idea why none of the elements show when it's all DIV tags? Or how to remove the border around the image when no source is defined in Chrome in a more elegant less 'hacky' way?
Here's the CSS for reference:
.containerRight {
clear: both;
width: 80px;
margin: 0 auto;
float: right;
position: relative;
left: 90%;
}
.containerRight li {
padding-bottom:5px;
}
.containerRight button {
width: 100%;
}
.sidebarRight {
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 100px;
left: 93%;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar2 */
float: right;
vertical-align: middle;
text-align: center;
}
.icon {
background-size: contain;
background-repeat: no-repeat;
height: 25px;
width: 100%;
cursor:pointer;
}
.editicon {
background-image: url("../../../Images/edit.png");
}
Remove border around the image: Should work with outline: none. Therefore it should be put to your .icon css class as far as I understood your issue.
.icon {
outline: none;
border: none;
background-size: contain;
background-repeat: no-repeat;
height: 25px;
width: 100%;
cursor:pointer;
}
However, you should generally try to provide a valid link with a img source that will be found and always include an alt-attribute on your image tag, so there will be an alternative text when the image couldn't be found.
I tried to reproduce your issue here. I can't see your local images of course, therefore it is all blank and I typed in ABC, so I don't really can reproduce your issue: https://codepen.io/alexiovay/pen/qBELZzy
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'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.
If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm struggling with getting a section background color to change on
mouse over. I'm trying to turn the entire section into a link. Right
now, only the elements inside the section become links, not the block
itself.
If I remove the prior to the the whole block becomes a
link but the background sill does not change on mouse-over.
It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
a {
text-decoration: none;
}
a .ch-section {
display: block;
width: 400px;
}
a.active .ch-section {
font-weight: bold;
}
a:hover:not(.active) .ch-section {
background-color: yellow;
color: $sn-list-link-active;
}
<a href="#">
<section class="ch-section">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
</a>
The actual problem here is that you haven't set the height of your a tag. However when setting the a tag height to 100%, you will notice it still won't work. This is because the section has no fixed height specified. Instead you specified both min-height and max-height to be the same height, which doesn't really make sense. If instead you specify height:140px, it will work as expected:
.ch-section {
position: relative;
height: 140px;
width: 400px;
font-size: 13px;
}
.ch-section a {
display: block;
height: 100%;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
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/