I am using multiple backround images width one div but it dosn't work in IE8.
Here is my css code:
.description-page #main-navigation ul{
text-align:left;
width: 451px;background:url(../images/menu-desing.png) no-repeat center 26px ,
url(../images/top-bar1.png) no-repeat center 0px ;
height: 86px; z-index:100;padding-top: 9px;
}
Is there is any solution to this problem?
you can use CSS3pie to achieve this - http://css3pie.com/documentation/supported-css3-features/#pie-background
You can do something like the following to achieve two backgrounds also for IE8:
You need only one element in the DOM, we will create the second one with the help of pseudo-elements, which work already in IE8 (not IE7).
.description-page #main-navigation ul {
text-align:left;
width: 451px;
background:url(../images/menu-desing.png) no-repeat center 26px;
height: 86px;
padding-top: 9px;
position: relative;
z-index: 1;
}
/* Generate a new element with the second background, positioned on the same place like the original ul */
.description-page #main-navigation ul:before {
background: url(../images/top-bar1.png) no-repeat center 0px;
content: "";
height: 86px;
left: 0;
position: absolute;
top: 0;
width: 451px;
z-index: -1;
}
Related
I am viewing p-ng.com in firefox, when it is viewed with the bookmark sidebar, the logo is not centred.
Example with sidebar:
When I view the page without the bookmark sidebar, it looks like this.
Example without sidebar:
Even so, the logo doesn't seem to stay centered.
Thanks for any suggestions.
CSS
.site-title {
font-size: 32px;
font-weight: 400;
line-height: 1.2;
}
.site-title a,
.site-title a:hover {
margin:0;
}
.header-image .site-title > a {
background: url(images/logo.png) no-repeat top center;
margin-left: 625px;
margin-top: -95px;
width: 87px;
height: 87px;
width: 100%;
position: absolute;
background:#E5E5E5;
overflow: auto;
}
You have so many unnecessary declarations, the reason it's not centering to the viewport is because you have position: absolute and a bunch of unneeded margins.
Change your css to this.
CSS
.header-image .site-title > a {
background-position: url(images/logo.png) no-repeat top center;
margin: 0 auto;
width: 87px;
height: 87px;
background: #E5E5E5;
}
I don't understand why you have all the different margins, widths and then finally a position: absolute on top of that, but here's an easy way to center your logo :
.header-image .site-title > a {
position: absolute;
width: 87px;
height: 87px;
left: 50%;
transform: translateX(-50%);
background:#E5E5E5;
}
If it needs to be vertically centered within its container as well, you can add this :
.header-image .site-title > a{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
For the browser support of the transformproperty (and to see which vendor prefixes you need), refer to this : http://caniuse.com/#search=transform
Position your logo relative to a container of width: 100%, then you can set margin: 0 auto - this way you can also lose the margin-left property.
Example:
.parentContainer {
width: 100%;
}
.logo {
margin:0 auto;
position: relative
}
I'm trying to work out how to work with img divs on a grid. The background image of this grid contains a border, when I try to inspect the element element, the img divs start from the absolute top-left hand corner instead of slightly away from on the actual checkerboard patterned image, which has a thick border around it (950 * 500 - 18 columns wide by 9 rows). Does anyone know How I could tackle this problem?
CSS
body
{
background: #000000 url('gfx/bg.png') 0 0 no-repeat;
position: absolute;
width: 1280px; height:720px;
margin: 0; padding: 0;
overflow: hidden;
font-family: tivo-normal;
text-align: center;
color: #FFFFFF;
}
#GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
}
#GameGrid > div
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
float: left;
}
#GameGrid > div > img
{
/*width: 62px; height: 62px;*/
width: 52px; height: 52px;
margin: 0;
}
If I calculate by the values you are given: 18 columns each 52px wide that makes it 936px and your GameGrid is 950px. So I am assuming the 14px are taken by the border i.e. 7px each side
So, you can just add a padding in GameGrid
{
position: absolute;
/*width: 806px; height: 496px; top: 120px; left: 92px;*/
width: 950px;
height: 500px;
top: 50px;
left: 92px;
background: transparent url('gfx/Game_0003_GAMEGRID.png') center center no-repeat;
padding:7px;
}
Set specific top,right,bottom,left paddings if they are required specifically.
you can add the cellpading="0" attribute to your tag. You can also add a CSS rule to prevent padding, something like:
#GameGrid td, #GameGrid th{
padding:0px;
position:relative;
}
and maybe add top:0px; to your #GameGrid > div > img. An example could help us to understand better your problem :-)
Resorted to modify the image file and removed the border around the grid. Created another div with an image of just the grid border and aligned it to the grid div.
I am trying to achieve a dashed (custom) bored along the left and right of a 1000px fixed width page.
The left one is fine, this works a treat:
#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
However when I do it over on the right hand side, it wont quite work. I need it to relatively position to the right of the 1000px rather than of the window.
#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
Parent element:
#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}
That does not work. Can I achieve this? I need it to essentially float: right (but then i cannot make the height 100% of the browser window). Thanks
Demo: http://jsfiddle.net/iambriansreed/sAhmc/
Removed the floats on absolute elements. Added absolute position to parent and centered using left and margin. Removed unneeded margin-top on right border. Replaced border id's with classes.
Borders sit outside the 1000px width.
#container>.border{
position: absolute;
top: 0;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
#container>.border.left{
left: -5px;
background-color: red; /* demo */
}
#container>.border.right{
right: -5px;
background-color: blue; /* demo */
}
#container{
position: absolute;
top: 0;
bottom: 0;
width: 100px; /* demo */
left: 50%;
margin-left: -50px; /* half of width */
text-align: left;
padding-top: 90px;
overflow: visible;
background: #eee; /* demo */
}
I think adding a "position: relative;" rule to the #container element should work for you.
I am wanting to construct navigation items from three (background) images, with the first and last a fixed width, and the central a variable width, depending on the width of the text in the nav item. I have been led to believe that using the pseudo elements before and after would be the best method. When I try this though, the main (central) background image for the nav item is overlapping with the before and after background images.
You can see what I mean on this page.
Here is the CSS:
.box {
background-image: url(nav/images/nav_02.png);
background-repeat: repeat;
height:20px;
position: absolute;
padding: 10px 13px;
}
.box:before {
left: 0;
background-image: url(nav/images/nav_01.png);
}
.box:after {
right: 0;
background-image: url(nav/images/nav_03.png);
}
.box:before,
.box:after {
content: ' ';
width: 13px;
height:40px;
position: absolute;
top: 0;
background-repeat: no-repeat
}
And the HTML:
<div class="box">here is some text</div>
Can I use background-images in this way using pseudo elements?
Thanks,
Nick
Yes, but you will have to use left and right attributes for moving the pseudo elements in the right position. padding is not correct for the main box to position. Better use margin.
.box {
background-repeat-x: repeat;
background-image: url(nav/images/nav_02.png);
background-repeat: repeat;
height: 40px;
position: absolute;
margin: 0 13px;
line-height: 40px;
}
.box:before, .box:after {
content: ' ';
display:block;
width: 13px;
height: 40px;
position: absolute;
top: 0;
background-repeat: no-repeat;
}
.box:before {
left: -13px;
background-image: url(nav/images/nav_01.png);
}
.box:after {
right: -13px;
background-image: url(nav/images/nav_03.png);
}
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}