|
CSS - Is This A Simple Syntax Error In My Css Code?
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;}
Similar TutorialsI 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. I'm teaching myself CSS and enjoying it, but I run into problems every now and then that I'm having troubles with. In my table I call <td class="corner">, but the bgcolor tag I set in my CSS sheet is not being picked up. I've run my code through the validator and it tells me that my line Quote: property bgcolor doesn't exist : #666666 This is my CSS code: Code: td.corner {
bgcolor: 666666;
height: 30px;
width: 15px;
}
I've played around with this, it seems simple but can't see what I'm missing. ANy help would be appreciated! Thanks! Hi, I am trying to center my page wrapper. It centers in FF, but not IE. I just cannot see what is wrong. This is my CSS: PHP Code: body{ margin: 0 auto; } #wrapper{ width: 900px; margin: 0 auto; } Any ideas? http://lovemeforme.org/index.php?wptheme=Scarlett+Orange if you scroll down to where it has "themes" on the sidebar, you notice the last one isn't a link and says "scarlett orange." Why does it not go past the image bullet like the others, how can I fix that? any ideas? thanks in advance. Hi all, Has anyone received a Line: 0 Parse error - Unrecognized : } with the rest of the CSS document validated under W3C validator? I can't work out why it's not happy. The beginning of my CSS is: /* This is the only CSS for the Waste RE3 website */ a:link { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #008000; text-decoration: none} a:hover { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #FF9933; text-decoration: underline} a:hover {color: ##AECBE1} a:link {text-decoration:none; color: #000000} A:visited{text-decoration:none; color: #000000} P {text-align:justify;font-size:8pt} Font {text-align:justify; font-size:7pt} h1 {font-size:24pt} h2 {font-size:18pt} BODY {SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #eeeeee; SCROLLBAR-ARROW-COLOR: #d8d8d8; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #eeeeee; } ^All in middle.css what's wrong with it? Ok, when I view my page, the justified part and everything else works, but the link wont change color when my mouse goes over it. WHY?!?!?! Hi, Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width. Here is the link: http://www.i3design.com/test/ Here is the CSS: Code:
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }
body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }
div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */
div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }
Can anyone help. Also, is this well coded, or is it inefficient? James 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 am getting a CSS validation error It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; } If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar. My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out. I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one! Thanks for your help. Hello I would like to know the difference between: *name .name #name thanks 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 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. 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. 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 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! 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. I 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? 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 |
|||||||