|
CSS - Hovering Over X But Affecting Y
A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction.
Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. Similar Tutorialsi have two p tags one after the other.. <p>text</p> <p>text</p> and I did: Code:
#head p {
float:left;
margin-top:2%;
font-style:oblique;
font-size:150%;
color:green;
}
#head p+p {
float:right;
font-size:75%;
color:red;
}
the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct? After months of scrutinizing different layouts for http://what-is-what.com, I've pretty much settled on modifying a layout that I found at this address: http://www.positioniseverything.net...example/borders I'm having a problem with arranging the header without using tables. The site logo should be on the far left side, and to the right of it a search form. When I float the logo left, the content of the page left aligns itself with the right edge of the logo. My test code (displaying this problem) can be found he http://what-is-what.com/tests/june2007-leftalign.html How can I have the float not affect the rest of the page? I'm currently going through these tutorials to learn more about floats: http://www.brainjar.com/css/positioning/ http://www.westciv.com/style_master...yout/index.html I'm led to believe that I must use "clear", but I'm not sure where. I currently making a website to learn about web design and I have made a javascript selection menu which displays perfectly when the code is on a page on its own: http://www.ukhomefurniture.co.uk/test/mouseovertest.php However, when I implant the same code on the full page on which I want it to appear it goes haywire with large gaps all over place, I have managed to get it down to a small gap between the top menu and splash image. A colleague I work with suggests it may be down to the PHP affecting. Can anyone advise how I can fix it so the gap is removed: http://www.ukhomefurniture.co.uk/test/indextest.php I have a demo page setup. It renders exactly how I want it in Firefox, in regards to position, same for Chrome. With IE, if the page has a .html extension, it also renders correctly. But when I switch it to the .cfm extension, it shifts over to the left. Correct http://66.201.102.200/design/demo.html Incorrect http://66.201.102.200/design/demo.cfm I've looked around, and I'm just not sure what could be breaking it. Any ideas? Nevermind! I figured it out. With Coldfusion, I didn't have it setup to suppress white space. The application.cfm file had all kinds of white space, and when it was included dumped about 100 lines of white space in the rendered file. Once I cleaned that up, it worked. Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas? <code> /* CSS Document */ body { margin: 0; padding: 0; background-color: #000; color: white; font-family: "Lucida Grande"; font-size: x-small; } table.outer { border:1px solid #fff; width: 178px; } /*.left { float: left; } .right { float: right; }*/ table { clear: right; width: 700px; line-height: 1.4em; border-collapse: collapse; border: 1px solid #000; color: white; background: #000; font-family: "Lucida Grande"; font-size: x-small; }</code> Here is some code I've started for a project. It is for IE 5+ and uses filters. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body id="bodyid" bgcolor="f3f3f7" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no"> <script language="JavaScript1.1"> function resizePage(){ windowHeight = (document.getElementById('bodyid').clientHeight - 60); document.getElementById("bottomTable").style.height = windowHeight ; } </script> <style type="text/css"> .tddrop { filter: progid:DXImageTransform.Microsoft.dropShadow(Color=DDDDDD,offX=3,offY=3,positive=true); border: solid #c0c0c0 1px; background-color: #ffffff; } .spacer{width:15px} </style> <table border="0" bgcolor="#34487E" style="width=100%" cellpadding="0" cellspacing="0" > <tr valign="top"> <td style="height:50" valign="middle" > <!--- Top bar including left image ---> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" > <tr> <td> <!---- image here... ----> </td> <td style="width:100%;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=1, StartColorStr='#34487E', EndColorStr='#C5D1E1')"></td> </tr> </table> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> <tr> <td style="height:10;filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#f3f4fa', EndColorStr='#9997b5')"> </td> </tr> <tr><td style="height:1" bgcolor="#7c7c94"></td></tr> </table> <table id="bottomTable" border="0" style="width:100%;height:300" cellpadding="0" cellspacing="12" > <tr> <td class="tddrop" style="width:180;"> </td> <td class="tddrop"> </td> </tr> <script>resizePage();</script> </body> </html> Notice that between the two colums, the <td>'s are not lining up at the bottom. If you remove the shadow filter they line up fine. Anyone have an idea why this might be so? Thanks Hi everyone, So I've been coding for years and had drawn away for the design/css part, so I need some refreshing. I've tried the greater than / less than "operators" between selectors in my css declaration but to no avail. Basically what I want to do is example: Code: <form><!-- really doing this basic just to show the point -->
<fieldset>
<!-- inputs here -->
</fieldset>
<fieldset>
<fieldset><!-- ### nested fieldset inside fieldset, don't want to affect these child selectors -->
<!-- input bla -->
</fieldset>
</fieldset>
</form>
So as you can see in my brief exampl above, there's two parent selectors and one child inside the second one. I only want to change the properties of the parent ones, so that a fieldset INSIDE a fieldset doesn't get affected, and I was hoping anyone here might be able to shed some light on how to achieve this. Many thanks I have an index.php page which has a <link> to style.css. The style is applied just fine to content in index.php, but if index.php includes content from other php files using include(); statements, this included output ignores the stylesheet. I have tried putting a <link> to the stylesheet in the included php files, but this does nothing. Can anyone help? Thanks! Code: <link rel="stylesheet" type="text/css" href="style.css" /> I have the navigation set so that the background turns green on the current page. When you hover over the other links they turn green. However, I do not want the active link to change colors when it is hovered over. How do I stop this from happening? http://brittanyrubinstein . com/fulcrum/index.html I used a script from Dynamic Drive that allows the user to change font on demand (They can size up/down the font on the website). But I ran into problems in that this spilled over to increasing the fontsize of the links (only A but not not rollover). I would prefer that the links are not affected by this script. I would rather the links stay with the sizes I specified in the CSS. Please see the website here to understand what my problem is: nudipu.org.ug/nsites. My intension was to make it as perfect as it is on their sister site add.org.uk Can somebody advise me please? The script I used is located on http://www.dynamicdrive.com/dynamicindex9/textsizer.htm Thank you folks. Hi Folks, I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well. I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck. Suggestions? Thanks in advance! P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice. please please somebody help me with this... i have given my links some effects with this code: Code: <style type="text/css">
<!--
a img {border: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; border-bottom:3px double; color: #000000;}
a.head,
a.head:link { text-decoration: none; }
a.head:hover { text-decoration: none; }
//-->
</style>
it works fine on my links, but the class "head" doesn't seem to be effecting the link with that class....it still has the same hover effect as the other links. I have class="head" in the link tag of the element, but it still doesn't work. I want no effect on this link since it is an image and I don't want a double-underline on it. The only thing I can think of is that maybe the head image isnt being effected correctly because it is an include file, but I don't think that really matters. Thanks! We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder). I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it. Here's the way part of the original file is set up: /* Images */ div#specialties ul li a.hospitality span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.hospitality:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } And here's what I changed it to: /* Images */ div#specialties ul li a.apartments span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.apts:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } Help! You can check out the current look at Connell Insurance dot com. . I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here. I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs. In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect). I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions? I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case... With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach. Thanks. If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS. I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute. It must be so simple, but I'm waaay too stressed to get this to work. :[ When hovering over a link, how can I make the underline thicker? Check out this site. link Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone |
|||||||