Bule
-
Posts
18 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Bule
-
-
I only need to post here to fix my own problems.
Actually, I asked about CSS tools in a different post and Deirdre's Dad showed me the Firefox Inspect tool on the Web developers menu in Firefox. That helped me figure out that there was a display:block
style associated with that element. I'm not sure what the attribute does, or why I put it there, but deleting it fixed this problems and didn't seem to break any other styling I had, so I muddle forth...
-
-
I was wondering if there was a tool or utility that one could run against a CSS file (or maybe CSS and the HTML combined) and it would show which CSS selectors applies to every component of the HTML? In other words, if I have this
table{width:100%;}table, tr, td {background-color:blue;}body{font:seriff;}I'd like the tool to show what markup applies to the text in a table cell. Inheritance and cascading is kicking my butt....
-
Please refer to my example below. I apologize for the length of the example, I tried slimming it down, but did not want to leave out any of the markup elements that may affect what I'm trying to do. There are two tables. I'm trying to get the top row of the table to stretch over the entire 4 columns of the table, have a slightly darker background and slightly different formatting to stand out. In the first example, it is as if the colspan attribute is ignored. Or something else frames the term. In the second example, the background applies only to the text, but the border of the cell is not colored. Id there some way I can get the background effect of the first table in the single-column appearance of the second table? Thank you/
<!DOCTYPE HTML ><html> <head> <title>title</title> <style> body { /*background-color:#FEFAF2;*/ background-color:#ffffff; color:black; font-size:1em; font:"sans-serif"; } h1 { color:#A0522D; } table { width:100%; } table, th, td { background-color:#FDF5E6; border-collapse:collapse; font-size:14px; border:1px solid #000000; padding:4px; } .crpl { margin-top:2em; margin-bottom:2em; margin-right:5em; margin-left:1em; } .term{ color:#A0522D; font-family:sans-serif; font-size:150%; line-height:150%; background-color:#E0E0D0; width:100%; display:block; } .col_arg{ width:10%; } .col_res{ width:10%; } .col_note{ width:10%; } .note{ font-family:monospace; text-align:center; } .col_opr{ width:70%; } </style> </head> <body> <h1>CRPL Syntax Reference</h1> <div class="crpl"> <p>broken table 1</p> <table> <colgroup> <col class="col_arg" /> </colgroup> <colgroup> <col class="col_res" /> </colgroup> <colgroup> <col class="col_note" /> </colgroup> <colgroup> <col class="col_opr" /> </colgroup> <thead> <tr > <td colspan="4" class="term"> <!-- --> <a id="term1">term1</a> </td> </tr> <tr> <th>Arguments</th> <th>Result</th> <th>Notation</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>Cond</td> <td></td> <td Class="note">b1 --</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id lacus quis tellus condimentum consequat ac eu neque. Donec luctus rhoncus condimentum. Maecenas eget pretium magna. </td> </tr> </tbody> </table> <div style="height:2em;"> <!-- --> </div> <p>broken table 2</p> <table> <colgroup> <col class="col_arg" /> </colgroup> <colgroup> <col class="col_res" /> </colgroup> <colgroup> <col class="col_note" /> </colgroup> <colgroup> <col class="col_opr" /> </colgroup> <thead> <tr > <td colspan="4"> <!-- --> <a class="term"id="term2">term2</a> </td> </tr> <tr> <th>Arguments</th> <th>Result</th> <th>Notation</th> <th>Operation</th> </tr> </thead> <tbody> <tr> <td>Cond</td> <td></td> <td Class="note">b1 --</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id lacus quis tellus condimentum consequat ac eu neque. Donec luctus rhoncus condimentum. Maecenas eget pretium magna. </td> </tr> </tbody> </table> <div style="height:2em;"> <!-- --> </div> </body></html> -
I'm so sorry. I must have made a silly mistake, it now works in IE, FF and Chrome. Sorry for wasting y'alls time.
-
It should be possible. What is your question?
-
Permit me a small gripe. The W3Schools CSS tutorial or reference (http://www.w3schools...fault.asp#table) for table properties doesn't seem to show which attributes one can specify for a table - nowhere on the site can I find a good link. What I want to do is to create a table that will not be wider than a certain amount. For instance, if the browser window is less than 800 pixels, the table spans the entire width of the window. On larger windows, the table remains at a maximum of 800 pixels. This seems to work in Firefox but not in Chrome. (Have not tested IE.)
table{width:100%;max-width:800px;}I tried adding a
display:block;
attribute (saw that somewhere on the net, but no success. Is there a way to make a table vary its width up to a certain maximum?
-
Holy cow! I've been staring at that for like a couple of days now. I even ran it through the syntax validations at W3C for both the HTML and CSS and nothing popped. Thanks guys!
-
I'm trying (and have tried a few different ways) to change the anchor link (indicated by a comment) to a different color. I'm not having success. In my endeavors, I was even able to answer a question for someone else, but still can't make my own example work.
<!DOCTYPE HTML ><html> <head> <title>Syntax Reference</title> <style> body { background-color:#FEFAF2; color:black; } h1 { color:#A0522D; } table { width:70%; } table, th, td { background-color:#FDF5E6; border-collapse:collapse; font-size:12px; border:1px solid #000000; } a.term{ color:red; } </style> </head> <body> <h1>Syntax Reference</h1> <p>This page has a table.</p> <table> <thead> <tr> <td colspan="2"> <!-- Make this red --> <a style="term" id="if">if </a> </td> </tr> <tr> <th>Arguments</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td>Cond</td> <td>Pops data from stack (Cond) and executes following commands if true.</td> </tr> </tbody> </table> </body></html>Any advice on what I"m doing wrong? I tried the following alternatives in my css: .term a {color:red}a .term {color:red} and a few others I don't recall right now. TIA
-
and, if you wish to add color in-line (rather that refer to the style sheet)
<a style"color:red" href="link">this link is red</a>
-
You can do this:
<html><head><style>a.redclass:link {color:orange;}a.greenclass:link {color:green}</style></head><body><a href="example.com">normal color</a></br /><a class="redclass" href="example.com">red color</a></br /><a class="greenclass" href="example.com">blue color</a></br /></body></html> -
Dern tooting right. I think that's what's tripping me up as well. sometimes subordinate elements aren't "child elements" it would appear. Maybe a smarter person than me can figure it out.Some child elements inherit, and some don't, and I don't really know why. For example: -
OK Boen, thank you, both for understanding my bad semantic syntax and for the advice you and davej gave. I guess there is a little difference between sentence structures and web page structures...
-
Kompozer or Nvu? I remember a teacher once telling us to use one, and then I found that the other was more recent. Now I can't figure out which of these are better/more recent/recommended. In the interim, I use Notepad++. But I'd like to try them out, since I thought they had a few features Notepad doesn't have.
-
I'm using the W3C HTML validator to make sure I don't have errors in my HTML as I learn about it This error is throwing me a bit. It complains about
This is the section of HTML around thereLine 56, Column 7: No p element in scope but a p end tag seen.<p> Just a simple unordered list <ul> <li>Item unordered 1</li> <li>Item unordered 2</li> <li>Item unordered 3</li> </ul> </p> <p> Just a simple ordered list <ul>
It seems that the unordered list forces termination of the paragraph? If that is correct, then the sentence "Just a simple unordered list" should be delimited by the </p> tag? And thus, if I wanted an "association" between the sentence and the table, the way to do it is with a <div> tag?
-
Thanks, that may partially explain why I'm having difficulties!If this is the way your CSS really looksbody{body {color:blue;} Then it is incorrect. All your css from this point on will probably be ignored. You might want something like this: body{color:blue;} Simplest things trip me up.
-
I just can't wrap my head around this. Maybe some kind here can explain it to me? And, for the sake of completeness, I'm not a CSS or HTML maven, but I've done the tutorial and even bought a book on CSS. My understanding of the class attribute of a HTML tag is that it indicates which CSS styling rules will be used with that element. Now, if the element is a block element (div, or, specifically in my case, a table or a cell in a table), do I have to explicitly create a rule within the class for each element? This does not sound right. For the sake of argument, suppose I want some text to be red. if I specify <style>body{body {color:blue;} .redclass{color:red;}</style> Will all/any text with a class-"redclass" be colored red? If I specify a table tag <table class="redclass"></table> Will all/any text in subordinate (child) elements in the table be colored red? That's that I think should happen, but I'm having trouble making it work. Thanks!
Actually, I asked about CSS tools in a different post and Deirdre's Dad showed me the Firefox Inspect tool on the Web developers menu in Firefox. That helped me figure out that there was a 
Templating system or how to avoid repetition
in HTML/XHTML
Posted
If I have a HTML page that has 400+ tables on it, all similar, just the contents differ. All the text is static. Is there a way to use a template? The tables are all small - 3 rows. Is there a better way to create such a HTML table? I have thought about using PHP and Smarty templates, and then to put the table data in a SQL database, but I'm thinking that that might be a lot of CPU overhead to generate static content just to avoid having a very large (>4700 lines and growing) HTML file... I am using CSS to take care of the formatting, all that is in the HTML file is HTML...