|
CSS - Simple Rollover Effect And Alignment Question
Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left.
thanks in advance. Similar TutorialsMy current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
I am having trouble getting the widths to work right. I got this code off the site and I am not sure what all it does. There are about 4 or 5 places that you can adjust the width. Can some one check out the CSS below and let me know what all it does. Code: body
{
margin:50px;
background-color:#ffffff;
font:13px Arial;
}
#nav, #nav ul
{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
}
/* now lets get rid of position:relative for IE */
* #nav, * #nav ul
{
padding: 0;
margin: 0;
list-style: none;
}
#nav a
{
width: 82px;
display: block;
color: black;
text-decoration: none;
background-color: white;
border: 1px solid #000000;
padding: 5px;
font:12px verdana bold; /* N6 needs this to cascasde the font style */
background:url(menubg.jpg) no-repeat 0px 0px;
text-align: center;
}
/* BMH for IE 5 */
* html #nav a
{
width: 95px;
w\idth: 95px;
}
#nav li
{
float: left;
width: 90px; /* width of the individual bars */
position: relative;
}
#nav li ul
{
position: absolute;
left: -999em;
width: 95px;
}
#nav li a:hover
{
color: #FFFFFF;
background-color: #B40820;
background:url(menubg.jpg) no-repeat 0px -40px;
}
#nav li:hover ul, #nav li.sfhover ul
{
left: auto ;
}
#nav ul
{
text-align: center;
display: block;
}
Here is the site (Test Menu) it is on currently. I want to make it centered in the table any ideas? Pretty much I am a newbie to CSS and JS and I was hoping someone could outline the CSS a little better and let me know what it does. Thanks James as you can see on: Click Me when you hover over the links on the menu the height of the box changes since it is set to auto, is there a fix so it doesn't move? i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button Hi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks question about onmouseout effect using css my question is if i move the mouse over an image which is a link to get any effect i can use a:hover{ } lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none; <img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ... #home{ display: none; } #about{ display: none; } ... only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be visiblerowhomeimage:hover{ #home.visibility: visible; } which would show the invisible image on mouse over for home, aboutus etc... please advice if my code is correct. thanks. Having trouble with using CSS for email link. The problem is that mouse hover produces a black background - this is the intention. However, after clicking on link to open email client, the link (on that page) doesn't have the balck background effect. Other pages in the site are OK - until I click them once. Am I missing a section from the css file below that would give me the same hover effect even after the action of clicking the mailto: link has been done? Many thanks a:link.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:visited.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:hover.link1 { color: #CDBC75; text-decoration: none; background-color: #000000 } a:active.link1 { color: #CDBC75; text-decoration: none; background-color: transparent Hey there dev pepz Does anyone know why this little rollover code doesn't work in ie6 but works fine in Firefox? (background changes) PS: Background is originally #777777; CSS: Code: div.cat-div a:hover div.cat-left,
div.cat-div a:hover div.cat-right {
background:#829DB9;
cursor:pointer;}
HTML: Code: <div class="cat-div"> <a href="http://domain.com/gallery"> <div class="cat-left">gallery</div> <div class="cat-right">click here</div> </a> </div> Thanks heaps Hi ! Me again :P So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself: (view-source for xhtml and css) http://fotoz.hit.bg/test/menu.html The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ? And most importantly why does it occur? Thanks! p.s I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below. It works but I get the flickering with visibility:hidden and even if i just move the img out of the way I am not liking CSS atm. I have spent nearly 3 hours actually on trying to get a rollover to work. I've tried a IRC channel but all the help I've gotten is how to do a image rollover with one image and/or with text. Here is all I want. It's very simple. I want to have a image rollover (the image changes when the mouse moves over it) for several different images. I want to do it in CSS. Code:
#seeallseries
{
background: url('navpictures/seeallseries.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
#seeallseries:hover
{
background: url('navpictures/seeallseriesHover.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
That's my CSS code that I have right now. How do I use that to make a image rollover. I can do Code: <div class="navbar"> <ul id="seeallseriesul"> <a href="http://www.google.com"><li id="seeallseries"></li></a> </ul> </div> Ignore the other CSS code for the moment. Right at that, it works. The image rollover happens. However I need a link which that does not provide. Is what I'm trying to do impossible? Please tell it's not. This should be simple but it's not for me. Thanks for any links or help. Ok, this is a problem I've never bothered fixing but I'm sure it's something simple. On virtually every horizontal CSS rollover menu I've ever built, IE7 always leaves a tiny artifact of the rollover background color on click. Here's my latest example(I'm using IE8's compat mode, but I've checked this in IE7 itself before): http://tinyurl.com/y6uf4zd CSS and XHTML are both valid. Here's the code I always use (but customize for the project): Code:
#navbar{
position:absolute;
top:162px;
left:47px;
width:448px;
height:26px;
color:white;
font-size:.75em;
}
#navbar ul{
margin:0;
padding:0;
color:#FFFFFF;
white-space:nowrap;
}
#navbar li{
list-style-type:none;
display:inline;
}
#navbar li a{
display:block;
float:left;
margin-left:8px;
text-decoration:none;
padding:.4em .75em;
color:#FFFFFF;
}
#navbar li a:hover{
background-color:#CCCCCC;
}
#navbar a:link, #navbar a:visited{
color: #FFFFFF;
text-decoration: none;
}
Go ahead and click a menu item in FF, and then click one in IE7. It never fails. IE7 always leaves a piece of the hover background-color to the right of the LI element. If you highlight the navbar, they go away... but it's very annoying. Lemme know where I n00bed. Thanks all. So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? Hi Guys, I'm trying to get a messaging app done and I need the CSS polished up. I understand CSS enough to hack my way through it, but for some reason I can't get the following done. Here's what I'm trying to create. This will be placed within an existing div that is 550px wide. I see 5 total divs that need to be created. The containing div, which is the thick border around the entire image. The profile pic div the name div the timestamp div the message div The containing div can't be height restricted. The profile pic div, name div, and timestamp div need to stay at the top. The message div will need to grow (height-wise) div.view_message_block { width: 550px; (or 100% since the containing div is already set to 550px?) margin: .5em .5em .5em .5em; display: inline; } div.view_message_profile_pic { width: 75px; display: inline; float: left; } div.view_message_sender_name { width: 80%; display: inline; float: left; } div.view_message_date { width: 20%; display: inline; } div.view_message_body { width: 80%; display: inline; } -------------------------------------------------------- Any help or guidance will be appreciated! Don't want it done for me, but I'm not sure where to go from here. I would like to have a sidebar that vertically stretches to the height of its wrapper div. The sidebar contains two divs (a menu and a graphic) one of which is aligned to the top of the sidebar and one of which is aligned to the bottom. Thus when the sidebar stretches vertically, the space in between the menu and the graphic stretches. I currently have a floated sidebar with a fixed width and relative postion. That sidebar is in a wrapper div that is also relatively positioned. There is a menu and a graphic (#mascot) inside of the sidebar. My current CSS only allows the sidebar to be vertically as big as the two items in it. Here is my CSS: Code:
#wrapper {
padding:0px;
margin:5px auto 10px auto;
border:solid 1px white;
border-collapse:collapse;
width: 800px;
height:100%;
position:relative;
}
#sidebar {
margin:0px;
padding:0px;
width:220px;
float:left;
background:url(_images/team/bg_nav.jpg);
position:relative;
}
#sidebar #menu {
margin:0px;
padding:0px;
border:solid 1px #000;
}
#sidebar #mascot {
margin:0px auto;
padding:10px;
text-align:left;
background:url(_images/team/bg_mascot.jpg);
font-size:10px;
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
border:solid 1px #000;
}
#mainContent {
margin:0 2px 0 222px;
background:#FFF;
padding: 10px;
}
#footer {
margin:0px;
padding:0px;
width:100%;
background:url(_images/team/bg_footer.jpg);
font-size:10px;
font-weight:normal;
color:#FFF;
text-align:center;
}
I would really appreciate any help as I am relatively new to CSS. If the code is confusing I'd be happy to expound on anything. Thans in advance, Brian I want some text aligned left, then some text aligned center, then some more text aligned right all on the same line. Should I use tables, divs, or is there a better way? Thanks its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution? if you go here http://www.zahra-zahra.com/fullpage.html you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely? now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side. btw: the menu will be stored in database Hi... I was just wondering.. when u have something like: margin:5px 10px which side does the 5px and 10px apply to? thanks in advance This is simple (I think) -- I'm a bit new to CSS and still learning, so I really appreciate any help you guys have to offer. I have this page - vitalmodels (DOT) com/V3/ The columns on the right/left, the backround extends past the bottom graphic. I basically need the bottom graphic to be at the literal bottom of the div container so that it closes off the box cleanly. I have tried vertical align/bottom/baseline to no avail. And this is only in mozilla/safari as well... Any suggestions? Also, a second question. The 3 columns (divs) in the main area, are within a single container div... they don't push that container down when populated with information, and merely overlap... right now I have the container set to a height in order to look decent, but when it's set to "auto" the content in the columns seems to do nothing. Again, I REALLY appreciate any help I get here... thanks again. -Ryan This is the code if you need it - PHP Code: #index_left_column { padding: 0px; float: left; height: auto; width: 194px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; left: 16px; background-image: url(images/index/left_column_bg.jpg) and PHP Code: <div id="index_left_column"> <p><img src="images/index/left_column_featured_female.jpg" alt="" width="194" height="26" /></p> <?php include("inc/m_female.php"); ?> <p><img src="images/index/left_column_featured_male.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_male.php"); ?> <p><img src="images/index/left_column_featured_photog.jpg" alt="" width="194" height="25" /></p> <?php include("inc/m_photographer.php"); ?> <p><img src="images/index/left_column_bottom.jpg" alt="" width="194" height="7" /></p> </div> Hello Guys, I have the following problem with my .css: #pagerank { margin: 20px 0 20px 0; padding: 8px; width: 225px; float: left; background-color: #F6F8F9; border: solid #eee 0px; background-repeat:no-repeat; background-image:url(top3.jpg); I need this background-repeat:no-repeat; to be in the same line as this: background-image:url(top3.jpg); kind of like this: background-image:url(top3.jpg) no-repeat; but I dont know how to format it correctly how do you do it? Best Reagrds, Brill http://www.invalidheart.org/test/ works in IE fine, but in FF the background and the footer stay up at the top, when it should be scrolling down with the rest of the content. any ideas? Thanks in advance. |
|||||||