|
CSS - Need Clarification For The Ul, Li Syntax...
Hi! I need some clarification on what the right arrow meant for the UL and LI
Code:
#dmenu li>ul {
top: auto;
left: auto;
}
Thanks... FletchSOD Similar TutorialsI was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document. In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3"> For each new paragraph the class p is incremented by 1. However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet. Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission? Can anybody explain to me how this affects those paragraphs? Can someone please explain to me the following construct? Especialy what does > and + means ? Thank you. Code: .menu ul>li + li {
border-top: 0;
}
All I want to know is, is there a problem with Geocities and CSS or IE6 and CSS? Hi guys, I have this: Code: <li style='background-image:url(../images/layout/listitem.png); background-position:0px " . $background . "px; height:23px; background-repeat:no-repeat;'> I want a hover effect, I found a w3c article 'http://www.w3.org/TR/css-style-attr' But copying the syntax just does not work? Any help? I keep getting an error but only when I run the site in IE8: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727) Timestamp: Fri, 13 Mar 2009 16:59:31 UTC Message: Syntax error Line: 1 Char: 25 Code: 0 It keeps pointing to this line of code at the top: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But if I don't use that the Divs and some CSS seem to break. With or without that code it works great in FireFox. I have no idea what's going on with this. Hello I would like to know the difference between: *name .name #name thanks 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. Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like. Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure. Here's a few examples of rules that I don't understand: Code: div#navigation #navigation .navigation a .body div#navigation > a I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV. What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?" No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more. Thanks for your help! Hello. I'm playing around with CSS and trying to learn it, but for some reason, I can't figure out why my code won't work. It's very simple, the site, and all I want to do right now is pub a small black border around my first DIV, "header-left" just for the heck of it. Code:
<HTML>
<HEAD>
<TITLE>Andy/s</TITLE>
<!--Style Sheet-->
<STYLE type=text/css>
header-left
{
border:1em solid;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="header-left">Hi</DIV>
</BODY>
</HTML>
I think it should work. I've tried em and px for the border and FireFox is still showing nothing. Any help? I'm open to anything! Ok, so I've done the w3schools.com tutorial on CSS and I still have some basic syntax questions. In my wordpress style.css I see the following entry: #featured-top .featuredpost img { background: #FFFFFF; margin: 0 0 5px 0; padding: 4px; border: 1px solid #DDDDDD; } Does this mean that these rules apply only to elements in this specific order? Like, in English, "rule applies to an img, that has a parent in the class featuredpost, that has a parent with id = featured-top"? If so, does the featuredpost class have to be defined previously or is this considered the definition? Second question, in the HTML I see this syntax: <div id="wpsb" class="widget wpsb_opt_in"> I didn't think you could have spaces in a class name. Or does this mean that wpsb is in 2 classes? When I search style.css I don't see the "wbsb_opt_in" class anywhere. Thanks I have searched but can't find a clear answer to what I suspect this is a noob question. please correct me if I am wrong. element#id ({} - applies to the element with id #id element {} - applies to all element that are in the block #id element.class {} - applies to all element with .class but what is .class element {} ? tia, Rand I went back to the Definitive Guide and found this covered in section 2.5.2. Descendant Selectors How to define a style so that I can just put <table class="abc"> and it will apply to both table, th, td together? currently i am using: table,th,td{ //style here } it work in all table, th, td. But i just sometimes want to write <table class="abc"> and it would apply in all cell within this table. so that I don't need to write <th class="abc"> , <td class="abc"> in every tag in same table. thx. Hi all, What does this mean? H1 A:link { color:#fff } - or - .sectionhead H2 { font-size: 12px; } I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question. Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case. I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions? Thanks to anybody who takes the time to answer! Laura S. Hi, I'm trying to use CSS and php includes to simplify my website admin. What I'm trying to do is create a banner area, a left column and a right column. Each section then calls another php page. I will eventually let the right column have the correct content instead of calling another page. My problem is that none of the basic formatting is being applied to my content. The menu.htm page in bold is also calling the style.css as is the c_index.php. I have tried seperating the layout CSS and the formating CSS but it did not make a difference. When I view both menu.htm and c_index.php in seperate windows they are affected by changes in the style.css! Would somebody be kind enough to explain where the error is? Here is my code: TEST PAGE Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title>Planet Phillip</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner"><?php include "header.php";?></div> <div id="leftcontent"><?php include "menu.htm";?></div> <div id="centercontent"><?php include "c_index.php";?></div> </body> </html> STYLE.CSS Code: a:active { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:link { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:visited { font-family: Verdana; color: #003300; font-size: 10pt; style="text-decoration none" }
a:hover { color:#0000FF; text-decoration }
.hline { height: 1; color: #003300; text-align: left; margin-top: -6; margin-left: 36; margin-bottom:0 }
.date { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-top: 0; margin-left: 36; margin-bottom: 0 }
.project { font-family: Verdana; font-size: 10pt; margin-left:60; font-weight: bold; margin-top:12; margin-bottom:2 }
.newsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:8 font-style:italic }
.newstext { font-family: Verdana; font-size: 10pt; text-align: justify; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.posted { font-family: Verdana; font-size: 10pt; text-align: right; margin-top:8; margin-bottom:30 }
.listtext { font-family: Verdana; font-size: 10pt; text-align: left; margin-left: 60; margin-top: 0; margin-bottom: 6 }
.tabletext { font-family: Verdana; font-size: 10pt; text-align: justify }
.listsitem { font-family: Verdana; font-size: 10pt;font-weight: bold; margin-left:48; margin-right:0; margin-top:12; margin-bottom:-12; font-style:italic }
.Mheader { font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: right; margin-top: 0; margin-bottom: -18 }
.Mlink { font-family: Verdana; color: #003300; font-size: 16pt; text-decoration: none; text-align: right; margin-bottom: 18 }
#leftcontent {
position: absolute;
left:0px;
top:150pt;
width:120pt;
}
#centercontent {
margin-top: 50pt;
margin-left: 150pt;
}
#banner { margin-left: 60pt; margin-top: 30pt;}
I'm wondering what's the word is called for setting the image width and height in CSS Code:
img.test
{
<<What's the keyword??>>: 10 px;
}
Thanks, FletchSOD Trying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} |
|||||||