3 Quick(?!?) Questions

[Dr. Compynei]

Hi All,

I'm knew around here so please excuse me, however I'm stuck with a few
things.

As part of my degree I am studying Web Development, and now I better
understand websites I am designing up the website of a charity (local
theatre) in CSS and XHTML 1.0 Trans.

Moving away from tables due to accessability problems etc etc. Can anyone
help me out with the following:

http://www.blt.org.uk/css/index.htm

1. Image Mapping. How is best to map the image to turn graphics into
hyperlinks. Splitting the image maybe?

2. Scrolling. This is my main problem at the moment. When the page gets
longer the content div just keeps going down the page, what I want is for
the site to be x% sizes of the screen (leaving some red border) no matter
what the resolution (upto a min of 800x600).
I want the content layer to scroll, not the whole page. I'm not sure I've
explained clear there actually.
- Page to be displayed without main scrolling bar
- Container division (the whole white area) to be x% size - lets say 80%
- Content layer to scroll down if the content becomes too much

3. Margins. Defining CSS margins sends the layout funny. I would like to
indent the text, and poster image so that they are not so close to the edge.

Many thanks for your help!

Neil

 

[dorayme]

I'm knew around here so please excuse me, however I'm stuck with a few
things.

What did you do when you came in, knock the vase over or
something?

As part of my degree I am studying Web Development, and now I better
understand websites I am designing up the website of a charity (local
theatre) in CSS and XHTML 1.0 Trans.

You are unlikely to be needing XHTML then, stick to 4.01 Strict
for a while

Moving away from tables due to accessability problems etc etc. Can anyone
help me out with the following:

http://www.blt.org.uk/css/index.htm

1. Image Mapping. How is best to map the image to turn graphics into
hyperlinks. Splitting the image maybe?

You can image map, meaning you define areas of one image (no
"splitting") by coordinates and link to the areas. You can google
up and have a go first on this.

But don't bother in your case, the nav div is best to be a simple
inline list. An image is bad for this purpose, at least for the
good reason that it does not scale.

Look at:

2. Scrolling. This is my main problem at the moment. When the page gets
longer the content div just keeps going down the page, what I want is for
the site to be x% sizes of the screen (leaving some red border) no matter
what the resolution (upto a min of 800x600).

You will buy yourself more problems and trouble achieving this.
Let it scroll and keep it simple.

3. Margins. Defining CSS margins sends the layout funny. I would like to
indent the text, and poster image so that they are not so close to the edge.

How do other sites that you admire do this? Have you looked? If
you want a canvas area then one way to do it is very simple, you
wrap all your code under the body in a wrapper div and set the
margin for this wrapper in px or in em. Try it and see what you
like. It is not a bad look done with modest numbers for some
sites. Take a look at the css instruction of "margin" and set for
all sides as you like, eg:

#wrapper {margin:5px 20px 5px 20px;}

This gets top, right, bottom and left respectively.

As for grace with text within the wrapper and other boxes, apply
a modest bit of padding, best in em.

 

[Chaddy2222]

Hi All,

I'm knew around here so please excuse me, however I'm stuck with a few
things.

As part of my degree I am studying Web Development, and now I better
understand websites I am designing up the website of a charity (local
theatre) in CSS and XHTML 1.0 Trans.

Why?
You should use Strict as it's a new project.

Moving away from tables due to accessability problems etc etc. Can anyone
help me out with the following:

http://www.blt.org.uk/css/index.htm

For a start, you should end all file names with .html as Unix / Linux
servers are case sensitive.

1. Image Mapping. How is best to map the image to turn graphics into
hyperlinks. Splitting the image maybe?

Ug, use text links and style them with CSS.

2. Scrolling. This is my main problem at the moment. >When the page
gets longer the content div just keeps going down the page, >what I want
is for the site to be x% sizes of the screen (leaving some red >border) no
matter what the resolution (upto a min of 800x600).
I want the content layer to scroll, not the whole page. >I'm not sure I've
explained clear there actually.
- Page to be displayed without main scrolling bar
- Container division (the whole white area) to be x% >size - lets say 80%
- Content layer to scroll down if the content becomes too much

3. Margins. Defining CSS margins sends the layout >funny. I would like
to indent the text, and poster image so that they are not so >close to the
edge.

Many thanks for your help!

Neil

You could start by using % or me units for all elements, including
font-size, PT is for printing.
Then just remove the width of everything and make the container div how ever
big you want it. Then just add margins and padding where necessary.

 

[Steven Saunderson]

For a start, you should end all file names with .html as Unix / Linux
servers are case sensitive.

Yes, I can certainly see the logic here.

 

[Toby A Inkster]

For a start, you should end all file names with .html as Unix / Linux
servers are case sensitive.

Huh? That's a non-sequitur.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[Dr. Compynei]

Were you instructed to use XHTML Transitional? If so, your instructor is
incompetent.

Yes I was! Not for this specific project, but for a similar website, just
different content.
The instructor is a leading figure on sitepoint I believe.

As someone else mentioned, the most accessible method would be plain
text links styled with CSS. Using list mark up for navigation menus has
become the accepted norm.
http://css.maxdesign.com.au/listamatic/

You can embellish with background graphics to get pretty much the same
effect as the site has now and still be scalable with varying window and
text sizes, but that is a bit advanced for a newbie. Keep it simple and
you'll get better results.

Thanks for that, I will work with it.

Stop wanting this. If you're dropping layout tables for accessibility
reasons, putting in a scrolling div would be substituting one
accessibility problem with another, perhaps worse one. Scrolling divs
are a navigation nightmare for keyboard users. They are cumbersome at
best, unusable at worse.

That clears alot up. Many thanks for this.

Were you instructed to use a scrolling div, too? :-(

No ;-). Just a thought.

 

[Dr. Compynei]

Why?
You should use Strict as it's a new project.

We were instructed to use transitional. But I shall move away from this

For a start, you should end all file names with .html as Unix / Linux
servers are case sensitive.


Ug, use text links and style them with CSS.

You could start by using % or me units for all elements, including
font-size, PT is for printing.
Then just remove the width of everything and make the container div how
ever big you want it. Then just add margins and padding where necessary.

Thanks for the info, I'll keep playing!

 

[Dr. Compynei]

What did you do when you came in, knock the vase over or
something?

It was more of, an excuse me as I'm not exactly sure how this group works.

You are unlikely to be needing XHTML then, stick to 4.01 Strict
for a while

Being taught int XHTML so it seems sensible to move that way.

You can image map, meaning you define areas of one image (no
"splitting") by coordinates and link to the areas. You can google
up and have a go first on this.

Yes, I've done this before, but I was wondering how was best to do it within
this project.

But don't bother in your case, the nav div is best to be a simple
inline list. An image is bad for this purpose, at least for the
good reason that it does not scale.

Look at:

<http://alistapart.com/articles/taminglists/>

And theres the answer. Thanks, I'll read up.

You will buy yourself more problems and trouble achieving this.
Let it scroll and keep it simple.

Will do

How do other sites that you admire do this? Have you looked? If
you want a canvas area then one way to do it is very simple, you
wrap all your code under the body in a wrapper div and set the
margin for this wrapper in px or in em. Try it and see what you
like. It is not a bad look done with modest numbers for some
sites. Take a look at the css instruction of "margin" and set for
all sides as you like, eg:

#wrapper {margin:5px 20px 5px 20px;}

This gets top, right, bottom and left respectively.

As for grace with text within the wrapper and other boxes, apply
a modest bit of padding, best in em.

Thanks for your help, even if you do seem a little stressed by point 3.
Perhaps I could buy your a beer <g>

 

[Chaddy2222]

Huh? That's a non-sequitur.

Ahh, yes I see what you mean. I think what I was talking about was not
useing capitals in file names but that is another issue. But most
Linux servers are set-up to recognise the .html extension by default
are that not? I was always under the impression that they were and
that if that extension for the index page did not exist that they
would then look for a .htm extension. I personally now just use re-
directs through .htaccess so don't need to concern myself with this
stuff as much (although I do to an extent.

 

[Bergamot]

As part of my degree I am studying Web Development, and now I better
understand websites I am designing up the website of a charity (local
theatre) in CSS and XHTML 1.0 Trans.

Were you instructed to use XHTML Transitional? If so, your instructor is
incompetent.

Moving away from tables due to accessability problems etc etc.

http://www.blt.org.uk/css/index.htm

1. Image Mapping. How is best to map the image to turn graphics into
hyperlinks.

As someone else mentioned, the most accessible method would be plain
text links styled with CSS. Using list mark up for navigation menus has
become the accepted norm.
http://css.maxdesign.com.au/listamatic/

You can embellish with background graphics to get pretty much the same
effect as the site has now and still be scalable with varying window and
text sizes, but that is a bit advanced for a newbie. Keep it simple and
you'll get better results.

2. Scrolling. This is my main problem at the moment. When the page gets
longer the content div just keeps going down the page, what I want is for
the site to be x% sizes of the screen (leaving some red border) no matter
what the resolution (upto a min of 800x600).

Stop wanting this. If you're dropping layout tables for accessibility
reasons, putting in a scrolling div would be substituting one
accessibility problem with another, perhaps worse one. Scrolling divs
are a navigation nightmare for keyboard users. They are cumbersome at
best, unusable at worse.

Were you instructed to use a scrolling div, too? :-(

 

[Richard Formby]

We were instructed to use transitional.

Then you should ask for your money back.

 

[Bergamot]

Yes I was!
The instructor is a leading figure on sitepoint I believe.

"a leading figure" doesn't mean anything. There are countless number of
"experts" that are in reality quite clueless. University instructors for
HTML and web design for the most part seem to be the worst of the worst.

Using XHTML Transitional for any project is questionable at best. For
rewriting an existing site, or for a new project it's just wrong. Stick
with HTML 4.01 Strict.

 

[dorayme]

It was more of, an excuse me as I'm not exactly sure how this group works.

That's a nice and fair enough answer. I just cannot abide
anything lowly and snivelling, which is not the case, as you

Being taught int XHTML so it seems sensible to move that way.

Let me back up my point with a lowly and snivelling argument by
authority by an authority:

"The expert advice is to use HTML 4.01, but you can of course use
technobabble-XHTML _if_ you are careful enough to follow
guidelines that effectively make it HTML 4.01 with pointless
kludges."

and

"In practical terms, XHTML is pointless as a delivery format of
WWW documents for the time being. It's just an exercise in
futility, though some day things might change, in some direction."

Thanks for your help, even if you do seem a little stressed by point 3.
Perhaps I could buy your a beer <g>

I drink beer in order to be seen to drink it and so lessen the
chances of deportation (Australia is hard on aliens). For stress,
I prefer a good shot of bourbon.