Custom Header Question

naporeon · September 2007

OK. So, I'm working on a new personal website, and I've run into a problem. Here's the code:

tit {
color: #8dc63f;
font-size: 150%;
font-family: Georgia, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: normal;
}

rtit {
color: #8dc63f;
font-size: 150%;
font-family: Georgia, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-weight: normal;
text-align: right;
}

These are intended to function as custom header calls, so that I can make changes to them without affecting all of the headers that reference the stylesheet. "tit" works just like I want it to. "rtit", however, does not; it is still aligned on the left. What am I doing wrong, here? I've tried about a dozen different things, but nothing has worked. I am sure that making it a <div> or <p> function would fix the problem, but I don't want to force a double line-break between the "rtit" header and actual paragraph of text it introduces.

I should mention two additional things. First, I'm trying to be fully compliant to Strict XHTML. Second, I am entirely self-taught, so I'm sorry for any incorrect terminology or jarringly obvious mistakes.

Let me know if there is any other info I need to post in order to clarify my problem.

blincoln · September 2007

Can you post the HTML you're using to reference the CSS file?

naporeon · September 2007

I'm actually just enclosing it in <rtit> </rtit>. I recognize that this is most likely wildly incorrect, but the document is enclosed in <html> </html>, and so far as I know, I shouldn't use attribute references inside <html>.

Also, <tit> </tit> works just fine.

Horus · September 2007

I thought for that type isnt it suppose to be

<h1 class="tit"> HAHAHA </tit>

Not sure but I am always confused as to the difference between class and id CSS/HTML

Hope I didnt make more confusion out of this.

RiemannLives · September 2007

Classes have a "." in front of the name in the CSS file. Eg: ".rtit"

telcus · September 2007

Umm, it's possible that its not right-aligning because the default value for the display attribute in CSS is 'inline', which produces boxes like <span>, where the size of the box is the width of the text inside it. So right-aligning that will have no discernible effect.

If you want it to be blocks of text then add

display: block;

to your CSS. This will force a new line between your boxes like a <div>, but will also increase the width of the box to 100%, so the text in rtit will be on the right of the page.

If you want it to be all on the same line, you might have to play around with floating it to the right.

Lewisham · September 2007

naporeon wrote: »

I'm actually just enclosing it in <rtit> </rtit>. I recognize that this is most likely wildly incorrect, but the document is enclosed in <html> </html>, and so far as I know, I shouldn't use attribute references inside <html>.

Also, <tit> </tit> works just fine.

As Horus said: that's not XHTML. It won't validate. You need to assign classes to actual XHTML tags. You should read more about what XHTML/CSS is.

Once you get that right (usually you'll use a div) then put a black border around the element; you'll probably find it's only as wide as the text (as you haven't specified a width), so it's right-aligned well enough, but it's right-aligned against a box as big as it is.

naporeon · September 2007

Lewisham wrote: »

naporeon wrote: »

I'm actually just enclosing it in <rtit> </rtit>. I recognize that this is most likely wildly incorrect, but the document is enclosed in <html> </html>, and so far as I know, I shouldn't use attribute references inside <html>.

Also, <tit> </tit> works just fine.

As Horus said: that's not XHTML. It won't validate. You need to assign classes to actual XHTML tags. You should read more about what XHTML/CSS is.

Once you get that right (usually you'll use a div) then put a black border around the element; you'll probably find it's only as wide as the text (as you haven't specified a width), so it's right-aligned well enough, but it's right-aligned against a box as big as it is.

Ooooooooooh.

I am developing this website mainly to edify myself, because XHTML/CSS has essentially been grafted onto my job description. So far, when I have been called on to use those assets at work, I have either found a web tutorial that enabled me to do get more or less the result I was hoping for, or I cannibalized existing code that approximated what I was looking to do, and modified it using trial-and-error.

Most of my study has been confined to the W3Schools website, or the W3C website itself; my employer also provides access to the entire O'Reilly catalog in digital format, but that is only accessible at work. Do you have any better suggestions as to resources? My preference is for free and online, but my employer will potentially put a couple thousand dollars into training on this, so any resource is worth considering.

Jasconius · September 2007

This is a good resource for beginners:

http://htmldog.com/

Lewisham · September 2007

I'd suggest you use the O'Reilly book you have access to; print out a chapter a night and use it at home.

XHTML is not hard if you have no pre-conceived notions as to what HTML is and what HTML isn't, the old-school (including myself) find it hard not to "cheat" and hack an old way of doing something into XHTML.

CSS is harder to grasp, if only because 50% of the time it won't do what you expect. When you do find it does what you expect, it won't work in Internet Explorer. But this is for the big issues, simple sites should be fine.

Lewisham · September 2007

Jasconius wrote: »

This is a good resource for beginners:

http://htmldog.com/

Oh yeah, HTML Dog. That's what I was looking for. That's a great site.

Jasconius · September 2007

HTML Dog is, in my opinion, one of the purest sources of HTML/CSS fundamentals.

They also spare you the preachy nonsense that is generally associated with a lot of tutorials on the web these days while still pointing out and encouraging "best practices".

naporeon · September 2007

Lewisham wrote: »

I'd suggest you use the O'Reilly book you have access to; print out a chapter a night and use it at home.

XHTML is not hard if you have no pre-conceived notions as to what HTML is and what HTML isn't, the old-school (including myself) find it hard not to "cheat" and hack an old way of doing something into XHTML.

CSS is harder to grasp, if only because 50% of the time it won't do what you expect. When you do find it does what you expect, it won't work in Internet Explorer. But this is for the big issues, simple sites should be fine.

Thanks for the tips. For some reason, I hadn't considered printing out the O'Reilly materials. Durrrrrr.

I do have a fair amount of experience with HTML, although so far my pre-existing knowledge has served only to help, it seems...at least in the sense that I know enough to get things to look and respond as I want them to, whether or not it is technically correct.

On the upside, all of my web development work will be internal, and we recently phased out IE and Opera; new tools and pages need only display correctly in Firefox.

naporeon · September 2007

Also, if classes or ids are strictly necessary, I am wondering why it is still doing what I want, without the respective . or #.

Oh well.

Here's to learning. After XHTML/CSS, it's on to PHP and XSLT. Hurrah!

Jasconius · September 2007

Your job just decided that you need to learn all this stuff? XSLT is advanced stuff.

Anyway, it is probably recognizing your custom tag due to a browser quirk. In reality even if you technically can do such things, you shouldn't, because as you have discovered they are unreliable at best.

You CAN use element selectors for existing tags such as <td> or <body>, however that would fall under the category of "intermediate" practice.

Before you can walk, you must learn to stand, etc.

Lewisham · September 2007

Jasconius wrote: »

XSLT is fuckingly mind-blowing advanced crazy shit.

Fix'd

naporeon · September 2007

Jasconius wrote: »

Your job just decided that you need to learn all this stuff? XSLT is advanced stuff.

Anyway, it is probably recognizing your custom tag due to a browser quirk. In reality even if you technically can do such things, you shouldn't, because as you have discovered they are unreliable at best.

You CAN use element selectors for existing tags such as <td> or <body>, however that would fall under the category of "intermediate" practice.

Before you can walk, you must learn to stand, etc.

It would be more accurate to say that some time ago, my employers--a branch of the VIDI network at the Fred Hutchinson Cancer Research Center--recognized the fact that I learn things extraordinarily quickly, and having done so, offered to revise my job description (in essence creating a new position for me, without having to list it as an open position and therefore solicit applications) and give me a nearly 18% raise.

I started with them in the fall of 2005, doing part-time data entry. Three weeks later, I was working full-time, handling the internal wiki system and writing some internal webpages, with both Java and HTML. About two months after that, I was moved into a special joint team of our IT and Programming departments, mostly designing and writing validation documentation, managing our team of testers, and seeing our labkey work from use case stage to release one. I was offered a project manager position about eight months later (roughly at my one-year mark), which I turned down, since I suspected that I'd eventually get tapped for either dedicated web-dev or object-oriented programming.

As it turns out, my hunch was correct, and I'm being transitioned. As long as they are throwing more money at me, I am happy to learn whatever they want me to, especially if it means that my personal skillset grows more marketable at the same time.

All that being said, I am a little apprehensive about self-teaching myself PHP and XSLT, especially since I come from a hardware background, and only hold degrees in Anthropology and Psychology.

Lewisham · September 2007

naporeon wrote: »

All that being said, I am a little apprehensive about self-teaching myself PHP and XSLT, especially since I come from a hardware background, and only hold degrees in Anthropology and Psychology.

PHP will be fine for someone of your background.

It's XSLT that's going to kick you in the balls.

flatlinegraphics · September 2007

probable better way:

<html>
<head>
<style>
/*class definition-------*/
.something{
color: #8dc63f;
font-size: 150%;
font-family: Georgia, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
/*selectors-------------*/
#tit {
text-align: left;
}
#rtit {
text-align: right;
}
</style>
</head>
<body>
<div class="something" id="tit">left aligned text</div>
<div class="something" id="rtit">right aligned text</div>
</body>
</html>

should move the main style definitions to a class, and use selectors to define exceptions.

i breathe css and php right now.. but xslt... no way.

kevbot · September 2007

My advice would be to read the first few chapters of the O'reilly definitive guide to CSS. It's an extremely well written and easy to understand book.

I noticed something about id and class being necessary... they really aren't, and in fact you should avoid using them when you don't need to. If all of your h1 tags are going to be formatted the same way you should just reference the tag itself instead of assigning a class / id to each tag.

You should also avoid inventing your own tags unless you want to create your own doctype and definition, which won't be fun. The tags built in to xhtml should be all you need.

Probably the biggest thing to know is the difference between block level elements and inline elements. Take a look at the links below....

http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1
http://www.autisticcuckoo.net/archive.php?id=2005/01/12/block-vs-inline-2
http://cat.xula.edu/tutorials/html/versus.php

Some other good resources:
http://www.alistapart.com/ --> Often has articles on nifty stuff you can do with CSS / XHTML
http://positioniseverything.net/ --> Lists the broken functionality of different browsers and how to get around them. Good resource for making stuff work in IE (it will be the bane of your existence).

If you are going to be learning PHP on your own I'd suggest you find someone who knows a lot about it to look over your first few projects. Even with being a simple language to learn it has a lot of potential traps that new users fall in to. My best suggestion would be to trust nothing the user submits (validate everything) and you should be all right.

http://www.ilovejackdaniels.com/php/ --> Excellent resources / articles / cheatsheets for all things web-design.

It might be worth reading through the O'reilly books on PHP as well... I've found them to be pretty useful.

Finally, you'll probably want to develop in Firefox with the Web Developer and Firebug extensions. Web Developer has tons of nice tools for debugging a site design (element positioning, etc) and Firebug is great for debugging javascript.
I also use the DOM Inspector, InspectThis and JSView extensions... DI lets you view any attribute of any element in the document tree, inspectthis lets you select a page element in the DI by right clicking it and JSView lets you avoid hunting through a sites source to find the JS / CSS files it references. Make sure you know where the Firefox errror console is (right side of the screen in web developer)... it's really handy.

Sorry if any of this seems overly simplified or anything... I'm not sure what your experience level is.

Good luck!

naporeon · September 2007

I guess an update is in order. First of all, I solved this problem shortly after making the thread. Or rather, I should say that I got my desired result (a header right-aligned within the column), using precisely the method that flatlinegraphics suggested. I'm sure it's not the prettiest code in the world, but it is getting the job done, and I didn't end up having to fall back on deprecated HTML to do it (although it was tempting as hell).

Thanks for your post, Kev. I knew that establishing a class was not necessarily required (mainly because of unclassed header and blockquote attributes in the examples of code I've seen), but not that it was actually inadvisable where avoidable. Also, I have, as Lewisham suggested above, printed off several chapters of the O'Reilly books (just HTML/XHTML and CSS at this point, but PHP soon enough, and then...XSLT).

I hear what you're saying about validation; as a matter of fact, establishing and overseeing validation practices within our object-oriented programming team is actually my primary job. I definitely recognize the importance of making sure that I am not only getting desired results, but getting them from code that is compliant to a sensible, consistent standard. Luckily, while I will be learning PHP on my own, I will have several resources (including actual coworkers) around to offer material assistance. XSLT, on the other hand....

Yeah. I'm just going to have to accept the fact that the company's going to have to lay out some fliff for actual training on that one.

flatlinegraphics · September 2007

in addition, if its a headline, you really want to do something like

<style>
.somthing{}
.something p{}
.something h1#rtit{}
}
<div class="something">
   <h1 id ="rtit">headline!</h1>
   <p>paragraph text</p>
</div>

that really helps with search engine optimazation, and keeps things a bit cleaner. plus, it keeps the page hierarchy intact and separates content from presentation. you can literally redesign the site by replacing the style sheet. doing it with xml is fairly similar, except you are dealing with parents and children being controlled by the style sheet. i would assume that xslt does something of the same, except using a parser engine to eat the xml and output chewed up html. or something. i stay away from that shit....
once you get this down, you can get into psuedoselectors! wooo!

Penny Arcade

Quick Links

Custom Header Question

Posts