|
CSS - Parents And Classes And Tags.... Oh My!
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. Similar Tutorialshi, is this the proper way to do this? i'm trying to have every link with certain properties and then have classes define specific links. it works, but i wonder if this is the proper way to do so. Code:
a:link{color: #0000dd; font-family: tahoma; font-size:12px;}
a:active{color: #0000dd; font-family: tahoma; font-size:12px;}
a:visited{color: #0000dd; font-family: tahoma; font-size:12px;}
a:hover{color: #0000ff; font-family: tahoma; font-size:12px;}
a.big {font-weight:bold;}
thank you 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. 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. ok here is the question. i have done two websites, i have tested them out in multiple browsers and all seemed fine. When i test them in IE the text runs into to image. I am using div classes to control the image. Any insight on why this is happening would be greatly appreciated and hints or solutions would be more then welcomed. I am banging my head against a will trying to figure this out. Thankyou All I've been trying to clean up my code and in the past I never seemed to make use of predefined html element tags like the H1-H6...and instead I just find that I just make a new class but I was wondering if there is anything wrong with using the H-tags in place of a few classes? Obviously it would have to make logical sense to use, but I'm wondering if there has been any changes in how browsers use those tags in the past few years as I wouldn't want to be using an outdated, soon to be phased out element. heya this doesnt seem to work the second class complety overwrites the first ? id like it to append the second one ? any ideas eg main.css .main-header-back { background-repeat: no-repeat; background-position: 793px 0px; overflow: hidden; } index.php .main-header-back { background-image:url('/images/main/image.gif'); } Hi people, critique this piece of code for a yellowheader and a blue id and tell me what the problem is. It seems both end up as black <style type="text/css"> h3.Big Bird{color:yellow;}/*Class Font#CookieM{color:blue;}/*Id*/ </style> <h3 class="BigBird">Big Bird</h3> <font Id="CookieM">Cookie Monster</Id> Hope to hear from you soon. kaz If i set an id to a transition like so: Code:
Code:
<html>
<head>
<style>
#trans {
opacity:100;
transition: all 1st ease-in-out;
}
#trans:hover {
opacity:0;
}
</style>
</head>
<body>
<img src="myimage.jpg" id="trans" />
</body>
</html>
Then it works fine, but if i use the class ".trans" instead, it doesnt. Im looking for a way to use a style more than once on a page and classes are the only way i know how to do it. Any help? Hello, I have 3 type of h2 headers on my web site: 1 - Post titles on a blog (Ex: <h2>New documents available for download</h2>) 2 - Content section title (Ex: <h2>Contacts</h2>) 3 - Sidebar content section title (Ex: <h2>Publicity</h2>) I am trying to build my CSS to style the 3 different headers but I am having some problems. I could use: h2.Post, h2.Content and h2.Sidebar or: h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar or even: h2 (for Post), h2.Content for content and then h2.Sidebar to change Content class so it fits Sidebar. So a section in sidebar would be: <h2 class = "Content Sidebar">Publicity</h2> Could someone help me in deciding how should I structure my classes? Thank You, Miguel Hi, This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code: Code:
td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}
Any ideas? thanks in advance. Hello, I am creating a message to display on my web sites. The HTML markup is as follows: <div class="Error"> <h3> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon" style="border-width: 0px;"> <span>Header</span> </h3> <p>Description</p> </div> And the CSS: div.Error { background-color: #FFD9D9; border: solid 1px #FF9595; padding: 0.4em; position: relative; min-height: 1.25em; width: 120px; } div.Error h3 {} div.Error h3 img {vertical-align: middle;} div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva, sans-serif;} div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-serif; I have 3 types of messages: Warning, Error and Success. The only difference between the CSS of each message is the colors properties. Should I use a class named Message to define all common properties and then 3 other classes: Error, Warning and success to define the color properties: <div class="Message Error"> Or should I use three different classes? How is this usually done? Any other advice on how I am building my message is welcome to. Thanks, Miguel is it possible to use two classes for one element. I want to use two classes for one element I thought perhaps it is possible not to create another class to combine both of them. perhaps there is a form of superclass and subclass in css. hey all, i have a image which is a link and i wanted to change the blue box around it to something more inkeeping with the site. So i did this css Code:
a.greenToblack {
color:#000000;
font-size:13px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.greenToblack:link {color:#000000; font: Georgia;}
a.greenToblack:visited {color:#000000; font: Georgia;}
a.greenToblack:hover {background-color:#667138; color:#667138; font: Georgia;}
and impletmented it as so Code: <a class="greenToblack" href="product.php?range_id=<?php print ($row->range_id) ?>"><img src="images/tmbnail/<?php print ( $row->tmbnail )?>" width="75" height="75" border="2"></a> it works perfectly in FF but not in IE..... any ideas why?? thanks RF I cant seem to get my cellpadding working for tables, what do i have to input. I have tried: .header {background:#2D759F; width:100%; cellpadding:5} all the others work, jus the cellpadding which does not. I have a series of image buttons with rollovers that are generated in CSS so I've applied a class to each like this: <a class="homebutton" title="Home" href="#">This is the Home Button</a> This works great but I now would like to apply a second class to the href that calls an animated scroll function from a javascript file. I've tested the function on a simple button and it worked perfect: <a href="#divtwo" class="scroll">Scroll Down</a> What I would like to do is essentially combine the two so that it would be something like: <a class="homebutton" title="Home" href="#divtwo" class="scroll">This is the Home Button</a> But when I do that it ignores the "scroll" class and simply jumps to the #divtwo location on the page without the animation. Ideas on how to have two classes on one button? Any help would be GREATLY appreciated! I have encountered a really annoying bug in IE6 and would be very interested to know if anyone else hase encountered it and found a solution. Look at the following example: PHP Code: <!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" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="screen"> .class1,.class2,.class3 { border: 1px solid black; width:400px; line-height: 100px; text-align: center; } .class1 { background: none; } .class2 { background: red; } .class3 { background: blue; } .class1.class2.class3 { background: black; } </style> </head> <body> <div class="class1">Test Content 1</div> <div class="class2">Test Content 2</div> <div class="class3">Test Content 3</div> <div class="class1 class2 class3">Test Content 4</div> </body> </html> The four divs should all be different colours as follows: div1: transparent/white div2: red div3: blue div4: black However, both divs 3 & 4 are black. The rule: .class1.class2.class3 { background: black; } is incorrectly effecting divs with only .class3. Any ideas? www. cooperworkskilns.com/kilns.html Two things: The .section classes (images and borders in the middle) are not stretching the width of the parent <div> in IE. Do I have to specify a width with IE? The margin below the images in the .section classes is greater than what it should be. (noticeable when compared to FF) CSS: #subnav { margin: 15px 0px 0px 10px; padding:0px; } .section { width: 51em; border: solid #999999 1px; padding: 10px; margin: 0 0 10px 0; overflow:hidden; text-align:left; } .section img, img a { float: left; border: solid #999999 1px; margin: 0 10px 0 0; } I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css i have <div class="h">this is type 1</div> <div class="h offer">this is type 1 with backgroundA</div> <div class="hd">this is type 2</div> <div class="hd offer">this is type 2 with backgroundB</div> how do I achieve the CSS for accessing only divs with a class of h AND offer? thanks in advance Hi, I'm trying to use multiple classes: div class="class1 class2". As usual, IE 6 does all but not what you would expect. Please allow me to post a code snippet: Code:
<html>
<head>
<style type="text/css">
.class1 {
background-color: red;
}
.class2 {
background-color: green;
}
.class1.class2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="class1">
.class1 -- should be red
</div>
<div class="class1 class2">
.class1.class2 -- should be yellow
</div>
<div class="class2">
.class2 -- should be green
</div>
</body>
</html>
Sadly, the rule for .class1.class2 is also applied to the third div, where it should clearly NOT apply, so it is yellow instead of green. I know that using subclasses "is not safe for IE", as is CSS in general -- but is there a workaround that doesn't force me to abandon the technique? Thank you, answers appreciated! |
|||||||