CSS Abilities

[VxJasonxV]

Ok, I'm starting to use CSS and, I was curious.
Am I able to specify attributes for a tag with regard to where it belongs?

For example, if I put <h1>, I want the color to be different when it's in a table header (<thead>) as compared to just a header somewhere in the body.

Am I able to (in the CSS sheet) do something like:
h1.thead
{
color: #FF0000;
}
h1.body
{
color: #FFFFFF;
}

Or is the only way I'll be able to do it with loads of div's? (Or CSS classes using span?)

[pete3005]

You can do something like:

.table h1 {
font-family:Verdana, Arial, sans-serif;
font-size:11px;
color:#000000;
background-color:#eeeeee;
padding:3px;
display:block;
width:200px;
}


so you would have a table like

<table class="table">
<tr>
<td>
<h1>My header here styled from above style</h1>
</td>
</tr>
</table>

<h1>Unstyled h1 here, no style applied</h1>

HTH

Pete :)

[VxJasonxV]

Oooh, I didn't know class was an embedded attribute.
Muchos Gracias.
That's exactly what I was looking for.

[VxJasonxV]

Next issue...
Why does it auto-break (<br />) after a </table>???
I'm trying to get it so I have a left side mini-nav table, a spacer gif, then a main content table, then another spacer, then a right-side mini-content table.
But it breaks after each element...and there's no <br /> for MILES!!!

What's going on???

[harmonic]

you will need to nest the tables inside another table.

[VxJasonxV]

*slap*

Fixed.

[VxJasonxV]

More design woes...

Ok, here goes.

http://jason.zenenet.com

That white bordered table should be the master table.
The 3 other tables (and the 2 spacer cells) should all be INSIDE of it.

But...something's breaking the master table, and it's pissing me off :P.


<td width="56%">
<table border="1" bordercolor="#0000FF" cellpadding="0" cellspacing="0" width="100%">
<?php
if (!defined('IN_PHPBB')) {
define('IN_PHPBB', true);
}
include('phpbb_fetch_posts.php');
$posts = phpbb_fetch_posts(1);
for ($i = 0; $i < count($posts); $i++) {
?>
<table border="1" bordercolor="#FFFF00" cellspacing="0" cellpadding="0" width="100%">
<thead>
<tr>
<td>
<h3>
<b><?php echo $posts[$i]['topic_title']; ?></b>
</h3>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td align="right">
<p>
<br />
Posted by
<a href="<?php echo $phpbb_root_path; ?>
profile.php?mode=viewprofile&u=
<?php echo $posts[$i]['user_id']; ?>">
<?php echo $posts[$i]['username']; ?>
</a> on <?php echo $posts[$i]['date']; ?> at <?php echo $posts[$i]['time']; ?>
<br />
<a href="<?php echo $phpbb_root_path; ?>
viewtopic.php?t=<?php echo $posts[$i]['topic_id']; ?>">
(<?php echo $posts[$i]['topic_replies']; ?>)
Comment<?php if ($posts[$i]['topic_replies'] != 1)
{ echo 's'; } ?>
</a>
</p>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td align="justify">
<p>
<?php echo $posts[$i]['post_text']; ?>
</p>
</td>
</tr>
</tbody>
</table>
<?php
}
?>
</table>
</td>


I'm sorry the formatting sucks...
But...where/why is it breaking out of that master <td>????


Could it be because I'm nesting 3 tables inside one? (4 tables similtaneously.)

[harmonic]

I would reccommend you:

1) Indent, it helps to find errors like that
2) Don't use thead and tbody and such

[VxJasonxV]

Trust me...it's indented in my code...but it's indented so much, it went bonkers when I pasted it in here...
Second, thead, tbody, and tfoot are the new standards...doesn't hurt to get used to it now.

But like, none of my other thead tables are broken...so if you're suggesting that's the problem...
nah.

It's screwed up on Mozilla too...:(.


RAWK!!!!!
I went into the previous posts code.
I bold, italicized, and underlined two lines...
I had this dud-table just sitting there.
I took it out and it worked...
It didn't have accompanying <tr> and <td>'s...but...it didn't need them, so :).
YAY!!!!

[Sardtok]

Hey, if you are beginning with css here are the w3 specs (I suspect you already have this): http://www.w3.org/TR/REC-CSS2/

Oh and about what pete wrote, you might not want it only to affect children headers???
I don't know, otherwise it's functional, but he didn't really need a custom class for that he could just as well have used:
TABLE H1 { style: here; }
And it would have given the same effect, but then all h1 tags inside table tags would be changed to that style...
Read chapter five in the specs it explains the different selectors and pattern matching...
http://www.w3.org/TR/REC-CSS2/selector.html
Oh, and not all of the selectors work, it seems...
At least not the attribute matching selectors (I did try them with custom attributes though so that might have been the problem)...

One thing I like to use is:
BODY * { style: here; }
This will affect all children of the body tag... ;)

Although most tags will inherit from the body tag, that is not always the case (this is most likely IE screwing up though)...

Ok, time to stop... ;) Hehehe ;)

The specs are quite useful,
I've almost only used the specs for learning css...
The references in the end are quite useful for looking up certain styles and all...
OK NOW I WILL STOP ;) hehe

[pete3005]

Originally posted by Sardtok


Oh and about what pete wrote, you might not want it only to affect children headers???
I don't know, otherwise it's functional, but he didn't really need a custom class for that he could just as well have used:
TABLE H1 { style: here; }
And it would have given the same effect, but then all h1 tags inside table tags would be changed to that style...


I did that because he probably wouldn't want every table site wide to have the same h1 styles so a custom class was required and is correct.

I suggest you guys not only check out online CSS resources, of which there are loads but also the book by Glashaus Cascading Style Sheets: Separating Content from Presentation.

Unfortunately if you are going to use CSS-P and drop tables for layout you'll also need a Mac because most perfectly executed CSS2 on IE5+/Moz/NN6+/Opera7+ will fail miserably on Mac/IE5 combinations.

HTH

Pete

[Sara]

Ok, another .CSS problem.

www.simplysara.com/blog/

It's beautiful in IE6 but in NS 6 one of the sidebars is missing and in Opera there is an overlapping of part of a sidebar on the main blog entry.

It validates though, so I guess it's my HTML?

:p

Any input would be great!

Thanks,

Sara

[harmonic]

Originally posted by VxJasonxV

Second, thead, tbody, and tfoot are the new standards...doesn't hurt to get used to it now.



Can i get a link?

[Sara]

I fixed it...yay me! I had something in a table, go figure! :D

[VxJasonxV]

(The quote button is still broken for me...and only me!!!)

http://www.w3schools.com/tags/tag_thead.asp

Right after the "Differences between HTML and XHTML."

[harmonic]

So, they shouldn't be used now, but they might be used in the future. I don't see that as much of a cause to use them.

[VxJasonxV]

Use them now, you won't have to convert later ;).