19 replies [Last post]
Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

It's not as simple as I thought. This first url is how I want the white to appear: http://www.angelfire.com/il/journaljourney/figge/css-trial.html As part of the content in the white is a title graphic - the rest of the area needs to go to the bottom of the gray, only with white.

The page I am having trouble with is here: http://www.angelfire.com/il/journaljourney/figge/The-Great-American-Thing-text.html If you scroll down to the first text panel, it is the graphic "Engineered America" with the white background that I need the white to extend down to the bottom of the gray.

I can do it with the empty divisions as in my mock-up but the minute I put content in there, it shrinks.

Thank you for looking. Regards,
Pete

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Problem understanding how to fill a div with color

Erm

Quote:
THIS document was created with a 800x600 monitor resolution in mind using Internet Explorer as the browser. At other resolutions and with other browsers I am sure we both would be surprised with the results.

Have you been sucked into the future from 1999 or something. This kind of thing really does not cut it any more. What you are doing would not be too hard to get working in most browsers.

Also some points

Any reason to use <span class="strong"> and <span class="italic"> rather than the actual tags <strong> and <em>

<div class="desc"><br><br>
<p>...and now we go inside...</p>
<p>The first text panel is beside photographs by Alfred Stieglitz and Alvin Coburn.</p><br>
</div>

There are margins and padding to create space. br's are not the best way to do this.

And best of all - Level Triple-A Conformance - Really, is this a joke?

Anyway you probably want to read this to solve the white bar problem

http://www.alistapart.com/articles/fauxcolumns/

Basically have a small repeating graphic going down the left side of your wrapper div or something.

And should you want to re-do page with things other than IE in mind I would also read this as you have an incomplete doctype

http://www.alistapart.com/articles/doctype/

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

I'm blooming from where I'm planted

This page is being built for the visual effect first with what I *do* know, and refined as I go with what *should be*. I will be eliminating the <br> tags but first things first.

I thought the elementary thing to remember is the HTML has content and use the CSS for styling the document: that's why I use spans for italics and bold text, no other reason.

Triple A conformance - A joke?... um... not really. Perhaps those who make a living designing pages specifically for a client must have tunnel vision for the project but my page is intended for a much wider audience. That's also the reason I put the stuff about browser and monitor resolution - Once I check in other browsers and other resolutions this comment might save me from hate mail Smile

I apologize for the incomplete doctype - it was the generic standard one that comes with 1stPage2000. I'll fix it. Thanks for the reference to alist apart. I knew I'd seen it somewhere before.

I.E. is the corporate browser of choice here so it's the only thing I see till I get home. Seldom do I get on the computer at home though.

I appreciate your comments.
Pete

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Re: I'm blooming from where I'm planted

Pete wrote:
Triple A conformance - A joke?... um... not really. Perhaps those who make a living designing pages specifically for a client must have tunnel vision for the project but my page is intended for a much wider audience. That's also the reason I put the stuff about browser and monitor resolution - Once I check in other browsers and other resolutions this comment might save me from hate mail Smile

Sorry if I seemed rude - I get irrationally annoyed when I see WIA Tripple A buttons - but "my page is intended for a much wider audience" and " THIS document was created with a 800x600 monitor resolution in mind using Internet Explorer as the browser." and very contradictory. At the moment you page is not AAA complient - in all honest it probably never will be. Most people seem to be of the opinion that it is almost impossible to get a page to be truly AAA compliant.

Quote:
I thought the elementary thing to remember is the HTML has content and use the CSS for styling the document: that's why I use spans for italics and bold text, no other reason.

The HTML should have content yes but it's structure should be semantic - it should describe the data it holds. hence bulding everything from spans and divs would render the whole thing pointless. Imagine looking at the HTML with no css, using a span would make your bold or italic bits look exactally the same as one another. Where as if you use the appropriate tags, the information is self describing, the <strong> bits are strong, the <em> bits are emphasised.

Quote:
I apologize for the incomplete doctype - it was the generic standard one that comes with 1stPage2000. I'll fix it. Thanks for the reference to alist apart. I knew I'd seen it somewhere before.

Be aware that once you do fix it things might look a bit od in IE at first. the incomplete doctype is putting IE into quirks mode and as such it's using an old rendering model. Once you have the full doctype it'll flip ito standards mode and as a result you might need some tweaking. However on the plus side it will mean that it is much more likey to work in other things and thus reduce the hate mail you are Laughing out loud

Not sure if it's possible in your corporate environment but I would try and install a more compliant browser like Firefox, build sites on that then tweak for IE. It'll make life much easier in the long run on yourself.

Anonymous
Anonymous's picture
Guru

Re: I'm blooming from where I'm planted

Pete wrote:
... my page is intended for a much wider audience. That's also the reason I put the stuff about browser and monitor resolution ...
Those statements contradict each other. You can't intend a page for a "much wider audience" and then automatically alienate a (growing) percentage of the world that doesn't (and refuses) to use IE on a regular basis.

The point briski made about using <strong> and <em> is valid as both tags are semantic and have place in html and both have more meaning to screen readers than a <div> tag. That is an accessibility issue.

You are not clearing your floats so you may want to read this: http://www.csscreator.com/attributes/containedfloat.php

I found this really hilarious: Laughing out loud Especially, having it sit next to the W3C buttons.

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

Yeah but...

Life is full of contradictions, isn't it. Sure I can: seems to me that I can validate the work on everything available, make corrections, but add what *I'm working on* - I think that indicates an attempt to make the page so anyone can see,... but I don't know that they will till I check.

Thanks for the links on clearing floats. (does Triumph refer to the motorcycle? Wink )

briski is right about the page not quite looking right once I get the full doctype in: where'd I put the chain saw?

I appreciate the feedback.
Pete ](*,)

Anonymous
Anonymous's picture
Guru

Re: I'm blooming from where I'm planted

briski wrote:
"my page is intended for a much wider audience" and " THIS document was created with a 800x600 monitor resolution in mind using Internet Explorer as the browser." and very contradictory.
Looks like you said the same thing ... while I was typing. Laughing out loud

Anonymous
Anonymous's picture
Guru

Re: Yeah but...

Pete wrote:
(does Triumph refer to the motorcycle? Wink )
No, actually this fellow: Laughing out loud

briski
briski's picture
Offline
Elder
London
Last seen: 10 years 9 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Re: Yeah but...

Pete wrote:
seems to me that I can validate the work on everything available

Just to point out that a valid page does not make an accessible page. If I create a page with a white background and white text at 1px font site it may well validate but it sure as hell won't be much use to many people.

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

As a counterpoint what do you see as accessible?

The conformance criteria listed are something you have to look at and check off, no? While your example is correct it has no bearing (that I can see) with the page in question.

I went through the list of things to look out for and evaluated the page by them. It certainly is not a pass/fail system like validating code but it give you something.

On another note, apparently this forum prefers text links to validation results as opposed to buttons? Besides being anti-IE is the W3C on a 'kick me' list?

On a strictly amateur level (as opposed to someone paid to produce web sites) what is the list's preferences for checking validity of html, css, accessibility, and perhaps some other things I'm too new to even know about at this point.

Pete

P.S. Thanks for the spell checker feature. Great to have it.

Anonymous
Anonymous's picture
Guru

Re: As a counterpoint what do you see as accessible?

Pete wrote:
The conformance criteria listed are something you have to look at and check off, no?
Accessibility is much more than checking off a list.

Pete wrote:
On another note, apparently this forum prefers text links to validation results as opposed to buttons? Besides being anti-IE is the W3C on a 'kick me' list?
Wha? :?

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

We can do this the easy way or the hard way...

"Accessibility is much more than checking off a list. "

This is like pulling teeth. Do you perhaps have a reference :?:

You'll have to think back a little (or a lot) to when you first gave a hoot about your documents. Did you *ever* [-X put validation button on your site or did you always have a line at the bottom with links to "xhtml, css, 508"

Pete

=;

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 16 years 45 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Problem understanding how to fill a div with color

I didn't, reading this, get the understanding that anyone posting was laughing at the inclusion of your W3C buttons, but at the inclusion of the backwards compatable graphic and the AAA button, specifically.

And, as a someone who isn't a professional web developer, I still do the things these guys are advocating. In my opinion, being an amateur at something doesn't excuse not TRYING to do it right. It's one thing to be new to something and not know better, it's another to be too... what? Lazy? conceited? something, anyway--to check your site in other (more standards-compliant) browsers and on other (more prevalent) resolutions.

If this is a project your boss has assigned you, then you might mention that installing something like Firefox and altering your screen resolution are necessary in order for the result to be worth having at all. People put a lot of stock in a web page and very few users will change their settings to match what's "optimal" for a web page. If the site looks broken, most people will probably just skip it.

So, even for an amatuer like me (though if your boss told you to work on this, then you're getting paid and, technically, that would make you a professional), testing is absolutely vital.


->Day<-

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem understanding how to fill a div with color

I think what people have been trying to get at (without actually saying it) is that even acknowledged experts in accessibility, people who get paid, not only to design sites, but design them specifically with accessibility issues in mind, baulk at giving themselves AAA ratings cos it's generally considered impossible (here's an article with some reasons why).
So if the experts (not just the professionals) don't do it, can you see how silly it is for someone who professes to be an amateur to claim such a rating?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

The link is appreciated.

Interesting article and I can see the point. I hope it is ok to have an 'A' conformance button to show an attempt was made to make the site accessible.

This is a project I gave myself. I am a photographer. I like what you can do with web pages, and I am attempting to get better with style sheets. As stated in the 'preamble' to the page I am trying to replicate the feeling of the exhibit, at least what you can grasp from the text panels. That is why the colors, fonts, and general layout are things I'm trying to tweak.

Knowing how the box models of each element works is tripping me up somewhat. I do sincerely appreciate the information given here.

Pete

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: The link is appreciated.

Pete wrote:
I hope it is ok to have an 'A' conformance button to show an attempt was made to make the site accessible.

If you can honestly say that not only have you made an attempt, but you understand what the level 1 guidelines are and what they mean and that your site fits those criteria, then yes.
If you're unsure about meeting the criteria exactly, another option is to have an accessibility page (you'll find quite a few on the sites listed in this article written by this forum's resident accessibility expert, Lorraine) which explains what efforts you have made towards accessibility but without actually claiming any particular level of compliance (that's the option I've chosen for my own site).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

Eyes are wider open, thanks.

Very informative article for me and awesome downloads. I'm exploring other areas of the Forum since I do want to get much better at using and understanding how css actually behaves.

The time and effort you put into including links and why has been very helpful. Thanks.
Pete

Anonymous
Anonymous's picture
Guru

Re: We can do this the easy way or the hard way...

Pete wrote:
Did you *ever* [-X put validation button on your site or did you always have a line at the bottom with links to "xhtml, css, 508"
I don't like the w3 stock buttons much. They are too big and too ugly and not the right color for any page. Smile

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

You are not alone there :)

As I look over more and more pages it looks like just a text link is provided, and that is usually in a smaller font making it *almost* hidden but not quite. I've certainly made a few changes along those lines since this is more of a personal page. The only people that might see it are the museum staff and anyone they give the url to. I've got a long way to go learning css but I expect it will be more fun than hair-pulling....

Pete
Offline
newbie
Last seen: 18 years 12 weeks ago
Timezone: GMT+2
Joined: 2004-05-29
Posts: 9
Points: 0

Many improvements made but one little problem still exists..

I've been studying floated images and faux columns to solve a problem: at this url [ http://www.angelfire.com/il/journaljourney/figge/The-Great-American-Thing-text.html ] the white text graphic on the left side of the panel (there are several down the page) is the culprit. I want to get the white to extend down to the end of the gray area.

I created a gif image the width of the graphic (56px wide X 1px high) and tried to have it as a background image for the div the title graphic is enclosed in. That made an indentation on the *right* side of the div (at least once it did). The code for that div is:

.title-graphic {
background: url(http://www.angelfire.com/il/journaljourney/figge/tgat-white-filler.gif) repeat-y 0 0;
color: #000000;
float: left;
width: 56px;
height: 100%;
background-color: #ffffff;
}

As I understand it the repeat-y should scroll the graphic vertically and the 0 0 should put it starting in the top left corner of the division.

Thank you for your continued help on this.
Pete

[edited: added on 1 Nov] I changed the first text panel to a table layout to more graphically illustrate what I am trying to accomplish. I also added borders to all the divs so I could tell how they are acting. While I found it interesting, I don't really know how to line up the divs so they behave like the table layout.