I am trying to insert a image with css. In Chrome it is diplayed as desired.
CSS:
.logo {
content: url("../Icons/logo.png");
width: auto;
height: 50px;
margin-top: 35px;
margin-bottom: 65px;
}
HTML:
<span class="logo pull-right"></span>
But in Firefox it is not inserted. I have tried to use the :before pseudo class. But the size of the image should also be considered. With the pseudo class the image is not resized to desired dimensions.
Is there a better CSS method to insert images?
regards,
Marko
Update
My Logo Image is larger then the area where it is placed!
Here is a fiddle ...
http://jsfiddle.net/mkeuschn/URu57/
You may want to set it as a background instead of content, check this fiddle:
.logo {
background: url("http://goo.gl/OJhO2s") no-repeat;
background-size: 250px 250px;
display: block;
width: 250px;
height: 250px;
margin-top: 35px;
margin-bottom: 65px;
}
And giving it an specific width and height along with the block display property (you may also want to use a div for this instead of a span).
Can try this :before or :after,
.logo:before {
content: url("../Icons/logo.png");
width: auto;
height: 50px;
margin-top: 35px;
margin-bottom: 65px
}
instead of
.logo {
...
}
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Try to use:
CSS:
.logo {
backgroud: url("../Icons/logo.png") no-repeat;
width: auto; / * specify the width */
height: 50px;
margin-top: 35px;
margin-bottom: 65px;
}
Yeah:
Best method, use
background: url("/Icons/logo.png") [parameters];
Related
I want to display the notification count inside a circle but I don't want it to have a fixed width so the circle can expand when there is a bigger number/text inside the circle.
.circle {
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 50%;
background-color: red;
color: white;
text-align: center;
}
<div class="circle">5</div>
<br>
<div class="circle">102</div>
See this CSS only solution. Set the same value of min-width and min-height for 1 digit number. Use a pseudo element for vertical alignment and to maintain the square shape. With border-radius applies to the container for the circle.
.circle {
display: inline-block;
border-radius: 50%;
min-width: 20px;
min-height: 20px;
padding: 5px;
background: red;
color: white;
text-align: center;
line-height: 1;
box-sizing: content-box;
white-space: nowrap;
}
.circle:before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
height: 0;
}
.circle span {
display: inline-block;
vertical-align: middle;
}
<div class="circle"><span>8</span></div>
<div class="circle"><span>64</span></div>
<div class="circle"><span>512</span></div>
<div class="circle"><span>4096</span></div>
This is so hacky, but it seems to check out on all the major browsers' latest versions, so I'll post it anyway. The basic principle is that percent-based padding (even top and bottom padding) are relative to the width of the parent. Setting it to 100% with a width and height of 0 would theoretically mean that the height of the element would always be equal to the width. Combine that with a pseudo element and you don't even need to change the markup. I used flexbox to correct the centering of the content. It seems to work on the browsers I tested it on, but this is definitely dependent on recent versions because it uses flexbox and display:table. I also had to add a min-width to ensure it doesn't appear out of shape for too little of content.
.circle {
background-color: red;
color: white;
text-align: center;
position: relative;
border-radius: 50%;
min-width: 1.25em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.circle:after {
content: '';
padding-top: 100%;
display:table;
}
<div class="circle">5</div>
<br>
<div class="circle">102</div>
<br>
<div class="circle">4298347918</div>
Simple CSS for circles that works almost ever:
.circle {
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
}
The trick is that the padding top is calculated on the width so you can use it for makinh height equals width
Try using border-radius:50% and set max-width and height
Here is a quick example where you can see how to dynamically maintain a circle with css and js.
As Jagjit Singh pointed out here, you can achieve a circle using border-radius: 50%; instead of a fixed-pixel value.
I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.
EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.
$('.cross').html('?');
#island{
margin: 20px auto;
border-radius:10px;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')
}
#crosses{
line-height: 0;
position: relative;
top: 50px;
left: 50px;
}
.crosses-row{
}
.cross{
display: inline-block;
width: 50px;
height: 50px;
}
I've made a fiddle here.
Here is the working fiddle
https://jsfiddle.net/6zkLvLeg/1/
Add the following code to ur .cross
.cross {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
vertical-align: top;
text-align: center;
}
Add vertical-align: top; to css class cross and remove line-height: 0px; from #crosses
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I have the following html:
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
It has the following css:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
}
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
}
The image's margins aren't being set but its padding is. Also, when I set the margin to a specific value, the margins work. When I use the element inspector in Google Chrome, that line in the styles window doesn't have a line through it so I'm assuming it's valid css. I just can't figure out why it won't get set to auto.
You need to set the image to display:block;
demo http://jsfiddle.net/mCen7/
#image {
width: 300px;
height: 450px;
margin: auto;
padding-top: 20px;
display: block;
}
I would appreciate you give us your actual objective.
As far as I understand, you simply want the img to be centered in your div.
img tags are inline tags, that is, share the behavior of a text or a letter. It's not a block, such as a div.
inline tags are horizontally centered like text, with a text-align: center style, as follows:
#img_holder {
background-color:#EC0610;
min-height: 500px;
float:left;
width: 550px;
text-align: center;
}
#image {
width: 300px;
height: 450px;
padding-top: 20px;
}
<div id="img_holder">
<img id="image" src="../../images/img1.jpg" />
</div>
my code
<span class="iconCloud deactiveImage" src=""></span>
CSS
.deactiveImage {
background-image: url("./Images/off.png");
height: 35px;
width: 35px;
}
the pic is not displayed in IE. please help.. correct in chrome and firefox
span is an inline element by default, height and width won't be respected, so make it block or inline-block
.deactiveImage {
background-image: url("./Images/off.png");
height: 35px;
width: 35px;
display: inline-block;
}
You use display:block in your css to display image with the below css:
<style type="text/css">
.deactiveImage {
background-image: url("/Images/test.png");
height: 35px;
width: 35px;
display:block;
}
</style>