|
CSS - Question In <div> And Using <div> Specific Styles
If 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?
Similar TutorialsGreetings, 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. 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 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? Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: underline;
}
.leftnavtext A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. Hi, I'm trying to create a PDF of my site, and I want it to look EXACTLY like the site. Right now the links are coming out blue (instead of the color I've defined in my CSS), and the fonts are not displaying according to what I've defined in the CSS. Someone once told me that I can overlay the pages with a transparent gif and that would preserve my original CSS definitions. But I can't get that to work. If I add a <div> to the html page, in an effort to overlay a transparent image over the entire page, and then I convert it to a PDF, then in the PDF the big transparent image just moves to the bottom, underneath the rest of the page. Thanks to anyone who can maybe help. Laura S. I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc) thanks, --Lone i imagine this has to be one of the easiest questions, yet i have looked at tons of css table pages and cant find the answer. All im trying to do is create different styles for my tables on my website for example: Code: <table class="table1"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> <table class="table2"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> table 1 would have the following: black background white text underline text table2 would have the following: green background black text larger fonts the above colors are just an example, but my question is how would i do my CSS to support this if i wanted it to look this way? Thanks for any help. Ok so what is the css substitute for the valign tag? Thanks! Hi folks. I am in the process of creating a feature in our Web application to allow users to create and manage a set of simple HTML email templates. At the bottom of my editor screen I show a preview of the formatted email (with the text and HTML entered into a textarea field). My problem is that when I output the preview to the Web page, it inherits all the styles from the parent page (for example an <h1> header has colors and special spacing, etc.). Is there a way to temporarily disable then re-enable the CSS styles defined in the header of the page so I can draw the "preview" with default browser CSS styles which will reflect more what an eMail program would look like? I am not sure if this can be done. If it could, it would be awesome and save me from having to code a special preview page or iFrame for the email template. I need a way to apply a different style to IE6 and IE7/Firefox. The webpage renders as expected in IE7/Firefox but IE6 needs to be fixed. Here is a mockup of what I need to have: Code:
.featdesc
{
margin-left: 10px;
margin-top: 10px;
width: 400px;
text-align: justify;
if (ie6)
font-size: 11pt;
else
font-size: 10pt;
color: #505050;
}
Is there a way to accomplish this? What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red) Code:
<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
A
{
COLOR: red;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #993300;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
// here is the part I added a.one
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.one:hoover
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</style>
//end of what I added
{/literal}
Here is the html Code:
<td>
<a class="one" href="disclaimer.php">Disclaimer</a>
</td>
Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website. For example: in the style sheet css id "subnav" has background: #E8EDF5 and cssi id "subtitle" has background #E8EDF5 however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle". Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids? Hope I have made this clear. This is the website I am working on: http://www.rookscommunications.com/projects/naturalne/index.html Everything is working fine, except the footer. When I view it in FireFox, I'm all set, but most likely most people will be using IE and that's where the problem is. Any thoughts on the bug? I've tied many different things. ALSO... to kill two birds with one stone. Could you peek at my javascript for random images...every now and then it selects a blank image and that's no good. Many Thanks |
|||||||