I have a span that is generated through javascript, with its css class as follows:
.class1{
width:25px;
height:25px;
background-image: url(pic.png);
background-repeat:no-repeat;
background-position: center;
cursor:pointer;
margin-left:10px;
}
The problem is on, the html page, i can see the pointer -cursor, but not the background image,over the span, in IE7.
In IE6, both get shown , no problems.
Span, by definition, is an inline element, try adding display:block; or display:inline-block; to .class1. Also add height and width of your image.
Like so:
.class1{
width:25px;
height:25px;
background-image: url(pic.png);
background-repeat:no-repeat;
background-position: center;
cursor:pointer;
margin-left:10px;
display:block; /*or inline-block*/
height:100px;
width:100px; /*img height and width*/
}
Related
Image is not displaying in my page.
<div class="rating" style="width:25%;float:right;height:100px">
<span class="truckIcon">
<!-- <img src="../images/logo/favicon.png">
</span> -->
</div>
css:
.truckIcon{
background-image: url(../images/icons/favicon.png);no-repeat !important;
width:80px;
height:80px;
}
This is my css path: \ulmt\html\css\style.css
This is my image path: \ulmt\html\images\icons\favicon.png
Is anything wrong here?
.truckIcon is line-element so that you need to add display:inline-block for that and one more thing background-image not work with no-repeat so that you need to add background-repeat: no-repeat !important;
.truckIcon{
background-image: url(../images/icons/favicon.png);
background-repeat: no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
background-image not support no-repeat so try with this:
.truckIcon{
background: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
just remove the semicolon before no-repeat. The style should be
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
}
Remove semicolon ; just before no-repeat from the image url in your CSS, like:
.truckIcon {
background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
}
Hope this helps!
span is a inline element. so you need to style display: block; or display:inline-block;
also uncomment your close span tag after img tag
.truckIcon{
background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display:inline-block;
}
you have used span element which is an inline element. so your width and height will not be applied on it. To make it work add a property called display:inline-block;
.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
width:80px;
height:80px;
display: inline-block;
}
just simply change this CSS it would defiantly work.
.truckIcon{background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
display:inlin-block;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/
OK guys, here's my problem. I have a navigation bar on my website, which can be customized by the administrator of the site - he can add links to the navigation bar, so that list has dynamic width. At the right corner of the bar, I have a div element with a search box. These are the CSS properties of these two divs:
.head_navigation
{
float:left;
height:51px;
padding-top:7px;
margin:0;
border:0;
background:url("images/top_nav_bckg.gif") repeat-x bottom;
text-align: center;
}
.head_navigation_right{
float:right;
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}
I can't make the right div fill the blank space to its left side. Since the left div is dynamic, I can't set a fixed margin for the right one. I also tried:
width: 100%;
and it puts the right div to the row below and fills the whole page. Any help?
http://jsfiddle.net/Zx9gw/1/
From head_navigation_right remove the float property.
.head_navigation_right{
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}
Unfortunately I can't tell you why this is, I can just assume: float changes the display of an element, so that any other elements would take the rest of the space.
Put both left and right div in a div container with the background you want.
for instance:
<div id="menuBar">
<div class="head_navigation"></div>
<div class="head_navigation_right"></div>
<div style="clear:both"></div>
</div>
And then give menuBar the background you want... Hope i understood the question right.
Edit - another solution
make the container of .head_navigation and .head_navigation_right position:relative; and give a height, if it doesnt have one.
then apply this to your css:
.head_navigation
{
position:absolute;
left:0px;
top:0px;
z-index:1;
height:51px;
padding-top:7px;
margin:0;
width:100%;
border:0;
background:url("images/top_nav_bckg.gif") repeat-x bottom;
text-align: center;
}
.head_navigation_right{
position:absolute;
right:0px;
top:0px;
z-index:2;
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}
My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.