I have a map with several divs positioned absolutely on the page. Each div has a background image which contains the normal state and the hover state in one file. When the user mouses over the div, the background image is supposed to shift up 25 pixels. In ie7, the background image shifts up 25 pixels, but it also shifts to the right about 20 pixels.
Here is the CSS:
#LosAngelesButton {position: absolute; top: 80px; left: 168px; background: url(../images/superNav/LosAngeles.png) no-repeat; height: 27px; width: 110px;}
#LosAngelesButton a {display: block; height: 27px; width: 110px; text-indent: -99999em;}
#LosAngelesButton a:hover {background: url(../images/superNav/LosAngeles.png) no-repeat 0 -25px;}
The problem is showing only in ie7. Any suggestions?
I think you have this problem in other browsers to. you have set the background image on #LosAngelesButton and you change the state when you hover the a inside this element whatever it is. I would suggest you set your original background position on a element.
post the HTML code of this LosAngelesButton and i can give you a more precise awnser
Related
I have a problem with the menu of my store. If you enter my webpage, http://masluzz.panamerik.net/ you can see the menu on the top is colored in gray and orange, but when I change the resolution of the page the background menu moves to the right side. I don't know how I can view on all resolutions without moving the background. Here is the css thanks!
#sticky {
padding: 0.0ex;
width: 100%;
clear: both;
color: #transparent;
font-size: 2em;
border-radius: 0.0ex;
background: url(/img/layout/menu.png) 38.5% 0% repeat-y;
border-radius: 0.0ex;
position: relative;
top: -3px;
Do you want the orange to go all the way across the menu? Instead of a background-image you could just use CSS.
background: #FE6900;
If you only want half of the menu or w\e to be that color, you could add a class like "orange-bg" to the li's that you want.
try change the position to absolute.
position: absolute;
I'm trying to build a website header that is semi transparent, and contains a semi transparent image that hangs outside the of the header div, like in the image linked below.
Because of overlapping opacities, I can't simply put a semi transparent image in to a semi transparent div and add a negative margin to the image. The best I could come up with was taking the height of the header image, and cutting that bit of the logo image, like in image attached. However that's not ideal, as doesn't play nice responsively etc etc.
Any ideas of how I might achieve this look?
Thanks in advance.
If you know the height of your menu then you can place both the logo and the menu inside of a container. Then position the logo with the top value equalling the height of the menu.
.header-bg {
background: rgba(225, 225, 225, 0.5);
position: relative;
height: 60px;
}
.header-bg .logo {
width: 90px;
height: 90px;
background: rgba(225, 225, 225, 0.5);
position: absolute;
top: 60px;
left: 10%;
}
See this fiddle: http://jsfiddle.net/3kxBt/1/
Hope that helps in some way.
This is an interesting problem and there are a couple ways to solve it; two come immediately to my mind.
The first is your method; carefully position things so that you don't have multiple translucent sections overlapping. This wouldn't be too difficult; if you go with this method I would recommend breaking the header into sections left and right of the image and using absolute positioning.
The second and easier way is to create a version of the picture with the semi-transparent white overlay you desire already applied. Then you can use that as the background for the menu and image. The only tricky thing here is you have to make sure the images line up by either using fixed positioning or calculated pixel offsets. This approach has been around for a long time and you can see any early example (2001-ish) of it here.
My take on it is to create a :before pseudo-element. It has its problems, including what if the logo changes in size at some point, but overall it works.
HTML
<a class="logo" href="#">
<img src="https://example.com/logo.png" />
</a>
CSS
nav a.logo {
position: relative;
...
display: inline-block;
line-height: 0.0001em;
font-size: 0.0001em;
}
nav a.logo img {
position: relative; /* for z-index issues. giving the image a relative
position automatically will place it above the
absolutely positioned :before element. This is
because the before element is rendered before the
image */
}
nav a.logo:before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 71px;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.4);
...
}
Demo: http://jsfiddle.net/ZP6LQ/1/show
Source: http://jsfiddle.net/ZP6LQ/1/
You can use rgba color format for background of both the .logo and the header to achieve your desired effect. However, you have to give position: absolute; to your .logo class because it needs to come right below the header. If you put your .logo on top of your header, then colors will overlap and won't look right. So, it needs to starts at the bottom of the header.
The header should have position: relative; so that your .logo is positioned relatively to the header. This way, you don't even need to know the height of your header because when you define top position of your .logo, you can simply use top: 100% so that it always starts right below your header. You don't have to hardcode that top value.
Now, you need to shift your actual logo (image) inside your .logo on top because its appearing below the header right now. For that you can simply push the image by giving it negative margin-top value.
SEE THE DEMO
The code would look like this:
HTML
<header>
<h1 class="logo">
<img src="/image/path" alt="logo">
</h1>
</header>
CSS
header {
background: rgba(255,255,255, 0.7);
position: relative;
}
.logo {
position: absolute;
top: 100%;
background: rgba(255,255,255, 0.7);
}
.logo img {
margin-top: -50px;
}
I'm setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje
However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.
The CSS for this is:
a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;
}
a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;
}
Think it's a silly answer but i can't find it...
Regards
The rules in a.tonijn:hover changes the area for the a element.
You need to add a child element to you a-tag and apply the background image to that element instead.
Try this:
Tonijn<span></span>
/* Selector changed */
a.tonijn:hover span {
background: url(tonijn.png) no-repeat;
height: 83px;
width: 106px;
top: -83px; /* Value changed */
left: -26px; /* Value changed */
position: absolute; /* Attribute added */
display: block; /* Attribute added */
}
When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'
Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like
height: 20px;
width: 20px;
And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go
I have a UI problem with some CSS that I was hoping to get some help with.
I have a div that has a background graphic (curved top edge image) that is causing me a problem. Within this div I have lots of other divs for headings and general content.
My code works in FireFox but not in IE 6 and 7. I have another background graphic that I need placing to the right, over the main background graphic but Im failing to get this working in IE6/7! it works in IE8
you can see my problem here, with IE the width of the curved red edge causes the content area width to be smaller. Firefox example (FF.jpg) is correct, the content area is full width.
http://www.jamesradford.net/images/IE6.jpg
http://www.jamesradford.net/images/FF.jpg
markup below:
<div class="RedCorner"></div>
<div class="header"></div>
<div class="tab-content">
css below:
.RedCorner {
float: right;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
margin-right: -25px;
margin-top: 1px;
width: 140px;
height: 40px;
}
Any suggestions?
Many thanks as always,
James
The reason this is happening is because IE has something called the double margin bug. Try using absolute positioning instead, firstly ensure the parent of .RedCorner has:
position: relative;
Then:
.RedCorner {
position: absolute;
top: 0;
right: 0;
width: 140px;
height: 40px;
background-image: url(/red_rounded.gif);
background-repeat: no-repeat;
}
I'm looking to have a full page image with a section of the image that, when hovered over, changes the image to a colored version of the original black & white image. I tried doing this with image maps & onMouseOver, but didn't have any success. There are only two images being used, a color and a black and white one.
I just want to have it so that when you hover over a section of the black and white image, the whole thing turns to the color version, and onMouseOut reverts back to the black and white. I'm using this as a splash screen for a blog and the hovered section will serve as a link into the site.
Thanks for the help
If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the border on the a is just for illustration). Tested in Firefox, IE7, IE8:
HTML:
<span class="img"></span>
CSS (EDITED FOR IE7-8 BUGS):
body {
margin: 300px 218px 178px 400px; /*see explanation below css*/
width: 22px; /*total width of a tag including padding and borders*/
height: 22px; /*total height of a tag including padding and borders*/
}
a { /*warning, do not give this position: use margin to position it*/
width: 20px;
height: 20px;
display: block;
border: 1px solid red;
overflow: visible;
/*deleted margin from this: moved to body*/
}
a span.img {
position: absolute; /*this gives it block display by default*/
top: 0;
left: 0;
z-index: -1;
background-color: yellow; /*bw image here*/
width: 640px; /*image width*/
height: 500px; /*image height*/
}
a:hover span.img {
background-color: blue; /*color image here*/
}
/*deleted the a:hover span.img:hover as it was not needed after all*/
Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the span:hover.
ADDED ON EDIT: I discovered that the a tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the left and top position the a tag, and the right and bottom must make up the difference in the image size minus the total width of the a tag.