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>
Related
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'm trying to learn some basics of HTML by using jfiddle. This is what I've done.
https://jsfiddle.net/Lqn0jch3/
HTML
<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;
}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;
}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}
But I can't understand why my 'menu-options' class is not being positioned just below the logo and there's some separation between them.
Thanks in advance.
is this what you want?
https://jsfiddle.net/Lqn0jch3/1/
i changed the css of p
p {
display: inline-block;
color: #000000;
}
the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you
I've changed your class, modify the positioning to your needs:
.menu-options {
background-color: #FFFFFF;
position:relative;
top:-20px;
}
By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.
p {
margin: 0;
}
And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>
Separation between them is because of default margin style on element p
You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.
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];
Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.
You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/
I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/
Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}
I have fixed height divs that contain text in them. I would like the text to be vertically aligned in the middle of the div, but the problem lies in the fact that some of the text is single-line, and some splits itself over onto two lines. For IE8, Chrome and Firefox, using display: table-cell and vertical-align: middle provides the solution I need:
JS Fiddle is here. Take the asterisk off the width: 300px to see the formatting when the text is on one line.
However, IE7 does not support the display: table-cell property. The only solutions I have found to this apply only to single lines, and not to text that may be 1 or 2 lines. How can I have it display in IE7 as it does in more modern browsers, without the use of any scripts?
How about an IE7 CSS call putting position:relative on the div, and absolute on the h6, and keep the code for vertical-align for modern browsers.
http://jsfiddle.net/yap59cn3/
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
ie7.css
div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
The goal is to make IE7 "presentable" -- no matter what you do, it will never look as pretty as a modern browser. To me, it's not worth the headache (not even a little).
Personally I've started to (ab)use padding to get vertical aligns. It's especially handy if you use fixed height, since you can offset the height with the value of the padding to get a perfect full-height element.
Note: This solution only works if you know what text will come in the <h6> in advance. If you dynamically add it, I'd suggest wordcounting to try to figure out if it's gonna wrap or not.
Solution:
HTML
<div>
<h6 class="OneLineVertCentered">Here is some text. Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;"> <!-- Margin only for displaying the boxes properly -->
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
CSS
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
Fiddle:
http://jsfiddle.net/Snorbuckle/CnmKN/
Snippet (same as fiddle):
div {
background-color: yellow;
height: 30px;
width: 200px;
width: 300px;
}
h6.OneLineVertCentered,
h6.TwoLineVertCentered {
font-size: 12px;
line-height: 1em;
}
h6.OneLineVertCentered {
padding-top: 10px;
}
h6.TwoLineVertCentered {
padding-top: 3px;
}
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
You can use a helper span element to vertical align your text like the following example:
html
<div class="container">
<span class="aligner"></span>
<h3>Text to be aligned center in the beloved ie7</h3>
</div>
css
div.container {
background-color: #000;
color: #fff;
height: 300px;
width: 250px;
position:relative;
margin:12px auto;
text-align:center;
}
.aligner {
display: inline-block;
height: 100%;
content: ' ';
margin-right: -0.25em;
vertical-align: middle;
}
h3 {
display: inline-block;
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/groumisg/dbx4rr0f/
Normally, we would use a pseudo element for this, but ie7 (what a surprise!) does not support :after, :before...etc. Also, note that ie7 does not support display: inline-block for elements that are not inline by default, like div. To use display: inline-block for a div you would have to use the following hack:
div {
display: inline-block;
*display: inline;
zoom: 1;
}
as suggested here Inline block doesn't work in internet explorer 7, 6
You should be able to accomplish this with line-height and vertical-align: middle;.
div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
check this out
http://jsfiddle.net/CnmKN/59/
CSS Code
div {
background-color: yellow;
height: 30px;
width: 200px;
*width: 300px;
display:table;
}
h6 {
font-size: 12px;
line-height: 1em;
display: table-cell;
vertical-align: middle;
height:90px;
}
I know two other methods to vertically center elements than with table-cell:
1) With line-height:
.element {
height: 60px;
line-height: 60px
}
This will only work if the text is in a single line.
2) position absolute/margin auto
.parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
You maybe will have to use height (auto or a value) and display inline/inline-block. Just try.
Key point is not to use pixels for alignment, use only %-s.
Works even on IE5 :)
here is Demo
.wrapper{
position: relative;
width: 100%;
height: 200px; /* change this value to see alignment*/
background-color: red;
margin: 0 auto;
}
.cell{
position: absolute;
display:block;
background-color: blue;
left:50%;
top:50%; /*this puches element half down*/
margin-left:-100px; /* this is the half size of cell width:200px;*/
margin-top: -.5em; /*this is the half size of font size*/
width: 200px;
color: #fff;
text-align:center;
}
<div class='wrapper'>
<div class='cell'>vertically aligned text</div>
</div>
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}