In this link it looks like a button
<div class="button-row">
</span>
</div>
The css
.button-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
}
The image is not visible on the button , but I see it on the inspector, I don't know what the problem is.
Try to put some min-height and min-width (or) height and width. since it is a inline element also no content inside.
Try below in your code
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
display: inline-block;
min-width: 200px;
min-height: 200px;
background-size: 100%;
}
UPDATE
Since you are using Bootstrap buttons, you are limited to the confines of the Bootstrap Button Classes. I have seen that you can use the <button> element with an image tag inside, but I'm not sure if that still works in bootstrap 4.
Can you try the code I updated in my answer (using :before and two classes).
If this doesn't work, remove the other classes on your anchor tag and add width and height to .arrow-right. Once you see the image, start adding classes until it disappears again, then you know what you need to troubleshoot.
HTML
<div class="button-row">
<a href="<% url('/') class="btn-link btn-blue mbright {!! t("profile.unsuscribe_button_yes") !!}
<span class="arrow-right arrow-image"></span>
</a>
</div>
CSS
.arrow-right:before {
display: inline-block;
background-color: transparent;
background-position : center center;
background-repeat:no-repeat;
}
.arrow-image:before {
background-image: url('#{$iconsImagesPath}black-right-arrow.png');
}
The root cause of the problem is the empty span that has a background image.
By default, the width and height of an empty span will be 0px. This causes the image to get hidden.
The easy way to fix this problem is by assigning the height and width attributes to the span.
Here is an example for making the background image of a span visible when the span is empty:
<div class="button-row">
<a href="link-url-here">
<!-- Set span dimensions to 20x20 to make the background visible -->
<!-- Also, disable background repetition to show the image only once -->
<span class="arrow-right arrow-image"
style="height: 20px; width: 20px; background-repeat: no-repeat;">
</span>
</a>
</div>
Related
So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem?
Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.
Thank you in advance for the help and
HTML
<div class="hottest">
<div>
<img src="img/main-page/444.jpg"/>
<p>J-Cole: KOD</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/444.jpg" />
<p>Jay-Z: 444</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/hus.jpg" />
<p>J-Hus: Big Conspiracy</p>
<button class="btn3">Check out </button>
</div>
</div>
CSS
.hottest {
display: flex;
justify-content: space-between;
color: white;
margin: 3vw;
margin-bottom: 10vw;
width: 100%;
}
.hottest p {
padding-left: 1vw;
margin: 1vw;
font-size: 3vw;
}
.hottest .left {
float: left;
margin-right: 2vw;
}
.hottest a {
text-decoration: none;
color: black;
}
.hottest img {
width: 70%;
}
the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.
try giving your divs flex-basis: 100%; which should give your divs equal widths.
The text text would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?
Adding < a href> to images makes the box around the image larger and forces the text on the right hand side of the image further right. I would like to make the image link to another page while keeping the current format.
I tried adding to the image (alt is connector) (shown below), but it didn't work. (https://www.w3schools.com/html/html_images.asp - Image as a Link
uses around ).
I would expect adding the to the image would simply make the image link to another page, but it changed the size of the box for the image and pushed the text to the right of the image further right.
Page: https://www.flexsweep.com/pages/aboutourproducts (shows layout as it should be - provides access to inspect if needed.)
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
margin-right: 70px;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text.
<div>Shop Push Brooms →</div>
</p>
</div>
</div>
<!-- Attempt to add link to image -->
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
IMG tags behave special as they are a mixture of "block" (have height and width) and "inline" (float around text) elements. Here's some good information about this topic if you want to learn more about it.
Images in <a> tags have an extra bit of padding at the footer which you can get rid of by applying display:block; to the element. Also make sure that there is no extra margin or padding applied by some other rules:
a img {
padding: 0;
margin: 0;
display: block;
}
Here's a demo with some colored backgrounds to show you which element applies padding or margin.
The original image is sized at 50% width from the CSS rule on .content img. This only affects img tags that are descendants of elements with the content class. If you apply content to the link, it will work as you expect.
Edit: Noticed this will not work if you place it inside all inside another content container because the relative width is calculated from the parent, which in the second case will be the a element and not the content div. I updated the snippet to size descendant links of content to be sized at 50% width and the contained images to be 100%.
To address the small amount of padding at the bottom of the link, you can use the solution provided in Sascha's answer
/*Image and Advantages*/
.content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.content img {
width: 50%;
}
.link-wrap {
width: 50%;
}
.link-wrap img {
width: 100%;
}
.details {
width: 50%;
}
<div id="PushBrooms" class="tabcontent">
<p>Intro text.</p>
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />
<div class="details">
<p>
More text. </p>
<div>Shop Push Brooms →</div>
</div>
</div>
<!-- Attempt to add link to image -->
<div class="content">
<a class="link-wrap" href="www.flexsweep.com"><img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>
<div class="details">
<p>
More text.</p>
<div>Shop Push Brooms →</div>
</div>
</div>
My header is structured as a table. I finally managed to make it so that the last li is floated to the right and X % to the left while still being compatible with different screen sizes. However, my 'profile picture' div is resizing and resembles a squished circle as a result. How do I make sure that the div is always 40px in width and height (if this is the right way to go around it)?
CSS
#hdr-profile {
align-items: center;
border: 1px dotted red;
display: flex;
margin-left: auto;
white-space: nowrap;
}
#hdr-profile-pic {
width: 40px;
height: 40px;
background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
cursor: pointer;
}
HTML
<li>
<div id="hdr-profile">
<div id="hdr-profile-pic" title="My Profile">
<div id="hdr-profile-country" title="Liam is in Spain"></div>
</div>
<span id="hdr-profile-name" class="select">Liam Macmillan</span>
<i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
</div>
</li>
An easy way would be to add a !important after the 40px in your css of the profile picture
I suspect it's because of the size of the drop-down. In the JSFiddle that Nenad Vracar linked, the picture comes in totally fine. Don't use !important to force the size, it's bad practice and causes unexpected behavior. Instead, try experimenting with the size of the dropdown. I don't have the rest of your code, or I'd have looked into it.
I am having problem with placing text below background image, I did play with CSS but no luck text is not moving to next line below image.
Here is my HTML
<a class="bgimg">placing text below background image </a>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
}
I wanted to have background image at top and text below the image.
can anybody suggest me please ?
The key is in top padding, so you need:
padding-top: 20px;
Also, since it's an anchor which is inline by default, you need to set it to inline-block (setting it to block might cause text flow issues):
display: inline-block;
And that's it, see an example here: http://jsfiddle.net/2Log20b4/
At that point, why not Just separate your elements a bit?
<div class="bgimg"></div>
<p>placing text below background image </p>
<style>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
width: 65px;
height: 31px;
}
</style>
the alternative would be to use text-align on your anchor (but you'd have to set the anchor to display as a block element first)
If the height of the image is unknown, you could use CSS generated content with a url() value as follows:
.bgimg:before {
content: url('http://placehold.it/100');
display: block;
}
.bgimg {
text-align: center; /* align the image to center */
display: inline-block;
}
<a href="#" class="bgimg">
placing text below background image
</a>
It's worth noting that generated content is supported in IE8 and newer.
I have a webpage written in dreamweaver. I have my buttons as part of the background image and use a href to provide functionability to those buttons. However when I zoom in or out with my browser those a tags move and the buttons in the background no longer align with teh a href tag. Is there any way around this?
Thanks
You need to slice those image buttons seperately, whether it's using Photoshop, GIMP or whatever you want and save them in your images folder. Then you can either use the <img> tag or have a <div> with a background using that image and set the "a href" on that.
So you could do either of these:
<img src="url" alt="some_text"/>
OR
html:
<div id="image"></div>
css:
div#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
To have them placed where you want on the page, you would have to place them in a div and then use css to add a margin or padding to be placed where you need it to be. So if you use the first option and you want it to be on the bottom right of a specific div, you would do this:
html:
<div id="specific_div">
<div id="image">
</div>
</div>
css:
#specific_div{
height: 400;
width: 400;
}
#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
#specific_div #image{
/* placement on page */
float:right;
margin-top: 150px;
}