|
CSS - Css Selector Question - Setting Styles For Parents Of Specific Children
Greetings, friends!
I have a quick question about CSS. I am fairly versed in CSS 2.0 and the selectors that are used within. However, I am not sure if any specific type of selector is available to help me do what I want. I am looking for a selector that will define styles for an element that contains specific children. To give you an example, let's say that I have an image on my page. That image is assigned the class of "alignleft". Now, let's say that I make that image into a link. I would like to find a CSS selector that allows me to assign style definitions to that link. Let's say my code looks like: Code: <a href="http://www.example.com/"><img src="example-pic.png" class="alignleft" alt="Example Picture" /></a> Now, I know if it was the other way around: Code: <a class="alignleft" href="http://www.example.com/"><img src="example-pic.png" alt="Example Picture" /></a> I could use something like: Code: .alignleft > img However, I am not sure if there is any way to go up a level in CSS. I would envision it looking something like: Code: a < img.alignleft but I can't find anything in the CSS spec that refers to instances like that. Does anyone know of anything? For instance, I would want a spec that looks something like: Quote: E < F - Matches any E element that is the parent of an element F. The specific reason I'm looking for something like this is that I am using the class of "external" to assign a background image to all of my links that lead away from our Web site. However, if that link is an image rather than text, I want to set the background of my link to "none" so that the background image does not interfere with the image itself. Any help would be greatly appreciated. Thank you. Similar TutorialsIf I want to have all of my <td> flags to look a certain way within a <div> tag but not anywhere else how do I define the style to do this? Don't know if I got the language right on the headline? I've got the following css for my forms: .form table { border-collapse: collapse; color: black; border: 1px solid black;} and the markup looks like this <table class="form" width="100%" cellspacing="0"> however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class... any ideas... good http://www.rickweston.com/my_ucwdc/membership/register.php bad http://www.rickweston.com/judge/about_judge/index.php thnks for any help Code:
<?php
if currentpage != account.php {
$_SESSION['links'] = "display:none;";s
}
?>
then on the external css file i have:
#accountLinks {
<?php echo $_SESSION['links']; ?>
}
?>
\accountLinks id is joined with the submenu. the problem is when i view the main.css from the browser it doesnt display the value of session['link'] but that line... hey i'm trying to get the arrow on the select field to be colored as well as the scroll bar when the options drop down. any help? Is it possible to set link styles that are defined inside of a heading tag... for example, h1 a:link{bleh} h1 a:visited{bleh} h1 a:hover{bleh} I tried it... but it doesn't want to go, I'm thinking I might have to think of another solution I have a unique problem: I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:
<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>
which works, but only in firefox, and not IE7, or Google Chrome. I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should 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 Hi! Let's say we have this situation: Code: <div> <div class="second"> </div> </div> Is there a way to grab in CSS the first div with the help of the class second? I mean, something like this: div .second (now I get the second div but I want the first). I don't think it is possible... that's a real pity. Im I wrong? Thanks! 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 I am having no luck using this rule to set text with-in the body tags correctly. body{font-family: sans-serif; font-size: 11px; color: #CC0000} This line will set the color and family of the text but it doesnt effect the typeface's size or any other parameters either. I have tried both pt's and px's but no luck. When I use the <span> configuration for text all is fine. But when I use a rule as above something doesn't work. Any ideas? Thanks I'm doing this little look and feel thing to a Drupal site. In order to really do this I had to fire up a play Drupal on my testbed. Here's the testbed: http://chamber.colleenweb.com The top menu (where the tabs are horizontal the menus pop down) they want the sub menus not to cover up any of the main menu text when you mouseover them. I don't know absolutely where the bottom is, because it's height is based on how much text they have in the parent so I'm not sure how to do it. As you see the first menu tab has just one line, and its submenu naturally pops up where they want it. The second one, however has two lines of text, and so its popup obscures the lower part of the main menu tab's text. What do I override in the styles and what do I override it to? I'm using the Drupal nice_menus module. Here are the styles that come with it: http://chamber.colleenweb.com/contrib/modules/nice_menus/nice_menus.css And here is what I have overridden so far in my skin's style Mainly torquing the width, moving the arrow to the top, and taking away the borders. I tried torquing the height but I could not get a fixed height that looked good in both IE and FF. Code: ul.nice-menu-down li.menuparent {
background-position: right top;
}
ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over{
background-position: right top;
}
ul.nice-menu-down li li.menuparent{
backgroundi-position: right top ;
}
ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over{
background-position: right top;
}
ul.nice-menu,
ul.nice-menu ul{
border-top: 0px;
}
ul.nice-menu li {
border: 0px;
}
/* style for nice down menus color font etc. */
ul.nice-menu-down li a {
font-family: Lucida Grande, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
line-height: 13px;
color: #003366;
width: 96px;
}
ul.nice-menu-down li {
width: 111px;
}
Oh and one more question, How do I make the very top graphic not have any blue border on it (only problem on IE on FF it is fine) I've heavy handedly 0px all the margin padding border and and it's still there. Tip of the tongue syndrome: What is the CSS selector that affects all elements, again? I remember it being "*" or something I want to apply a thin border to everything on my layout so I can see where the positionings have gone. I'm working on this vanity site for myself, and don't have a lot of experience doing table-free layouts. But I've seen the benefits of it firsthand and want to start doing it for everything. An image of the layout I'm aiming for can be found here. The main problem I'm having right now is that when I put child <div>s into a parent <div>, the parent doesn't expand vertically. My main div that contains everything is "frame". Within "frame", there's "content_bg", and within "content_bg" there's "side", "blog" and "footer". I'm wanting all this to be centered and scaled 100% vertically, but I know that's a pain so I'm setting everything up first. - If I don't have the position property set to "fixed" or "absolute" in frame, it won't expand to contain the children. It will be 0px high. - If I don't have the position property set to "fixed" or "absolute" in content_bg, it has the same problem. - I can only set one or the other. Setting both expands content_bg, but not frame. - Sidepanel seems to have this problem too, but I haven't even started to try and fix it. Page CSS css Code: Original - css Code body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #000000; background-image: url(assets/img/bg_stripes.gif); background-color: #2F2920; margin: 0px; } a { color: #544545; text-decoration: underline; } a:hover { color: #000000; text-decoration: none; } p { text-align: justify; } h1 { color: #2d5659; text-decoration: none; } #frame { background-image: url(assets/img/bg_frame.jpg); width: 996px; padding-right: 66px; padding-left: 66px; background-repeat: repeat-y; position: fixed; /* Without this, the background won't show for some reason */ } #frame #content_bg { background-image: url(assets/img/bg_main.jpg); background-repeat: repeat-y; } #frame #content_bg #blog { float: left; width: 540px; top: -30px; left: 20px; position:relative; } #frame #content_bg #side { background-image: url(assets/img/bg_sidepanel.jpg); position: relative; top: -66px; float: left; width: 275px; } #frame #content_bg #me { background-image: url(assets/img/me.jpg); background-repeat: no-repeat; float: left; width: 275px; height: 228px; } #frame #content_bg #header { background-image:url(assets/img/What-Happened-Final_06.jpg); background-repeat: no-repeat; float: left; width: 589px; height: 294px; } #frame #content_bg #side #linklog { position: relative; left: 29px; top: 2px; width: 208px; height: 248px; overflow: auto; } #frame #content_bg #side #linklog ul { margin-left: -35px; list-style-type: none; font-size: 12px; padding-bottom: 10px; } #frame #content_bg #side #linklog a { display: block; margin: 2px; padding: 3px; width: 176px; background-color: #E0C187; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #linklog a:hover, #frame #content_bg #side #linklog a:active { display: block; padding: 3px; margin: 2px; width: 176px; background-color:#F3D193; border-bottom: #CEB07A 3px solid; } #frame #content_bg #side #photolog { position: relative; left: 8px; top: 42px; width: 210px; height: 248px; } #frame #content_bg #side #photolog img { width: 58px; height: 58px; float: left; margin-top: 10px; margin-left: 10px; } #frame #content_bg #footer { background-image: url(assets/img/bg_footer.jpg); width:565px; height:218px; position: absolute; bottom: 0px; left: 366px; }
body {
Any help and/or constructive criticism would be very greatly appreciated. when i edit my CSS file and when i use classes, i use multiple ones. for example, for the top paragraph it a div right after my <h2>, i say Code: <p class='notopmargin aligncenter green'>Blah blah blah</p> should i be making classes specific to this kind of paragraph? like Code: <p class='greencentertop'>Blah blah blah</p> which way is better? my thought is that i am using a bad habit, because it will be hard to use when i am coding a new paragraph unless i know exactly what i do every other time. on the other hand, reusing classes makes the file smaller and the loadtime for my site will be faster. thoughts, any1? I am converting a working table layout to a better div layout. One problem is that the height of the rows, which in a table layout would effectively be the height of the tallest cell, is being set to 0 in my divs. I basically have this nested structure Code:
<div id="tabl" style="position:absolute;">
<!-- not important, this is basically a container div--!>
<div class="row" style="position:relative;">
<!-- important, relative is the only way i know
how to arrange children by % values --!>
<div class="cola" style="position:absolute; left:25%; width:25%;">
</div>
<div class="colb" style="position:absolute; left:50%; width:25%;">
</div>
<!-- more cells --!>
</div><!--closes the row --!>
<div class="row"><!-- same as above, the structure repeats--!>
</div>
</div>
that's not a copy/paste of the actual code, just an adaptation highlighting what's important. The columns align perfectly, the problem is that the height of the rows is 0, and so the rows all overlap. Setting the height of row to 100px proved this basically. I could set height to a value large enough so that overlapping becomes unlikely, but I would much prefer to have the height automatically assume the value of the height of the tallest child, much like auto, but available to an element whose position is relative. if you want to see a live model of the actual code you can see it at: http://www.drfool.net/test/articles/ As you can see, the rows overlap. If there is no way to solve this problem in the way I described, I'm open to suggestions (so long as they don't involve table layout and/or something silly like frames) thank you PS, it's 5 in the morning and I'm going to sleep. I'll verify any suggestions in the afternoon when I wake up. Side note, that entire wing of the website is basically dead, so no need to tell me "the links don't work, the images don't load" UPDATE: Ha ha, the code works exactly as desired in IE (IE ignores height:100px, which is actually what I wanted in this case, to demonstrate my problem, irony) but not in FF3, which is my target browser. UPDATE: made the code more clear This seems odd to me to even bother putting this up here, as I'm guessing it is a simple fix. I'm familiar with css and html, so I hate to post this, but it is a pressing matter that I'm drawing a blank on. I'll post the HTML and CSS below, as I don't have a live location I can place it as an example. Hopefully someone will pop open dreamweaver and take a few minutes to help me out The div 'main' contains the divs 'rightColumnPartners' , 'mainContentPartners', and 'leftColumn'. However, main does not push down to contain the content of those children divs. Maybe I'm missing something elementary and simple, but it seems considering main encompasses these divs, it should stretch downways to contain the content within them. Below is the HTML and CSS, again I apologize for not having an example page up, but it is pretty basic and should be easy to visualize. ---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <link href="main.css" media="all" rel="Stylesheet" type="text/css" /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="keywords" content=""> <meta name="description" content=""> <title>Test</title> </head> <body> <div id="topSection"> </div> <!--close of topSection --> <div id="header"> <div id="mainnavigation"> </div> <!--close of mainnavigation --> </div> <!--close of header --> <div id="main"> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <div id="leftColumn"> </div> <!--close of leftColumn --> <div id="rightColumnPartners"> <div id="mainContentPartners"> <h2 class="darkHeader"> Partners </h2><br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner </h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Two</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Three</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Four</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> <h2 class="darkDescriptionBold">Filler Partner Five</h2> <h2 class="darkDescriptionPartners">This would be the first partner and the information that pertains to them. Fill this spot with appropriate descriptive content and possibly contact information for the partner.</h2> <br /> </div><!--close of mainContentPartners --> </div> <!--close of rightColumnPartners --> </div> <!--close of main --> <div id="footer"> </div> <!--close of footer --> </body> </html> ---------------- @charset "UTF-8"; /* CSS Document */ /**********************/ /* CONSISTENCY CODE */ /**********************/ * { margin: 0px; padding: 0px; font-size: 24px; } /**********************/ /* POSITIONING CODE */ /**********************/ #mainnavigation { background: #1E0F08; height: 36px; width: 100%; } body { height:100%; background: url(bg_gradient.jpg) SaddleBrown repeat-x; } #homecontainer { width: 100%; height: 100%; /*height: auto;*/ position:relative; } #topSection { width: 1000px; height: 30px; background: #754221; margin: auto auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; } #header { background: url(header_bg.jpg) repeat-x bottom; height: 123px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; } #titleimage { margin-top: 0px; padding-left:0px; float: left; left: 0; position: absolute; } #main { width: 1000px; /*background: #703b1b;*/ background: red; margin: 0 auto; border-width: medium; border-color: #432306; border-left-style: solid; border-right-style: solid; clear:both; } #leftColumn { width: 20%; margin-left: 0px; position: relative; background: black; height: 100%; height:600px; border-width: medium; border-color: #432306; border-right-style: solid; float: left; } #rightColumnPartners { width: 70%; float: left; background: white; } #mainContent { margin: 40px auto 0; background: url(../images/solutionsProven.jpg) no-repeat; width: 619px; } #mainContentPartners { margin: 40px auto 0px; /*background: url(emptybackground.jpg) no-repeat #FFDFB9;*/ width: 611px; background: blue; } #footer { background: #190B08 ; height:67px; border-width: thin; border-color: #d29553; border-top-style: solid; border-bottom-style: solid; position:relative; clear:both; } .darkHeader { color: #edbb8a; font-size: 90%; font-family: "Arial","Trebuchet MS",sans-serif; padding-left: 15px; padding-top: 10px; } .darkDescriptionBold { color: white; font-size: 14px; font-family: "arial","helvetica",sans-serif; font-weight: 800; padding-left: 20px; padding-right: 15px; width: 90%; } .darkDescriptionPartners { color: white; font-size: 12px; font-family: "arial","helvetica",sans-serif; font-weight: 200; padding-left: 20px; padding-right: 15px; width: 70%; } ----------------- Thanks again. ~SS Pretty much what the title says. I have a parent div that I fill up up floating div's using javascript, but the parent won't grow. Only ie7 is a problem. To see the problem... Link is here... http://esteemforthehome.stealthwd.c...electedPageID=7 Add a couple products to the cart, click on "View Cart"... Filling in shipping info and click "Calculate Shipping". Its the "viewCartShippingOptions" div that doesn't expand. Thanks in advance hello, this will perhaps sound like a crazy thing to do, but i am trying to style my nested list(s) in order for the 'category' to appear below its children. so rather than having, for example sport football cricket formula one i have football cricket formula one sport the reason for trying this is that i am hoping to display my lists at various positions along a base line (over a bg image) and certain positions within the image require the category name to be under the 'children'. is it possible though? i tried making the inner list's position to be relative and adjusting the top position to -20 etc but of course this brings the children up rather than push the category down. here is an example of my nested list Code: <ul> <li>sport <ul class="up"> <li>football</li> <li>f1</li> </ul> </li> <li>music <ul class="up"> <li>stuff</li> <li>stuff2</li> </ul> </li> </ul> it probably isn't possible but i thought i would ask before giving up on the idea completely. thank you for your time 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? Can CSS select the first word in a Div? If so how? Example: first word in a pharagraph. |
|||||||