Website Design

[H8TR]

How do you make websites so that no matter how large the web browser window may be, the background adapts to it. An example is Wiikey.cn. No matter how small or large your window is, the content of the page is always centered and the background always adapts to your windows size. I prefer to work in Dreamweaver CS3 but will try anything else you suggest. Is it CSS or some next type of HTML?

 

[rhyguy]

well, if you examined the source code, you could know, but i believe that the background is a one that repeats infinitely to the right, and the text bit is probably placed in a centered div

edit:to do this, type in
CODE Junk here
iirc

 

[Little]

The best thing to do is take a look at exisiting examples so you can get your head around it

Using Wiikey.cn's source we can see that theres nothing relating to the back ground in HTML but we can see that they have a CSS file (or three).
CODE

Quick visit to http://www.wiikey.cn/css/layout.css and we can take a peak at their CSS.

body
{
ÂÂÂÂfont-family:Verdana, Arial, Helvetica, sans-serif;
ÂÂÂÂfont-size:13px;
ÂÂÂÂcolor: #464646;
ÂÂÂÂbackground-image:url(../images/background_main.png);
ÂÂÂÂmargin: 0px;
}

#top {
ÂÂÂÂbackground-image:url(../images/background_top.png); 
ÂÂÂÂbackground-repeat: repeat-x; 
ÂÂÂÂwidth:100%; 
ÂÂÂÂheight:132px
}

From that we can see the technique they've used.... the whole of the background is the blue part, which is just a repeating pattern that by default is tiled...

Then they have the orange part repeated over the X axis only

There are lots of techniques for creating similar effects too.
For the centre they just have a Div that is centered and everything else is contained within that =)

 

[WeaponXxX]

In dreamweaver click the main table and then right click, align, center

 

[XeroRestraint]

In dreamweaver click the main table and then right click, align, center

Booo - bad advice.

Don't use tables for layout - use DIVs!

Tables are for tabular data - not layout. Using tables for layout results in non-standards compliance.

Learn CSS, use CSS & DIVs for layout.

Tables for layout is so 1995

 

[JPH]

Yes, I was also wondering that question.

I've got an HTML class coming up soon that could probably answer my questions and help me learn more about creating web sites...

I figure if I start now (at the age of 14), I could be so much better when I'm older and maybe have a career in Web Design.

Well...I'm gonna stop babbling - I know you don't care

 

[rhyguy]

Yes, I was also wondering that question.

I've got an HTML class coming up soon that could probably answer my questions and help me learn more about creating web sites...

I figure if I start now (at the age of 14), I could be so much better when I'm older and maybe have a career in Web Design.

Well...I'm gonna stop babbling - I know you don't care

lol, i'm 13 now and i learnt html/css on ...neopets(lol)
i know alot of it pretty well

 

[iffy525]

lol, i'm 13 now and i learnt html/css on ...neopets(lol)
i know alot of it pretty well

wow

maybe i should do neopets

 

[Switchy]

Meh, I studied Webdesign but I'm not getting anywhere in the professional world!
Here, they always have something specific you should know, which I happen to not know. *grumbles* Besides, there always seems to be a bigger nerd out there than me

Anyways, you can get this with frames as well.
Three columns:
size="*" / size="whatever floats your boat" / size="*"


The size="*" is used to change according to the room that is left.

 

[Little]

Switchy did you know that frames are technically illegal in most countries if your website is offering a public service? They break quite a few disability laws because of their incompatibility with special browsers and text to speech programs.

Seriously move away from tables and frames for layouts. HTML with CSS is what you need.
You have to separate content and design as much as possible.

 

[rhyguy]

Switchy did you know that frames are technically illegal in most countries if your website is offering a public service? They break quite a few disability laws because of their incompatibility with special browsers and text to speech programs.

Seriously move away from tables and frames for layouts. HTML with CSS is what you need.
You have to separate content and design as much as possible.

wait, bad coding is illegal?

anyway, divs are the best way to keep stuff organised

 

[legendofphil]

Switchy did you know that frames are technically illegal in most countries if your website is offering a public service? They break quite a few disability laws because of their incompatibility with special browsers and text to speech programs.

Seriously move away from tables and frames for layouts. HTML with CSS is what you need.
You have to separate content and design as much as possible.

Frames aren't illegal as they don't break any laws, same with flash. It is just a set of highly recommended suggestions, its unfair to those people.

IMO frames and flash are crap anyway, any use of flash should be keep to a minimum and always backed up with a text based alternative.

Tables are really good IMO, providing you use them right, my site is done using tables because CSS has a few major flaws when it comes to placement.
First it wouldn't work in IE, then it would ONLY work in IE

.

 

[Switchy]

I did not know about it being "illegal" but tables are much better for people who just want to make a site for themselves, or to start.

It's the easiest way for a beginner imo.

 

[superrob]

I dont like DIV's they screw op my designs

I like to setup my webdesigns with tabels.
Its easy and good

 

[Szyslak]

Besides, there always seems to be a bigger nerd out there than me

QFT. That is actually an excellent lesson to learn in the professional world. It's best to bring something else to the table besides technical knowledge. The ability to learn is much more important that what you already know.
[/Boring PSA]

XeroRestraintTables for layout is so 1995

Now you're just making me feel old.


OT: learn how to do it in more than one way

 

[Little]

Psst as I said, because of disability laws in a lot of countries, anything that counts as a public service has to be accessible by everyone... including those with disabilities. Just like a person who can not walk may use a wheelchair and needs stair free access to buildings, a person who can not see may use a special web browser with text to speech. Just because a website is virtual doesn't mean it isn't under the same laws, in fact that is a segment of most disability laws directly relating to websites and virtual content. Frames are not compatible with any existing disability browsers and hence not providing some form of other access that is compatible for that public service, is illegal.

 

[Szyslak]

Right, but those laws wouldn't really apply to any kind of personal website (and I would doubt there's much enforcement of it on public service websites).

For the same reason that I don't need wheelchair access to the front door of my home, I could use frames & tables on my own website if I wanted to. I'm not saying it would be considered good practice anymore, but it wouldn't be illegal either.

BTW, I just re-read your qualifying statement "...if your website is offering a public service", and I guess that would be the key condition. But what would qualify your website as "offering a public service", and who would decide that? Seems like a rather gray area to try to enforce a law.

Just to examine the flip side, why isn't it against the law to provide special browsers or text to speech programs that can't handle frames? Isn't that also limiting the access of the disabled to a large amount of existing web content? Sounds silly I know, but why is the onus placed on the website designer and not the software provider?

I would end this post with some type of smiley, but I wouldn't want to get arrested.

 

[XeroRestraint]

Psst as I said, because of disability laws in a lot of countries, anything that counts as a public service has to be accessible by everyone... including those with disabilities. Just like a person who can not walk may use a wheelchair and needs stair free access to buildings, a person who can not see may use a special web browser with text to speech. Just because a website is virtual doesn't mean it isn't under the same laws, in fact that is a segment of most disability laws directly relating to websites and virtual content. Frames are not compatible with any existing disability browsers and hence not providing some form of other access that is compatible for that public service, is illegal.


You are absolutely correct. Here in the Us we have the ADA (Americans with Disabilities Act) which also provides the same accessibility mandates. Add tables used for layout to the list of HTML gadgets that are not compliant with screen readers. Regardless of how you eyes may interpret the logical order of content in table cells, screen readers cannot. This also presents problems for mobile web browsers' ability to resize content effectively like cell phones, pdas, nds, psp.

Plus, tables are inflexible, load slower, and do not print well. Since the introduction of CSS it has become clear that the proper way to construct a web page is by marking up your structural content in html and your layout/presentation markup in css.

Granted using tables is an easy quick workaround to make something look the way you want but understand that it is an amateur kludge.

Tables are really good IMO, providing you use them right, my site is done using tables because CSS has a few major flaws when it comes to placement.
First it wouldn't work in IE, then it would ONLY work in IE

The only example of where tables have an advantage over proper css layout is for vertical alignment. Granted there are CSS workarounds but standards compliance is all about eliminating hacks so I concede the point here. I suspect other "flaws" you refer to are just instances of not fully understanding the rules of css.

I dont like DIV's they screw op my designs

I like to setup my webdesigns with tabels.
Its easy and good

Easy =/= good
Until you face the reality that css, and divs are both the present and future of web design, don't count on a career as a web designer. Pro's don't take the easy way out, especially when it is inferior.

QUOTEXeroRestraint

Tables for layout is so 1995

QUOTE

Now you're just making me feel old.

Not sure what you meant by that since tables were officially added to HTML spec 3.20 in early 1996. Perhaps this should have made you feel young?

 

[XeroRestraint]

Just to examine the flip side, why isn't it against the law to provide special browsers or text to speech programs that can't handle frames? Isn't that also limiting the access of the disabled to a large amount of existing web content? Sounds silly I know, but why is the onus placed on the website designer and not the software provider?

It's not that screen readers can't "handle" frames or tables, it's that then structural markup (HTML) cannot tell them what order to "read" them other then left to right, top to bottom. This is not a problem for tabular data that is meant to be read that way but when tables are used for HTML layout they typically employ empty cells, spacer images, and an out-of-logical order data flow. Further, frames do not declare a logical order in their markup, nor is one implied at all.

 

[Szyslak]

XeroRestraint

Tables for layout is so 1995

Now you're just making me feel old.

Not sure what you meant by that since tables were officially added to HTML spec 3.20 in early 1996. Perhaps this should have made you feel young?

Not following you. The fact that my first websites were coded by hand and relied heavily on the use of tables for layout purposes (circa '95 - '96 or so), and that it is now over 10 years later, makes me feel old. Seeing "tables for layout" and the year "1995" makes me feel old. It also helps to illustrate how antiquated the technique is by now.

Psst as I said, because of disability laws in a lot of countries, anything that counts as a public service has to be accessible by everyone... including those with disabilities. Just like a person who can not walk may use a wheelchair and needs stair free access to buildings, a person who can not see may use a special web browser with text to speech. Just because a website is virtual doesn't mean it isn't under the same laws, in fact that is a segment of most disability laws directly relating to websites and virtual content. Frames are not compatible with any existing disability browsers and hence not providing some form of other access that is compatible for that public service, is illegal.

You are absolutely correct. Here in the Us we have the ADA (Americans with Disabilities Act) which also provides the same accessibility mandates. Add tables used for layout to the list of HTML gadgets that are not compliant with screen readers. Regardless of how you eyes may interpret the logical order of content in table cells, screen readers cannot. This also presents problems for mobile web browsers' ability to resize content effectively like cell phones, pdas, nds, psp.

AFAIK, in the US, the ADA laws only apply to government services. The federal and some state governments have to abide by the Section 508 laws and there are workarounds for most of it (ie making the info available through TTY or automated phone systems). There are no "laws" governing the coding techniques of the general populous. General guidelines, yes (as it should be).

Just to examine the flip side, why isn't it against the law to provide special browsers or text to speech programs that can't handle frames? Isn't that also limiting the access of the disabled to a large amount of existing web content? Sounds silly I know, but why is the onus placed on the website designer and not the software provider?

It's not that screen readers can't "handle" frames or tables, it's that then structural markup (HTML) cannot tell them what order to "read" them other then left to right, top to bottom. This is not a problem for tabular data that is meant to be read that way but when tables are used for HTML layout they typically employ empty cells, spacer images, and an out-of-logical order data flow. Further, frames do not declare a logical order in their markup, nor is one implied at all.

I get that, I just think it can also be viewed as a fundamental technical limitation of the interpreting software. A true reader would have a way to communicate the design of the page as rendered, not as coded.

Look, I agree totally with you. CSS is the way to go, and no one in their right mind should be using frames in their web design. I just think it's interesting to discuss whether poor design decisions should be against the law.

Cheers for providing some good info and helping me waste some time at work (which, thank god, is not web design)