Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2006-01-14 23:24:14

6sigma
Member
From: Memphis, TN, USA
Registered: 2004-05-24
Posts: 184
Website

Positioning with CSS...a cry for help!

<em>[disclaimer: I’ve been at this for almost 8 hours, so I’m pretty frustrated with myself]</em>

I’ve got a single XHTML validation error at stevepilgrim.com. It’s because I’m centering the first line of the page using <code>align=“center”</code>. Apparently, that isn’t allowed. Can someone tell me specifically how to fix this and use CSS for proper positioning? The CSS I’m using validates.

Ultimately, I want to produce that page using Textpattern and still be able to link out to the weblog. However, I haven’t even begun to clean up the resume with valid XHTML and CSS. That’s going to be a good couple of weeks worth of (trial-and-error) work; then, I’ll get into the Textpattern work.

I sure do wish there was a good way to learn XHTML and CSS. I know it’s important, but it is exasperating to take an entire day for something as simple as that page.

Thanks in advance.


“Well, I, uh, don’t think it’s quite fair to condemn a whole program because of a single slip-up, sir.” General ‘Buck’ Turgidson

Offline

#2 2006-01-14 23:49:30

nardo
Member
From: tuvalahiti
Registered: 2004-04-22
Posts: 743

Re: Positioning with CSS...a cry for help!

div#title {text-align:center;}

Offline

#3 2006-01-15 00:46:07

6sigma
Member
From: Memphis, TN, USA
Registered: 2004-05-24
Posts: 184
Website

Re: Positioning with CSS...a cry for help!

> nardo wrote:

> div#title {text-align:center;}

Thanks, Nardo. That uncovered other problems, but I think I’ve gotten the XHTML and the CSS to validate now. Much appreciated.


“Well, I, uh, don’t think it’s quite fair to condemn a whole program because of a single slip-up, sir.” General ‘Buck’ Turgidson

Offline

#4 2006-01-15 23:18:39

NyteOwl
Member
From: Nova Scotia, Canada
Registered: 2005-09-24
Posts: 539

Re: Positioning with CSS...a cry for help!

margin-left: auto; margin-right: auto; can also be used for horizontal centering of an element.


Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

Offline

#5 2006-01-16 00:17:38

6sigma
Member
From: Memphis, TN, USA
Registered: 2004-05-24
Posts: 184
Website

Re: Positioning with CSS...a cry for help!

Again, many thanks for your help. These two answers are examples of what confuses me about CSS. Which one is better or best if the goal is valid, semantic, accessible, usable XHTML and CSS? How do you know and where do you learn it?

I’m certainly not complaining about the help. I’d just like to know how to learn the “proper” ways!


“Well, I, uh, don’t think it’s quite fair to condemn a whole program because of a single slip-up, sir.” General ‘Buck’ Turgidson

Offline

#6 2006-01-16 00:49:31

nardo
Member
From: tuvalahiti
Registered: 2004-04-22
Posts: 743

Re: Positioning with CSS...a cry for help!

maybe NyteOwl can give you more precise outline…

but a div by default stretches to the width of its containing element – in your case, it stretches to the width of the browser window (I think that’s a ‘viewport’ in user agent speak) … so I think for that specific use case, easier just to align the contents of the div to the center

maybe if you had a logo instead of text – and you knew its width – you could give the div a fixed width, and then center the div e.g.
<code>div#title {
width:350px;
margin-left:auto;
margin-right:auto;
}</code>

as for learning & using css

  • find yourself a resource site that gives just the specs… w3schools is one
  • use Firefox with the Web Developer extension – try ‘edit css’ and you’ll see the css rules for a page (any page!) load in a sidebar; as you edit the rules, the page adjusts accordingly … try stuff out
  • read the articles from respected css gurus when you run into odd behaviour or inconsistencies across browsers … google em or here’s a bit of a list

Last edited by nardo (2006-01-16 01:02:17)

Offline

Board footer

Powered by FluxBB