newbie is getting closer, but still needs help

[danandirma]

ok all, I finally figured out how to get dreamweaver to export my pages in CSS, now I need to know how to get it centered in the browser? this is the page http://www.gnbarchitects.com/test1.htm and this is the CSS code
<STYLE TYPE="text/css">
<!--

DIV.test-01 {
position:absolute;
left:0px;
top:0px;
width:921px;
height:140px;
}

DIV.test-02 {
position:absolute;
left:0px;
top:140px;
width:184px;
height:20px;
}

DIV.test-Main-shape {
position:absolute;
left:184px;
top:140px;
width:568px;
height:516px;
}

DIV.test-04 {
position:absolute;
left:752px;
top:140px;
width:169px;
height:405px;
}

DIV.test-05 {
position:absolute;
left:0px;
top:160px;
width:24px;
height:543px;
}

DIV.test-button-home {
position:absolute;
left:24px;
top:160px;
width:150px;
height:22px;
}

DIV.test-07 {
position:absolute;
left:174px;
top:160px;
width:10px;
height:543px;
}

DIV.test-08 {
position:absolute;
left:24px;
top:182px;
width:150px;
height:1px;
}

DIV.test-button-mission {
position:absolute;
left:24px;
top:183px;
width:150px;
height:21px;
}

DIV.test-10 {
position:absolute;
left:24px;
top:204px;
width:150px;
height:1px;
}

DIV.test-button-portfolio {
position:absolute;
left:24px;
top:205px;
width:150px;
height:21px;
}

DIV.test-12 {
position:absolute;
left:24px;
top:226px;
width:150px;
height:1px;
}

DIV.test-button-forms {
position:absolute;
left:24px;
top:227px;
width:150px;
height:21px;
}

DIV.test-14 {
position:absolute;
left:24px;
top:248px;
width:150px;
height:1px;
}

DIV.test-button-contacts {
position:absolute;
left:24px;
top:249px;
width:150px;
height:21px;
}

DIV.test-16 {
position:absolute;
left:24px;
top:270px;
width:150px;
height:1px;
}

DIV.test-button-firm-profile {
position:absolute;
left:24px;
top:271px;
width:150px;
height:21px;
}

DIV.test-18 {
position:absolute;
left:24px;
top:292px;
width:150px;
height:1px;
}

DIV.test-button-institutional {
position:absolute;
left:24px;
top:293px;
width:150px;
height:21px;
}

DIV.test-20 {
position:absolute;
left:24px;
top:314px;
width:150px;
height:1px;
}

DIV.test-button-religious {
position:absolute;
left:24px;
top:315px;
width:150px;
height:21px;
}

DIV.test-22 {
position:absolute;
left:24px;
top:336px;
width:150px;
height:1px;
}

DIV.test-button-urban-design {
position:absolute;
left:24px;
top:337px;
width:150px;
height:21px;
}

DIV.test-24 {
position:absolute;
left:24px;
top:358px;
width:150px;
height:1px;
}

DIV.test-button-planning {
position:absolute;
left:24px;
top:359px;
width:150px;
height:21px;
}

DIV.test-26 {
position:absolute;
left:24px;
top:380px;
width:150px;
height:1px;
}

DIV.test-button-residential {
position:absolute;
left:24px;
top:381px;
width:150px;
height:21px;
}

DIV.test-28 {
position:absolute;
left:24px;
top:402px;
width:150px;
height:1px;
}

DIV.test-button-commercial {
position:absolute;
left:24px;
top:403px;
width:150px;
height:21px;
}

DIV.test-30 {
position:absolute;
left:24px;
top:424px;
width:150px;
height:279px;
}

DIV.test-31 {
position:absolute;
left:752px;
top:545px;
width:19px;
height:158px;
}

DIV.test-recent3 {
position:absolute;
left:771px;
top:545px;
width:131px;
height:103px;
}

DIV.test-33 {
position:absolute;
left:902px;
top:545px;
width:19px;
height:158px;
}

DIV.test-34 {
position:absolute;
left:771px;
top:648px;
width:131px;
height:55px;
}

DIV.test-35 {
position:absolute;
left:184px;
top:656px;
width:568px;
height:47px;

[Twey]

You can't. You have, or more likely Dreamweaver has, set up the code such that it displays using only absolute positioning in pixels. This is the most inflexible layout imaginable. The fact that your page is composed entirely of images means that it can't be resized (it's virtually unreadable for me because I have a high-resolution monitor), and there's no way to provide content for people using non-visual media such as screenreaders. It also fails validation miserably (http://validator.w3.org/check?uri=http&#37;3a%2f%2fwww%2egnbarchitects%2ecom%2ftest1%2ehtm).

This is one of the worst pages I have ever seen, and given that that includes some generated by early versions of Microsoft Word, that's really saying something. At least when the markup is hideously invalid the content is generally more-or-less readable, or can at least be figured out by looking through (or perhaps "deciphering" is a more accurate term for the source that Word produces) the source.

You say you're a newbie, so I don't want to sound too harsh, but you've contradicted pretty much every principle of good web design in this page.

[danandirma]

Wow....... thanks for the help


You can't. You have, or more likely Dreamweaver has, set up the code such that it displays using only absolute positioning in pixels. This is the most inflexible layout imaginable. The fact that your page is composed entirely of images means that it can't be resized (it's virtually unreadable for me because I have a high-resolution monitor), and there's no way to provide content for people using non-visual media such as screenreaders. It also fails validation miserably (http://validator.w3.org/check?uri=http%3a%2f%2fwww%2egnbarchitects%2ecom%2ftest1%2ehtm).

This is one of the worst pages I have ever seen, and given that that includes some generated by early versions of Microsoft Word, that's really saying something. At least when the markup is hideously invalid the content is generally more-or-less readable, or can at least be figured out by looking through (or perhaps "deciphering" is a more accurate term for the source that Word produces) the source.

You say you're a newbie, so I don't want to sound too harsh, but you've contradicted pretty much every principle of good web design in this page.

[inkosi]

For being a moderator that was a really shame worthy reply.

danandirma, there's a lot of information you should go over in order to create this page successfully, and it's just too much to put into one post, but I can set you on your way.

I think you should really give the following site a thorough reading. Don't miss a word of it. It's called the web developers handbook, and should cover a lot of what you need to know.

http://www.alvit.de/handbook/

Also, you should utilize a social bookmarking site called del.icio.us, it's the ultimate resource in my eyes. It's where people can list and share their bookmarks.

http://del.icio.us/search/?fr=del_icio_us&p=web+development&type=all

Key things you should search for on it:

-Web design

-web development

-css

-dreamweaver

-usability

-web standards

[Twey]

For being a moderator that was a really shame worthy reply.It was blunt but accurate. I don't see anything wrong with that; as a newbie it's expected that one will produce bad pages. It simply needs a serious redesign, and I pointed out the areas in which it needed to be improved and the reasons behind each.
I think you should really give the following site a thorough reading. Don't miss a word of it. It's called the web developers handbook, and should cover a lot of what you need to know.That looks utterly confusing to the newbie -- I suspect it would be a good reference to someone who generally knows what they're doing and just wants to solve one particular problem.

danandirma, I'd rather point you towards http://www.howtocreate.co.uk/. They're probably the best tutorials I've come across so far.

[inkosi]

I don't see how it would be confusing... It's a general resource listing. Practically everything he could need to know would be covered by the sites within it. All he has to do is check the categories and then scan the sites.

[Twey]

It is a general resource listing, and I'm sure it does cover everything they would need to know, but all the titles are either vague and unhelpful (what's a "List-u-Like" when it's at home?) or very specific (if a newbie wants to know how to put copyright signs in his/her site, but doesn't know what HTML entites are, the link marked "HTML Character Entities" isn't of much use). They might be helpful to you or me, but to a newbie that page is not much use unless she/he clicks links randomly and happens to end up on a pertinent one.

It's also a minefield: there's indubitably bad advice in there as well, and without a working knowledge a newbie won't be able to tell it apart from the rest. There's also the likelihood of misapplication of good advice: most of the code snippets on ALA are written in XHTML, which is not suitable for most situations. A newbie wouldn't realise this, and might use it in an HTML page, or attempt to convert a whole HTML page to XHTML without fully understanding the ramifications of such a move.

[inkosi]

You could call almost any place a minefield when it comes to advice and pretty much every place is by somebody, especially when it comes to web developers, who run the gamut from reasonable to complete lunatics when it comes to standards, usability, or whatever. The guy has to look, weigh the options, and decide for himself somewhere along the line.

He shouldn't be worried to set out and scan those sites, even if it's without specific direction, or ability to utilize/understand everything within them immediately. He's got to encounter them sooner or later. I think that the resources I linked will be invaluable to him and many others that read this thread.

[Twey]

You could call almost any place a minefield when it comes to adviceIndeed, which is why I linked him/her to the most correct learning resource I've found so far outside the W3C themselves.
I think that the resources I linked will be invaluable to him and many others that read this thread.I agree that they would be, but I don't agree that the way they are laid out there is much use to newbies.

[inkosi]

... disagree.

Just because something isn't instantly consumable doesn't mean it's useless. All a newbie has to do is venture out and explore those places and he will be introduced to all sorts of useful things that can be investigated at his own pace.

When you google to find answers you don't know exactly what's on the other side of the links you click, but you still investigate. Same deal here. Who cares if it's not explicitly apparent what's on the other side. Click and find out, that's how people learn.


EDIT: not saying your link is bad.

[Peter Johnson]

Thank you Inkosi - good points and good site

[danandirma]

I wanted advice from an expierenced coder on how to fix this "test page" I guess some are sick of us newbies asking stupid questions. All in all, I still need help!

[Twey]

I gave you the only answer there is to give -- rewrite the whole thing using a more flexible positioning method. There's no way to centre it as it is now.

[danandirma]

Yes, I understand that. The thing is I don't know where to start? What is a more flexible positioning method? Be specific.


I gave you the only answer there is to give -- rewrite the whole thing using a more flexible positioning method. There's no way to centre it as it is now.

[Twey]

You can start with the tutorials on howtocreate.co.uk (http://www.howtocreate.co.uk/).

[Spiritvn]

Simply you can use <center> </center> html tag for the contain div. or include the css code in ur class:


body {
margin: 0;
}

."contain div class" {
margin: 0px auto;
}

You can start to learn CSS by my way:

http://q9-gaming.com/spirit/en/?p=10#more-10

[Twey]

Spiritvn, you evidently didn't read the code. Everything's absolutely positioned -- this means it's taken out of the flow of the document. Margins or <center> won't do a whole lot (and <center> is deprecated anyway).

[Spiritvn]

Spiritvn, you evidently didn't read the code. Everything's absolutely positioned -- this means it's taken out of the flow of the document. Margins or <center> won't do a whole lot (and <center> is deprecated anyway).

I have read the code and i have seen ur reply too, so i provide a way for him to begin again. I think you will agree with me that we can't use WYSYWYG and dreamweaver CSS to slice a design to tabless layout?

I think you have shown him that and he has understood it too.