CSS - Image Button To Rollover W/diff Color And Stay Active

Hi there,

I have an image rollover css script, but it will not understand a:active so is there a way I can use an inline a:active attribute?

Many thanks!

I found this CSS sample over the internet..
http://www.crafta.com/look1.html
look that it keeps the active menu yellow color, from the main list until the sub and sub-sub list
im triying to do some like that on my menu

http://www.crafta.com/te2.html

but no same result and i have no CSS skills... could you please take a look into that.. any help will be apreciated.

thanks

Hi Everyone,
I'm new to Dev Shed so appologises if I miss anything vital!

I'm also quite new to CSS, but do have some experience.

I am trying to develop a rounded corners, drop shadow solution for a header:


Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header??

The hoover div tag is:
a.nav:hover {background-color: #99CDFF;}

The nav images are gifs that do not change on rollover just the back ground color.

If I remove the hover div tag the strange chunk of border does not occur.

Can anyone advise why this may be happening? Or what I could do to improve this?

I am having this issue in IE6.0 firefox 2.0 seems fine.

I appreciate any help!

Thanks in advance,

Jon

Hello all,

Working on this page:
http://gatehouse.graffetto.com/rollover.html

When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div.

Any ideas how to rig this up for IE? Here's the simple version of the code:

Code:

<div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';">
	<div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div>
	<div class="storyByline">1/7/07 - By Max Bowen</div>
	<div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div>
</div>

any help would be great, thanks!

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

Ok here is the problem I have...
I have 3 DIVS....

DIV 1 is a container the centers the contents
DIV 2 I want to wrap tight around an image
DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left.

Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center.

here is the HTML i have...


<div id="div1" align="center">
<div id="div2">
<img alt="fddsffsd" src="image.jpg"/>
<div class='div3'></div>
</div>


and here is my CSS...

#div2 {position: relative}
.div3 {
position:absolute;
width: 80px; height: 80px;
top: 100px; left:20px;
background-image: url(transparent.png);
}

i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar.

i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript?

here's my page:

http://www.myspace.com/marx0i0

and here are some examples of what im trying to do:

http://bonrouge.com/test/fixed.htm
http://www.howtocreate.co.uk/fixedPosition.html

finally, here is my code:

<embed allowScriptAccess="never" allowNetworking="internal"
SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent">

thanks very much for any help!

Hi All,
I want to use images for a vertical navigation menu. I don't want to use background images, since I can't set width=100% with background images and I want the navigation panel to scale with em's.
Instead, I want to use image swapping with the z-index.
Rather than post my buggy solution and ask for help, maybe there is already a good sample I can work from?

I want to avoid using a table with one column for this.
I am new to CSS but here is my outline for what I am trying to do...
Basically I want some block divs going down the navigation column. Each div represents a menu button showing the "off" image until someone hovers over it and then the z-index changes, allowing the "rollover" image to show instead.
I would like the button div's to flow naturally down the column, but within each div I want to position the 2 images at top=0 left=0 relative to the button div.
Seems simple right?
Thanks for any suggestions or links.
Savoye

I tried to create a button with an outline color, but it doesnt seem to work. Does anyone has worked on outline property ,can u help me!!!

<button STYLE="outline: red solid thick">I'm a Button - CLICK ME!</button>

I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised.

The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he

I can't post an image of the menu as it won't let me, being a new poster, which is a pain...
Code:

#horiz-menu a:hover {
            display: block;
            z-index: 100;
            line-height: 22px;
            left:-53px;
            position: relative;
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            padding-left:63px;
            height:27px;
            width:162px;
            border-bottom:1px solid #fff;
            margin-bottom:-3px;
}

To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding.

However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over.

I've achieved this with:
Code:

#horiz-menu li.parent.active a {
            background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
            z-index: 100;      
            line-height: 22px;      
            left:-53px;             
            position: relative;      
            padding-left:63px;      
            height:27px;     
            width:162px;      
            border-bottom:1px solid #fff; 
 }

The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left...

I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too.

I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do?

If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it.

Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated.

How can I set the color inside a radio button. background-color won't work. it sets color around radio buttons. I tested color, it is not working for this as well.

hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like:

Code:

<div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>

And css for that part of the page is:

Code:

#index .box .column3 {width:252px;}

I am trying to implement the below code for my own page.
The issue for me is I don't know how to get the background image to overlay the link text.

Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible?

Live demo of example:
http://www.tutorio.com/media/css-tutorials/rollover-example.htm


Code:

<div class="rollover">

<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>

Code:

.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

I've tried adding an image between the <a and </a> and tried to change that when hovered.

Code:

<a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a>

Code:

a.img.testimage:hover {
background-position: 0 -40px;

}

how do i have images rollover? ie when the mouse i NOT on the image its img1 and when mouse is its img2?? i cant work that out

cheers

actually i have sort of done it but with some problems:

Code:

a:link, a:visited {
	background: url('images/offlinks/contactus.jpg');
}
a:hover {
	background: url('images/onlinks/contactus.jpg');
}


</style>
</head>

<body>

<a href="whatever">  hello        </a>

it works if i put any text where hello is! but thenthat background has text so it makes it unreadable?
Code:

.contact a:link, .contact a:visited {
	background-image: url('images/offlinks/contactus.jpg');
	text-decoration:none;
	color:#CED3DB;
	font-size:25px;
}
.contact a:hover {
	background-image: url('images/onlinks/contactus.jpg');
}

in the book doing this would make the links in contact class have that image but it doesnt work?