Glom

I post this here, but somehow I get the impression we're rather beyond XHTML.My website has an associated blog hosted by Blogger. I would rather like to have the blog on my own website (I consume something like 2% of the space I'm allowed so I'm hardly concerned about that). I not only would like the extra control, but it would also be good to know how they do what they do.I have fiddled with the template before. There's a bunch of XHTML and CSS that I can get my head around. Then there a bunch of other stuff. I think XML is involved somehow as well. So what would I need to know to create the blog by myself? Is php knocking at the door?And what do you think Blogger would have to say about it?

Hey that worked great. But how do I put this xml file into my HTML file?

XSLT it is then. A quick play around and I'm definitely having more luck with that (as much as possible having just learnt the basics 20 minutes ago). It definitely doesn't warm to the idea of trying to use value-of tags to gives attributes of other tags like img though. That's a problem because my other thought for the use of xml is in my template for the nav bar links.

I have a glossary page on my website. There are over a hundred definitions in it. I started reading through the XML tutorial and figured it would be possible to store the data in an XML file and pin it in the XHTML file.The idea was to have the name of the object, its definition and an anchor for quick linking. This is what I came up with. <xml id="glossary" src="glossarydb.xml"></xml><dl datasrc="#glossary"><dt><a name="<span datafld="LINK"></span>"></a><span datafld="NAME"></span></dt><dd><span datafld="DEF"></span></dd></dl> It didn't work. I know the anchor looks a bit messy, but I also tried it with the anchor part commented out. Still didn't work. I then tried it using a table format instead, like the example in the tutorial and that worked. How would I do this with the definitions tags?Then the question is, would making the glossary using XML have any advantage over just doing it in the XHTML as I currently do?

Ah yes. That worked great, thanks. It's obvious when you think about it.

I want to put a background picture in a particular container in my template (done using css of course!). I can centre it fine in the container, but I want the unused space in the container to contain be a certain colour. I tried specifying it the old fashioned way. #title { background-color:#000000; background:url("img/title.jpg") no-repeat center; color:#000000; height:100px; margin-left:100px; } I've specified a background colour and a background image. But the result is that the picture is centred while the rest of the container retains the colour of the parent.How do I get it so I can get the background colour and the background image to work?

Mystery solved. When I tried to validate the online version, I got the full rice throwing. It's just more inhibited when you upload offline files.

When I validated the file, it flagged all the elements with text-align?tr, #turnpage everything.

No, it's complaining every time it appears, not just at that entry. I even removed text-align from that part and it is still complaining about the other elements.

/*CONTENT STYLES*/body { background-color:#88FFFF; color:#000010; }p { font:85% sans-serif; }h1 { font-family:sans-serif; }h2 { color:#333333; background-color:inherit; font:900 130% sans-serif; }h3 { color:#444477; background-color:inherit; font:800 85% sans-serif; }h4, caption { color:#100010; background-color:inherit; font:800 80% sans-serif; text-align:center; }a:link { color:#004080; background-color:inherit; font-family:sans-serif; }a:visited { color:#006060; background-color:inherit; font-family:sans-serif; }a:hover, a:active { color:#001010; background-color:inherit; font-family:sans-serif; text-decoration:none; }li { color:#000010; background-color:inherit; font:85% sans-serif; }dd { color:#000010; background-color:inherit; font:85% sans-serif; }dt { color:#000010; background-color:inherit; font:600 85% sans-serif; margin-top:15px }tr { background-color:inherit; color:#000010; font:85% sans-serif; }img { border-style:none; margin:0 0; }.pic {}/*------------------------------------------------------------------------------------------TEMPLATE STYLESDivision ids*/#cladding { width:90%; }#logo { background-color:#FFFFFF; background:url("img/logo.gif"); color:#000000; width:100px; height:100px; float:left; }#title { background-color:#FFFFFF; color:#000000; height:100px; margin-left:100px; }#nav { border-top:1px solid; float:left; width:100px; min-height:450px; }#content { margin-left:100px; border-left:1px solid; border-bottom:1px solid; border-top:1px solid; padding:10px; min-height:450px; text-align:justify; }#turnpage { text-align:center; }#footer { clear:both; font-family:sans-serif; font-size:65%; }/*----------------Text ids*/#chapter { margin:8px 0px 2px 10px; text-transform:uppercase; }#page { margin:0px 0px 0px 10px; }#copyright { float:left; }#update { float:right; }/*---------------Image ids*/#frontbtn, #xhtml { margin-top:30px; }#debbtn, #scibtn, #cycbtn, #safbtn, #accbtn, #appbtn {}#css {}#prev, #next {}#footlogo { height:50px; }

So what's not a block? I get it with divs, I get it with body. How would I tell it to justify a paragraph or the caption of a table?

When I try to validate my stylesheet, I intermittantly get warnings that, where I haved used text-align, "This property only applies to block-level elements".The weird thing is that it does not happen every time. Only some times.

Okay, if I remove the XML declaration, does that mean I should remove the XML lang declaration from the HTML tag?

I don't get any errors, but it doesn't say my css is validated.Here it is. Can you see anything wrong, which would prevent validation? /*CONTENT STYLES*/body { background-color:#88FFFF; color:#000010; }p { font:85% sans-serif; text-align:justify; }p.update { font-size:60%; text-align:right }p.turnpage { text-align:center }h1 { font-family:sans-serif; }h2 { color:#333333; background-color:inherit; font:900 130% sans-serif; }h3 { color:#444477; background-color:inherit; font:800 85% sans-serif; }h4, caption { color:#100010; background-color:inherit; font:800 80% sans-serif; text-align:center; }a:link { color:#004080; background-color:inherit; font-family:sans-serif; }a:visited { color:#006060; background-color:inherit; font-family:sans-serif; }a:hover, a:active { color:#001010; background-color:inherit; font-family:sans-serif; text-decoration:none; }li { color:#000010; background-color:inherit; font:85% sans-serif; }dd { color:#000010; background-color:inherit; font:85% sans-serif; }dt { color:#000010; background-color:inherit; font:600 85% sans-serif; margin-top:15px }tr { background-color:inherit; color:#000010; font:85% sans-serif; }.turnpage { margin: 0 auto; text-align: center; }img { border-style:none; margin:0 0; }/*------------------------------------------------------------------------------------------TEMPLATE STYLESDivision ids*/#cladding { width:90%; }#logo { background-color:#FFFFFF; background:url("img/logo.gif"); color:#000000; width:100px; height:100px; float:left; }#title { background-color:#FFFFFF; color:#000000; height:100px; margin-left:100px; }#nav { border-top:1px solid; float:left; width:100px; min-height:450px; }#content { margin-left:100px; border-left:1px solid; border-bottom:1px solid; border-top:1px solid; padding:10px; min-height:450px; }#turnpage { clear:both; text-align:center; }#footer { clear:both; font-family:sans-serif; font-size:65%; }/*----------------Text ids*/#chapter { margin:8px 0px 2px 10px; text-transform:uppercase; }#page { margin:0px 0px 0px 10px; }#copyright { float:left; }#update { float:right; }/*---------------Image ids*/#frontbtn, #xhtml { margin-top:30px; }#debbtn, #scibtn, #cycbtn, #safbtn, #accbtn, #appbtn {}#css {}#next, #prev { margin-bottom:5px }#footlogo { height:60px }

The href attribute for a and the src attribute for img for example. I don't suppose it is possible to control these from a css. I tried it and it didn't work. Is it possible?

That worked great. Thanks.Now about when you use the validator, for XHTML validation, when it is validated, a big green sign appears saying "Valid Strict XHTML 1.0!" or something. Should I be expecting the same thing from the CSS validator because all I get is "No error or warning found" followed by this message, "To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML," which doesn't seem to say anything bad about the stylesheet. Is my CSS validated or do I need to so something else?

Thanks.

Would that be something like this:<?xml version="1.0" encoding="iso-8859-1" ?> I got this when looking at johneva's site (thanks, john!). It was above the DTD. Is the xml declaration like the DTD in that it is outside the main code?Do I also need a language declaration in the html tag?

Yeah that's really annoying because I want these elements to have the background colour of the body. By having to give all of them their own background marrs the convenience of css of being able to adjust only one factor. And the css validator doesn't recognise "transparent" as a background-color.I'm getting another warning that comes up whenever I specify text-align. "This property applies to block-level elements."

Before I make the move to a new server, I am looking to create a new template in XHTML 1.0 Strict. Obviously I want to get it finalised with all the bases covered before I change the whole site over or I'll have the annoying task of having to modify every page one by one down the road.Obviously, it's all those declaration jargons and things which I don't know a lot about.Here's the things I've got:DTD showing XHTML strictXMLNS declaration in the html tagmeta keywordsmeta descriptionmeta content-type with charsetIs there anything I've missed?

The layout information for the front page is different so I currently have it in the head of the page. I was thinking that maybe it would be better to put it into an external css because the html itself would be smaller and the css data could be cached shortening future download times. Does that logic make sense or not?On a similar note, I have a glossary page, which naturally uses the dd and dt tags. That is the only page I use them. Would it then be better to simply put the style information for those tags in the head section of that particular page?

When I started work on my new template using css layouts, I created a seperate css file containing the styles for the divs. All my main pages call up both stylesheets. I know functionally it doesn't make a difference, but should I combine them into one or is it okay to leave it seperate?

My website uses a standard template for all pages except the front page, which has its own layout. Currently, all styles data, including css layout, relating to this page is put in a internal stylesheet since this page is unique.Here's the question:Is this proper etiquette for stylesheets, or is it proper to put the it into an external stylesheet even though only one page is using this data?

Just to check, while css layouts maybe the proper way to do it, there is nothing invalid about using tables right?

I'm trying to put a title in the middle of its element, but the vertical-element attribute is having no effect.Here's what I'm doing. h1 { color:#000000; font-family:sans-serif; vertical-align:middle; } <div id="title"><h1>FREEDOM FOR FISSION<br />about the site</h1></div> Similar problem with the min-height attribute. I want some divs to be the same height as their neighbours, but this isn't working. .chapter { background-color:#CCFFCC; width:32%; border:1px solid; font-size:85%; min-height:100; } <div class="chapter" style="float:left"> <h1>SAFETY</h1> <a href="saf/pollution.html">Radiation and pollution</a><br /> <a href="saf/reactor.html">What could go wrong?</a><br /> <a href="saf/terrorism.html">Weapons of terror</a><br /> <a href="saf/space.html">Nuclear power in space</a> </div> <div class="chapter" style="float:right"> <h1>APPENDICES</h1> <a href="app/links.html">Nuclear power on the web</a><br /> <a href="app/glossary.html">Glossary</a><br /> <a href="app/calendar.html">Greenpeace calendar</a><br /> <a href="app/unscear.html">The Chernobyl report</a><br /> <a href="app/tmiruling.html">The TMI verdict</a> </div>