<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>
ndnmpricetag-container use a static background image. When using large numbers (like the second example), the image is too small for the numbers.
How can i adjust ndnmpricetag-container's background width depending on the width of ndnmpricetag ?
Full css and examples here.
You need to make following changes:
Change the display property of .ndnmpricetag-container to inline-block so that it doesn't take all of the width of block. To make div place in next line, use < br/> tag in HTML.
Give the .ndnmpricetag-container a min-width equal to the image width say 100px. This will ensure that the image will not get cropped for very small widths.
Give background-size:100% 100%;.
Give padding-right: 35px;to .tondnmpricetag so that the arrows at the end of your image are able to contain the numbers and text have enough space to adjust within image.
See the updated link
See the screenshot below:
Hi now try to this Css
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
Demo
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
.ndnmpricetag {
position: relative;
top: 7px;
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>
Use a long image and use the 'Sliding door technique'.
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
You can have :before pseudo element to contain start of element, :after to contain end of element. And self element contains repeated middle background.
.a {
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
display: inline-block;
position: relative;
margin-left: 10px;
margin-right: 35px;
}
.a:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
left: -10px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
right: -35px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}
<div class="a">15464%</a>
Related
I'm working on an alternate display for a presentation program that replaces an HTML div with the text of the slide.
I want to have the bottom of the text aligned to a certain point, so that it has the same bottom point regardless of the number of lines.
I have now put that div inside another (id="wrapper") in order to get it to align at the bottom. The screen will always be 1920x1080. I've used the following CSS:
#wrapper {
height: 1040px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
vertical-align: bottom;
position: absolute;
left: 50%;
transform: translate(-50%);
}
<div id="currentslide"></div>
The inline-block is to give a background that changes with the text width, but I think it's interfering with my placement.
Thanks for any help!
Figured it out. I used:
#wrapper {
height: 1080px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
position:absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%);
}
I'm trying to have a background image to the right of a div, which isn't covering the whole div.
Right now it's like this (div1 is background-color):
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.
For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.
I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius: 4px;
height: 40px;
clear: both;
overflow: hidden;
}
.div1::after {
content: '';
background: url("https://unsplash.it/200/300");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position: absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
<div class="div1">
Text
</div>
There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:
Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it
A way to do this:
HTML:
<div id="div1">content</div>
<img id="image" src="url"/>
CSS:
#div1 {
display:inline-block;
float:left;
}
#img {
float:left;
}
By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.
This is a test of :before and :after, with which you can place text or an image before and after each HTML element.
p.test:before {
padding-right: 5px;
content: url(/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
I have an image 200px x 100px which acts as a background image to a link.
On hovering, the bg image changes.
Fiddle here: http://jsfiddle.net/EnsFK/
As you can see from the image, the text is not aligned with the image and appears at the bottom. Is there a way to align the text so it is in the middle (Aligned with the small dot?) I've tried vertical-align and
line-height but to no avail.
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
line-height: 24px;
vertical-align: middle;
}
.current-location span {
background: url(images/mobile/current-location.gif) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
}
.current-location:hover span {
display: inline-block;
background-position: -24px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
}
Rather than using an empty span in your markup, you could use pseudo elements.
Something like this:
.current-location:before {
content: '';
/* image here */
margin-right: x px; /* however much you need */
vertical-align: middle;
}
FIDDLE
Markup:
Use this location
CSS
.current-location {
line-height: 24px;
background-size: 48px 24px;
height: 24px;
width: 24px;
text-decoration: none;
position: relative;
}
.current-location:before {
content: '';
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align: middle;
}
.current-location:hover:before {
background-position: -24px 0px;
}
You can either change the line-height of the text to fit the image's location, or play with background-position property for the image's position to fit it to the text.
Working jsFiddle - also removed some of the unnecessary code.
.current-location {
line-height: 24px;
height: 24px;
text-decoration: none;
position: relative;
line-height: 26px;
display:inline-block;
}
.current-location span {
background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
display: inline-block;
background-position: 0px 0px;
background-size: 48px 24px;
height: 24px;
width: 24px;
margin-right: 10px;
vertical-align:top;
}
.current-location:hover span {
background-position: -24px 0px;
}
Note: this is usually done without the <span> element using background on the anchor itself. However you method will work just as fine with the new CSS..
I like to use this css snippet for vertical centering
#text{
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
#container {
position: relative;
height: 400px;
}
<div id="container">
<div id="text"><span>Text.....</span></div>
</div>
Your link is aligned properly look at your image instead
background: url(images/mobile/current-location.gif) left top no-repeat;
If you want it to be center aligned you should consider doing...
background: url(images/mobile/current-location.gif) center center no-repeat;
Also give the true width and height of the image for this method to work.
display: inline-block;
has problems with ie6 you will need to use:
display:inline-block;
*zoom: 1;
*display: inline;
try and stay away from vertical alignment.
How about a version with no images and no extra markup? http://jsfiddle.net/6aaZX/
For this HTML:
Use this location
This CSS:
a {
display: inline-block;
color: #333;
text-decoration: none;
font-family: sans-serif;
padding-left: 4em;
line-height: 2;
}
a:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #81B995;
content: '';
display: inline-block;
width: 0.7em;
height: 0.7em;
border: 0.4em solid #B7E2C8;
margin-right: 1em;
vertical-align: -0.3em;
}
It requires support for border-radius, but that's it - nothing fancy otherwise. If you did need to use an image, you could apply it to the :before pseudo element, as suggested by Danield
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/