|
CSS - Highlighting All Instances Of A Certain Word
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? Similar TutorialsSeems 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. 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? 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 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 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 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! 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? 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 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'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 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~ how i do that again? I have a div using width Code:
div.contain {
width:200px;
font-style:italic;
}
Say, I have a long word such as: Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu If i have multiple words, they will break after 200px width. Is there any CSS tag that will contain long words? I was just wondering if there is an option in CSS to set a word limit? -bpatrol I'm trying to output a html to word so that it can be edited and printed. Every thing is working fine except that when I print out the document it has margins of about 3cm. I'm unable to change this attribute. I would have thought I could add the following style definination: body { font-size: 10pt; font-family: Arial, Helvetica, sans-serif; margin: 0px; } but it doesn;t seem to make any difference. Has any one done something similar? |
|||||||