|
CSS - Content Dependent Highlighting In Css?
I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking.
It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12. What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it? Similar TutorialsHello all, I have a problem that i have been searching to solve for the last few days and whilst i have found out alot of info i have not been able to find the answer. I know little css but do use some.... im a beginner so be gentle on me A friend of mine has 2 urls, ie: 2 servers... one for .co.uk and one for .com, the website is identical on both sites so any changes made to the html can be uploaded to both sites simultaneously to avoid any problems etc. The .co.uk site has just been made able to accpet Paypal but the .com site wont be changed for many months yet. What i need to achieve is a clickable banner image at the side that can change depending on what site ie .co.uk or .com that the user is on, so if they were on .com it would show a clickable image stating to go to .co.uk site if you want to pay by paypal and if on the .co.uk site it would just show an image saying we now accept Paypal... Whilst i understand what i need to do this i cant work out how to do it.. help would be appreciated. My idea = 1. get website host name 2.if not on this site display image 1 3.if on this site display image 2 seems simple but i would like it to use code like i use already in a div that i am displaying pictures with atm. Like below. <div style="Z-INDEX: -3; POSITION: absolute; WIDTH: auto; HEIGHT: 60px; TOP: 200px; right: 20px"> <a style="display:block;height:60px;width:150px;" href="removedurl.co.uk" alt="Paypal on removedurl.co.uk" title="Paypal Accepted"><img src="images/paypalother.gif" /></a><br/> </div> If anyone has any idea how to do this please help before i go bald Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color. A simple way to implement row highlighting is: <TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';"> however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover. Any help? Hey everyone, the admins have implemented a new hack to the forums, allowing you to post your code with nicely coloured text rather than just the normal black or the old php stuff. More details can be found he http://forums.devshed.com/t279108/s.html Html code: [hig hlight=html4strict]your code here[ /highlight] For example: html4strict Code: Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>
The same goes for CSS highlighting: [hig hlight=css]your code here[/high light] css Code: Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }
As you can see from the thread I linked, there are many many other languages supported, but these three examples are more likely to be used than any other in this particular forum... Have fun with it, and please do use this feature, I'm sure it will make things much easier for us to read/understand, rather than just posting chunks of code. Enjoy! --Jon. Is it possible to define a style (color) for all instances of a certain word, say " blue " by means of CSS only? That is, not defining anything in the HTML code. If the above is not possible, how to highlight the word "blue" using the least amount of tags in the HTML code? H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? My Goal: using an onmouseover, highlight the mouse-overed table cell red and highlight another table cell green. Code:
<head><style type='text/css'>
.cell1 { background-color: #cccccc; }
.cell1_over { background-color: #ff3366; }
#other_cell { background-color: #cccccc; }
</style></head>
<body>
<table>
<tr>
<td class='cell1' onmouseover='this.className="cell1_over";' onmouseout='this.className="cell1";'>words</td>
<td id='other_cell'>more words</td>
</tr>
</table>
</body>
OK - the above code will change the first cell from grey to red no problem. What I want is to not only make the first cell grey but also the other cell turn green under the same onmouseover. How might I go about this? Thanks in advance! Hi all, I am trying to prevent the highlighting of text on my site only on a product description. I currently employ techniques using the BODY tag, but I believe this is doing more harm than good because it does not allow highlighting/cutting in any other areas. I have seen some class(es) on other sites where highlighting was not permitting ONLY in the product description (a table) Is there a way to disable highlighting of text "IN A TABLE" via CSS or JAVA, and without the tricks of transparent layers and IFrames? Thanks much in advance I am 99.99999% sure that there is no way to do this in pure CSS but just in case. I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state. Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it. Thanks. hi there, i am currently designing a page for a client, where i use menu highlighting (active, hover, focus). the menu is arranged in a list with two sublevels. -> menu top 0 -> level 1 -> link 1 -> link 2 etc... my aim is to let only the currently active menu be in a different color than all the others. what actually happens is that all submenus as well are highlighted. her is the code: Code: #right ul.menu,
#left ul.menu {
margin: 0;
padding: 0 0 0;
list-style: none;
}
#right ul.menu li,
#left ul.menu li {
margin: 0 !important;
padding: 0 !important;
background: none !important;
}
#right ul.menu li a,
#left ul.menu li a {
padding: 4px 0;
display: block;
border-bottom:1px solid #dadada;
text-decoration: none;
outline: none;
color: #666;
}
#right ul.menu li a:hover,
#right ul.menu li a:active,
#right ul.menu li a:focus,
#left ul.menu li a:hover,
#left ul.menu li a:active,
#left ul.menu li a:focus {
color: #FE642E;
border-bottom:1px solid #dadada;
text-decoration: none;
background:#fff;
}
#right ul.menu li.active,
#left ul.menu li.active {
color: #FE642E;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li.active a,
#left ul.menu li.active a {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
}
#right ul.menu li ul,
#left ul.menu li ul {
margin: 0;
padding: 0;
list-style: none;
}
#right ul.menu li li,
#left ul.menu li li {
padding: 0 0 0 10px !important;
list-style: none;
}
#right ul.menu li li a,
#left ul.menu li li a {
font-size: 92%;
font-weight: normal;
background: url(../images/arrow.png) no-repeat left !important;
padding-left:10px !important;
border-bottom:1px solid #dadada;
color: #666;
}
#right ul.menu li li a:hover,
#right ul.menu li li a:active,
#right ul.menu li li a:focus,
#left ul.menu li li a:hover,
#left ul.menu li li a:active,
#left ul.menu li li a:focus {
color: #FE642E;
}
#right ul.menu li.active a:hover,
#left ul.menu li.active a:hover {
color: #FE642E !important;
text-decoration: none;
font-weight:normal;
border-bottom:1px solid #dadada;
background:#fff;
}
URL i have added a screenshot to visualize the problem, the only link in orange should be 'Menu A'. thank you in advance, sebastian Hey, I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work: my CSS styles: .question_indent { text-indent:-10px; padding-left: 10px; } .popupmenu p{ color: white; font-size: 0.80em; display: block; padding-left: 6px; padding-right: 6px; margin-top:0px; margin-bottom:0px; } Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google). function subhighlight(obj) { if (subhighlighted!=null) { //unhighlight last link subhighlighted.style.background = ""; subhighlighted.style.color = "#f7f7f7"; } subhighlighted=obj; if (subhighlighted!=null) { //highlight current link subhighlighted.style.background = "#f7f7f7"; subhighlighted.style.color = "#376092"; } } Here's some of my menu item code: sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>' sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>' I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks Greetings I'm sure if I was cleverer I could figure this out for myself, but... Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but... So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color. What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu. here is the css: Code: // the image grid
#left {
float: left;
height: auto;
text-align: center;
width: 810px;
}
#left ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#left ul li {
text-align: center;
width: auto;
float: left;
margin-right: 15px;
height: 200px;
margin-bottom: 15px;
}
#left ul li a {
text-decoration: none;
color: #000000;
display: block;
}
// the nav menu
#right {
height: auto;
width: 150px;
float: left;
}
#right ul {
width: 150px;
list-style-type: none;
margin: 0px;
padding: 0px;
float: right;
}
#right ul li {
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
}
#right ul li a {
text-decoration: none;
color: #000000;
line-height: 38px;
width: 135px;
display: block;
padding-right: 15px;
}
a.home:hover {
background-color: #C6CED0;
}
a.bio:hover {
background-color: #B4C2A1;
}
a.gallery:hover {
background-color: #B4B281;
}
a.review:hover {
background-color: #9A8F62;
}
a.current:hover {
background-color: #AF8459;
}
a.past:hover {
background-color: #AA8050;
}
a.contact:hover {
background-color: #8A9B93;
}
...and here is the html: Code: <div id="left">
<ul>
<li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
<li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
</ul>
</div>
<!--end left -->
<div id="right">
<ul>
<li><a class="home" href="armin.html">Home</a></li>
<li><a class="bio" href="#">Landscape</a></li>
<li><a class="gallery" href="#">Plein-Air</a></li>
<li><a class="review" href="#">Non-Objective</a></li>
<li><a class="current" href="#">The Figure</a></li>
<li><a class="past" href="#">The West</a></li>
<li><a class="contact" href="#">Comics</a></li>
</ul>
</div>
<!--end right -->
Sorry for the long post, but I hope that makes sense... Thanks in advance for any help. The new version of the website I work on is now structured using CSS to position divs, whereas the old site was done entirely using tables. The thing is, it's no longer possible to select the text properly now its inside div tags - many of the other divs get highlighted completely, and the target text gets highlighted in an unpredictable manner - whereas on the old site, with its table format, this was not a problem. Please help! http://digitalspline.com/projects/gameCitadel/ if you left click to the left of the layout, it highlights all the text. Anyone know why? is this possible with CSS? So when the carat is focused on a form field the field is highlighed maybe by changing the border color... or background color. very much like the macromedia support site. http://www.macromedia.com/support/ I have a feeling though... it might involve a bit of javascript? Cheers in advance Rob Everyone, I'm having an issue with the first DIV intensive site I am doing: IE will not recognize links or allow me to highlight text, or fill in forms in the left side of DIVs that I have on a site I am developing: httP://www.ephire.com/mack If you try and click the "more" link up top, or goto the "contact" link, no joy in IE, but Firefox works just fine: Here is the code I think is the culprit: Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale); And here is the whole page. I'm seriously stumped...I tried going through and deleting things line by line and jacking with settings, and the only thing that allowed anything to work was messing with the section of code above. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MACK Insurance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
* html #wrapper {
background: url(images/body_t.gif) 24px 0px no-repeat;
backgro\und: none;
}
* html #ie {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_t.png');
height: 39px;
width: 434px;
position: absolute;
margin-left: 24px;
}
* html #body {
background: url(images/body_bg.gif);
backgro\und: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body_bg.png', sizingMethod=scale);
}
.footerie {
display: block;
disp\lay: none;
}
.footer {
display: none;
disp\lay: block;
}
</style>
<![endif]-->
</head>
<body>
<center><table><tr><td> <div id="ie"></div>
<div id="wrapper">
<h1><a href="/"><img src="images/logo.jpg" width="200" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content"><div>
<font face="Arial" size="2"><b>Health, Life, Disability</b></font>
<br>Designed Benefits Associates is dedicated to finding the best health care program to suit the needs of a family or individual. <br><br>Our specialty is paired programs that protect not one, or two, but multiple areas of life. <a href="index_01.html"><img src="images/btn_more.gif" width="52" height="6" alt="more" /></a>
</div></div><!-- end content -->
<div id="page_title">
<img src="images/title_main_page.gif" width="47" height="200" alt="main page" />
</div><!-- end page_title -->
<div id="news"><div><div>
<font face="Arial" size="1"><b>Things to Consider</b></font>
<img src="images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>04-20-2006</p>
<p>As your insurance broker, we daily search for the best priced health plans with the optimum benefits, so you can spend time doing what's important.<br><br><br></p>
</div></div></div><!-- end news -->
<div class="clear"></div>
</div><!-- end .inner -->
<div id="footer">
<img src="images/footer.gif" width="435" height="196" alt="footer" class="footer" />
</div><!-- end footer -->
</div><!-- end body -->
<div id="paper">
<div class="inner">
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Health</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Life</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a>
<br><br>
<font face="Arial" size="2"><a href="http://www.ephire.com"><b>Disability</b></a></font>
<a href="http://www.ephire.com"><img src="images/picture_4.jpg" width="130" height="74" alt="picture 4" /></a>
<p>A single plan can add peace of mind, all three together can insure stability.</p>
<center><font face="Arial" size="1"><a href="contact.html"><b>Contact</b></a> - <a href="index.html"><b>Home</b></a> - <a href="testimony.html"><b>Testimony</a></font></center>
</div><!-- end .inner -->
</div><!-- end paper -->
</div><!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" >
</div></td></tr></table></center>
<center><br><table><tr><td> <br><br><br><center>Powered by <a href="http://www.ephire.com">ephire</a></center></td></tr></table>
</body>
</html>
Any help is appreciated~ I'm making a page with what amounts to footnotes 1 . Some sources may be referenced more 2 than 2 once 2 , and when any of them is hovered over, I'd like all items in the same class to be highlighted 3 , so when i hover over this little number three 3 , I want this next number three 3 and the actual reference down below to all change color. Is there any to do this without using javascript? (I don't care if it doesn't work in IE6 - I know that has hover issues... 4 ) 1 - Like This! 2 - that one was used 3x 3 - This is red and so are all the little #3's up there 4 - I'm just using Firefox Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken |
|||||||