|
CSS - Contextual Selector Help
I have three INPUT elements in a row and I want to apply different formatting to the second two. I know I can use:
input+input { } This affects all but the first of the INPUT elements, which is exactly what I want. However, this works only with NS/Mozilla, and not MSIE. There is a way to apply CSS based on words within the value of the element, but I'm not sure how it works. For instance in the code: <INPUT type="submit" name="Submit" value="Browse"> I think there's a way to say "apply this style if the word 'BROWSE' is present in the element", but I can't make it work. Also, I know I can apply a CLASS to the element, but I'd like to not touch the HTML and use strictly CSS if possible. Can anybody help with this? Thanks. Similar TutorialsIf i have the following html: PHP Code: <div id="centre"> <h2>Header</h2> <p>Lorem ipsum appareat definiebas has eu. Eam consul ancillae ex.</p> <p> Sumo percipit instructior te mei. Est diceret convenire periculis ad, id vix facilisis sadipscing.</p> <p>Ei per aeque petentium tincidunt, posse inimicus ad sit.</p> </div> I want to select the first letter within the first <p> element, I've tried to do it using double pseudo-elements: PHP Code: div#centre p:first-child:first-letter { etc. } But this obviously won't work, because the <p> ain't first. I realise that i could do it very simply by just giving the first paragraph a class, but the use pretty much requires contextual selection, It seems the equivalent of second:child (which is what i want) will be available in css3, Even ideas would be great, Cheers Hi everyone, Been racking my brains trying to figure out why a class is not being applied to a div, then i narrowed it down and realised that the ID selector is always taking precedence to the class attribute. Consdier this html page: Quote: <!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=utf-8" /> <title>Test Page</title> <style type="text/css"> #container { background-color: red; width: 100px; height: 50px; } .change_bg { background-color: green; } </style> </head> <body> <div id="container" class="change_bg" ></div> </body> </html> The div's background color comes out red and not green, as one would expect. Why is this happening? aren't styles supposed to be cascading? isn't that what CSS is all about? I can use !important but i want to know why it's not doing what is expected. Many thanks Is there a CSS selector that only IE5 will detect? I have my site working fine in IE6 and Firefox now and it displays legibly in IE5 but the padding is a bit off. Is there a selector I can use (such as * for IE in general) to make a change to the padding on IE5. Or should I be looking into loading separate CSS files dependent on the users browser? is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back. My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS? The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >) Thanks for any suggestions you might have. Mike ********* First page ******************* Code: <div class='view view-firstview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
******** Second Page ******************** Code: <div class='view view-secondview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
Can CSS select the first word in a Div? If so how? Example: first word in a pharagraph. Hello friends How can i define a css rule with an ID selector for two or more different ID's for an <div> element thanks Can someone help me with this issue? I've looked through the selector section of the CSS2.1 spec, but I can't find anything about it. Consider the following CSS excerpt (real life example): Code: #attachments table td, #attachments table th {
padding: 0 1em;
}
Lots of extraneous text in there, right? Isn't it possible to do something like this instead: Code: #attachments table (td, th) {
padding: 0 1em;
}
Or at least something similar? Can anyone help poor little me with this? Hi, I check my css file on 3wc. you will find the error messages/warnings and my css code in this link http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falicelee.no-ip.com&usermedium=all I did some research on ID selector. I still don;t understand understand why 3wc css validator cannot recognize ID selector... how should i correct the errors and warning? i have already done the html validation... it is error-free and valid in html 4.0 thanks I have a large data sheet with individual td IDs, numbered 1 to 49 (first 3 shown for reference). <td id="data_cell_1"> <td id="data_cell_2"> <td id="data_cell_3"> I have been trying to apply a style to all of them (No I don't want to use a class, because they override the id's don't they? Or could I apply both a class and id to an element?) td[rel~="data_cell_"]:hover{background: #87F0FF;} td#[rel~="data_cell_"]:hover{background: #87F0FF;} td[id~="data_cell_"]:hover{background: #87F0FF;} td#[id~="data_cell_"]:hover{background: #87F0FF;} None of those worked. Isn't there a way to select all ID's based on partial information? I'm a CSS newbie and have a basic question. It seems that the selectors class and id do ecaxtly the same thing. So this begs the question: Which one should I use and why is it better then the other selector? I see that both should not begin with a number (css1) and I am unclear about the requirement for the selector to be unique. Thanks Folks! using the sibling selector like this Code: p, h3
{
margin-bottom: 1em;
}
p + h3
{
margin-top: 2em;
}
should produce output like this (taking mrgin collapsing into consideration) Code: first h3 at top of page paragraph h3 with 2em gap to preceding paragraph paragraph secondary paragraph with 1em gap to preceding paragraph h3 etc but alas, the sibling selector does not work in IE6! so how do i do it otherwise, whilst retaining simple markup? Greets, I hope someone can help me achieve this in IE6. it should be simple (famous last words?) ... but am stumped right now: What I am trying to achieve: I'm trying to get a class displayed for a link in an unordered list (Ie: Have the "home" section highlighted when I'm on the index page and so forth) Html/cfm code: Code: ... <div id="LeftMenu"> <ul> <li><a href="./index.cfm" title="Home">Home</a></li> <cfif (GetAuthUser() neq "")> <li><a href="./index.cfm?action=edit_profile" title="Edit Profile" <cfif request.action eq "edit_profile"> class="l_menu_selected"</cfif>>Edit profile</a></li> <li> </li> <li><a href="./index.cfm?logout=1" title="Logout" style="font-size: 8pt; color: red; ">Logout</a></li> <li> </li> <cfelse> <li><a href="./index.cfm?action=create_profile" title="Create Profile" <cfif request.action eq "create_profile"> class="l_menu_selected"</cfif>>Create profile</a></li> </cfif> </ul> </div> ... The css bit that goes with it: Code:
#LeftMenu
{
width: 200px;
}
#LeftMenu ul
{
margin: 0px;
padding: 0px;
}
#LeftMenu ul li
{
margin-top: 2px;
margin-left: -14px; /*WHY ON EARTH does ie set me up with some kind of funky margin on the left I didn't ask for???*/
}
#LeftMenu ul li a:link, #LeftMenu ul li a:visited,#LeftMenu ul li a:active
{
display: block;
background-color:#99cdff;
height: 28px;
width: 170px;
vertical-align:middle;
line-height:30px;
margin:0px;
padding-left: 30px;
font-weight:bold;
font-size: 8pt;
background-image: url(../images/arrow.gif);
background-repeat: no-repeat;
background-position: left center;
}
#LeftMenu ul li a:hover, #LeftMenu ul li a.l_menu_selected, .l_menu_selected
{
background-color:#6fb2f8;
}
I gather my last selector is where it's FUBAR. When parsing the page, I can clearly see the class tag is displayed... but the desired colour doesn't show up. Code: <li><a href="./index.cfm?action=create_profile" title="Create Profile" class="l_menu_selected">Create profile</a></li> Our client uses IE6 exclusively, so... no matter how nice it looks in FF (too many good developing tools to pass it up)... i need this displayed properly in IE6. As a bonus: if someone can tell me why the <li>'s are shown by default with a left padding of 20px in IE (hence, me having to resort to "margin-left: -14px;") Hello, This is my first post at devshed and I must say I am more than excited to have found this community... I am having a css problem and I was hoping that someone might be able to help me? I am trying to add "styles" to my wysiwyg text editor... My editor plugin points to a css file to define the different "styles" for text. Currently it is working fine with the following code... all of the styles listed below in the css display correctly: Code:
/* Typography Styles */
ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6, ul.bullet-7, ul.bullet-8 {
padding-left: 15px;
overflow: hidden;
margin-left: 5px;
}
ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li {
list-style: none;
padding-bottom: 3px;
margin-bottom: 5px;
padding-left: 10px;
}
ul.bullet-6 li, ul.bullet-7 li, ul.bullet-8 li {
list-style: none;
padding-bottom: 3px;
margin-bottom: 5px;
padding-left: 22px;
}
ul.bullet-1 li {background: url(../images/typo/bullet-1.png) 0 5px no-repeat;}
ul.bullet-2 li {background: url(../images/typo/bullet-2.png) 0 5px no-repeat;}
ul.bullet-3 li {background: url(../images/typo/bullet-3.png) 0 5px no-repeat;}
ul.bullet-4 li {background: url(../images/typo/bullet-4.png) 0 5px no-repeat;}
ul.bullet-5 li {background: url(../images/typo/bullet-5.png) 0 5px no-repeat;}
ul.bullet-6 li {background: url(../images/typo/bullet-6.png) 0 2px no-repeat;}
ul.bullet-7 li {background: url(../images/typo/bullet-7.png) 0 2px no-repeat;}
ul.bullet-8 li {background: url(../images/typo/bullet-8.png) 0 3px no-repeat;}
pre {
padding: 10px;
background: #f6f6f6;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
blockquote {
display: block;
font-style: italic;
font-size: 120%;
line-height: 150%;
width: auto;
padding: 10px 20px 10px 20px;
margin: 15px 0;
background: #f6f6f6;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
blockquote.blue, blockquote.red, blockquote.green, blockquote.purple, blockquote.orange, blockquote.brown, blockquote.grey {
display: block;
font-style: italic;
font-size: 120%;
line-height: 150%;
width: auto;
padding: 0px 20px;
margin: 15px 0;
border: 0;
background: 0;
}
blockquote.blue{color: #0D507A;}
blockquote.red{color: #D12E2E;}
blockquote.green{color: #74A824;}
blockquote.purple{color: #9E0E87;}
blockquote.orange{color: #CC8300;}
blockquote.brown{color: #8B6846;}
blockquote.grey {color: #666;}
blockquote.quotes {
display: block;
background: url(../images/typo/quote-start.png) 0 5px no-repeat;
padding: 0px 20px 0 38px;
margin: 20px 0;
font-size: 120%;
line-height: 150%;
width: auto;
color: #666;
border: 0;
}
blockquote.quotes p {
padding: 0 38px 0 0;
margin-top: 0;
background: url(../images/typo/quote-end.png) 100% 100% no-repeat;
}
.important, .important-blue, .important-red, .important-green, .important-purple, .important-orange, .important-brown, .important-grey {
padding: 15px;
margin: 15px 0;
}
span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {
position: absolute;
display: block;
margin-top: -24px;
background: #fff;
padding: 0 8px;
font-weight: bold;
font-size: 120%;
}
.important {border: 1px solid #333;}
.important-blue {border: 1px solid #0D507A;}
.important-red {border: 1px solid #D12E2E;}
.important-green {border: 1px solid #74A824;}
.important-purple {border: 1px solid #9E0E87;}
.important-orange {border: 1px solid #CC8300;}
.important-brown {border: 1px solid #8B6846;}
.important-grey {border: 1px solid #666;}
span.important-title {color: #333;}
span.important-title-blue {color: #0D507A;}
span.important-title-red {color: #D12E2E;}
span.important-title-green {color: #74A824;}
span.important-title-purple {color: #9E0E87;}
span.important-title-orange {color: #CC8300;}
span.important-title-brown {color: #8B6846;}
span.important-title-grey {color: #666;}
span.number, span.number-blue, span.number-red, span.number-green, span.number-purple, span.number-orange, span.number-brown, span.number-grey {
display: block;
font-size: 170%;
float: left;
margin: 2px 10px 0 15px;
}
span.general_heading{
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px;
display: block;
height: 26px;
line-height: 26px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
span.number {color: #333;}
span.number-blue {color: #0D507A;}
span.number-red {color: #D12E2E;}
span.number-green {color: #74A824;}
span.number-purple {color: #9E0E87;}
span.number-orange {color: #CC8300;}
span.number-brown {color: #8B6846;}
span.number-grey {color: #666;}
span.highlight {background: #FFFBD5;padding: 1px 2px;}
span.highlight-blue {color: #0D507A;}
span.highlight-red {color: #D12E2E;}
span.highlight-green {color: #74A824;}
span.highlight-purple {color: #9E0E87;}
span.highlight-orange {color: #CC8300;}
span.highlight-brown {color: #8B6846;}
span.highlight-grey {color: #666;}
span.highlight-bold {font-weight: bold;font-size: 120%;}
span.dropcap, span.dropcap-blue, span.dropcap-red, span.dropcap-green, span.dropcap-purple, span.dropcap-orange, span.dropcap-brown, span.dropcap-grey {
display: block;
font-size: 260%;
float: left;
margin: 0px 4px 0 0;
line-height: 100%;
}
span.dropcap {color: #333;}
span.dropcap-blue {color: #0D507A;}
span.dropcap-red {color: #D12E2E;}
span.dropcap-green {color: #74A824;}
span.dropcap-purple {color: #9E0E87;}
span.dropcap-orange {color: #CC8300;}
span.dropcap-brown {color: #8B6846;}
span.dropcap-grey {color: #666;}
span.inset-left {
display: block;
color: #000;
padding: 15px;
float: left;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}
span.inset-right {
display: block;
color: #000;
padding: 15px;
float: right;
width: 20%;
font-size: 110%;
font-weight: bold;
font-style: italic;
}
span.attention, span.notice, span.alert, span.download, span.approved, span.media, span.note, span.cart, span.camera, span.doc {display: block;padding: 8px 10px 8px 36px;margin: 15px 0;}
span.attention {overflow: hidden;color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/attention.png) 10px 50% no-repeat;}
span.notice {color: #648434;border: 1px solid #9BCC54;background: #CDEFA6 url(../images/typo/notice.png) 10px 50% no-repeat;}
span.alert {color: #CF3738;border: 1px solid #FFACAD;background: #FFD5D5 url(../images/typo/alert.png) 10px 50% no-repeat;}
span.download {color: #1C6B8B;border: 1px solid #6ABCE2;background: #A8CDE3 url(../images/typo/download.png) 10px 50% no-repeat;}
span.approved {color: #666;border: 1px solid #a8a8a8;background: #ccc url(../images/typo/approved.png) 10px 50% no-repeat;}
span.media {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/media.png) 10px 50% no-repeat;}
span.note {color: #B79000;border: 1px solid #E7BD72;background: #FFF3A3 url(../images/typo/note.png) 10px 50% no-repeat;}
span.cart {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/cart.png) 10px 50% no-repeat;}
span.camera {color: #666;border: 1px solid #C5C5C5;background: #E6E6E6 url(../images/typo/camera.png) 10px 50% no-repeat;}
span.doc {color: #C76E34;border: 1px solid #FFBB65;background: #FFE0B6 url(../images/typo/doc.png) 10px 50% no-repeat;}
HOWEVER.... WHEN I ADD THE FOLLOWING "STYLES" / CODE TO THE CSS ABOVE... MY EDITOR ONLY RECOGNIZES A FEW OF THE ITEMS?!?! I WAS TOLD I NEEDED TO DO SOMETHING WITH THE CLASS SELECTOR NAMES? Code: .general_heading{
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg10.png) #3A3A3A repeat-x 0px 0px;
display: block;
height: 26px;
line-height: 26px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
.heading {
background: url(http://mysite.com/components/com_magazine/layouts/images/bg/bg9.png) #890605 repeat-x 0px 0px;
display: block;
height: 28px;
line-height: 28px;
text-indent: 8px;
font-size: 12px;
font-weight: bold;
color: #cccccc;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
margin: 0px 3px 3px 3px;
text-transform: uppercase;
}
/*side bar*/
/* The box sorrounding the side bar*/
div.box_sidebar{
background-color: #F7F7F7;
border: 1px solid #C0D5EC;
color: #333333;
float: right;
margin: 40px 10px 10px 10px;
padding: 10px 10px 10px 10px;
top: 40px;
}
div.sidebar {
float: left;
width: 29%;
}
img.user_image_class{
margin: 5px 5px 5px 5px;
}
/* article title*/
.article_title, a.article_title{
}
.background-image img{
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
}
/*author mini profile*/
.box_author{
background-color: #F7F7F7;
border: 1px solid #C0D5EC;
color: #333333;
margin: 30px 20px 20px 10px;
padding: 5px 5px 5px 5px;
}
/* descriptions*/
.description{
background-color: #ffffff;
color: #333333;
font-size: 12px;
margin: 3px 3px 3px 3px;
}
.description div p{
background-color: #ffffff;
color: #333333;
font-size: 12px;
margin: 3px 3px 3px 3px;
}
/*intro*/
.intro_horizontal {
background-color: #ffffff;
color: #333333;
display: block;
font-size: 12px;
margin: 5px 5px 5px 5px;
}
.quotes {
padding: 0 10px 0 10px;
width: 230px;
}
.quotes div {
background-color: #ffffff;
color: #333333;
font-size: 14px;
font-weight: bold;
}
.quotes img {
padding: 0px 10px 0px 10px;
}
/* Alignment of the text of the sidebar area*/
.sidebar_area {
text-align: left;
}
/* Alignment of the image in the sidebar area*/
.sidebar_area img{
float: right;
}
.sidebar_article_title {
background-color: #ffffff;
color: #666666;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
hr {
background-color: #ffffff;
color: #ebebeb;
height: 0px;
border-style: dotted;
}
TIA RYAN Hey everyone, I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover. PHP Code: <div id="footer" style=""> <div id="foot-left" style=""> <div id="cedia"> <a id="cedia-link" href="http://www.cedia.net/"> <img src="images/cedia.png"> </a> <p id="cedia-info"> Custom<br> Electronic<br> Design &<br> Installation<br> Association </p> </div> <div id="ochba"> <a id="ochba-link" href="http://www.gohba.ca/"> <img src="images/ochba.png"> </a> <p id="ochba-info"> Ottowa-Carleton<br> Home<br> Builders<br> Association </p> </div> </div> <div id="foot-right" style=""> <p>To contact us:</p> <address> Phone: 613-838-4800<br> Fax: 613-838-3800<br> Email: info@moorhousecabling.ca<br> 9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0 </address> </div> </div> Code: css
#footer{
float:left;
clear:both;
width:800px;
overflow:hidden;
height:140px;
}
#foot-left{
float:left;
clear:none;
width:216px;
height:100%;
}
#cedia{
font-size:small;
width:50%;
float:left;
clear:none;
}
#cedia-link:hover + #cedia-info{
display:block;
}
#cedia img{
margin-left:40px;
float:left;
clear:none;
border:0;
}
#cedia-info{
margin:0 0 0 40px;
padding:0;
display:none;
float:left;
clear:both;
}
#ochba{
font-size:small;
width:50%;
float:left;
clear:none;
}
#ochba-link:hover + #ochba-info{
display:block;
}
#ochba img{
margin-right:40px;
float:right;
clear:none;
border:0;
}
#ochba-info{
margin:0;
padding:0;
display:none;
float:left;
clear:both;
}
#foot-right{
float:left;
clear:none;
background-color:#e6232b;
font-size:x-small;
padding:20px 0 0 20px;
height:100%;
width:563px;
color:#ffffff;
font-weight:bold;
}
Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site. Any ideas or help would be greatly appreciated. I'm a bit confused about the class and id selector. It seems they both produce the same result. I've a book and it said that the id selector can be used once. Is that mean used once on the web page or on the css? <div class="content"></div> <div id="content"></div> Thanks. I want to know if ID Selectior for a class is avaible in css. I got many textboxes cssclass'es applied to .TEXTBOX_BLACK but I wantto add extra attribute to only Textbox10 something like overflow :auto; thanks much before any answers. regards. my attempt is below but ofsure not working: .TEXTBOX_BLACK { border-style : solid; border-width: 1px; border-color:Black; font-family: Tahoma; height:14px; width:140px; background-color: #414141; } .TEXTBOX_BLACK #TextBox10 { overflow :auto; } For a project I'm currently doing I'd like a set of quick reference sheets that I can print out of all the Selectors I have created in the various style sheets the site uses. I'd like to know if there is any program out there that can do this automatically for me, I really like the way TopStyle does it -- see attached image -- but there is no way to print this easily (other than doing a screenshot and making it fit on A4 in photoshop). I know I could do it by hand as I go but it would be sooooo much easier if there was something to do it automatically for me. Any help is greatly appreciated. -D Hey guys, I'm SURE this has been asked before but I just can't find it. Is there any way to use a * in a selector name to match multiple selectors? Something like this: Code:
row* { padding-top: 10px; }
Which would match all of the following: Code: <div id="row1"> ... </div> <div id="row2"> ... </div> <div id="row3"> ... </div> I'm thinking there's not, as the code above doesn't work. I'm thinking that the only alternative for dynamic ID names is in-line CSS styles, but I figured I'd ask just in case. Thanks in advance Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram |
|||||||