Overall Website Positioning

I am currently working on a web site that consists of multiple pages.
I have chosen to use a single external style sheet (CSS) for the ease of making changes later, as necessary.

For uniformity sake, the header, main-navigation, main-sidebar, main-content areas and footer will remain unchanged "positioning-wise" and "styling-wise" across the web site. My approach to this point has been to give these divs the same id for each corresponding page, i.e. mainContent, mainNav, mainSidebar for ease of styling. The only divs I have been focused on to this point has been the mainContent div and a couple of the divs where content changes from page to page. I have had no problem with the positioning of the mainNav, mainSidebar, or footer as I have not begun filling them with content.

Through adding other divs (images / text) which will change from page to page, I have found myself needing to "tweak" the positioning of mainContent naturally resulting in inconsistency in positioning between pages. I should have realized this was going to happen, but I am learning as I go.

Now that I have identified my error, what is the best approach to correct my positioning issues?

Should I go back and change the id's to these divs so as they will be unique to the page on which they reside? For example mainContenthome, mainContentabout, mainContentfaq, etc as this will allow for unique positioning but lose their common styles only to reapply them later? That would undermine the whole idea of sharing an external CSS style sheet for ease in updating pages later.

Or, should I my approach be to keep the current ids for mainNav, mainContent, and mainSidebar applying their styles (positioning) once, leave them alone and assign more unique ids to the remaining divs that change in size and content from page to page i.e. topFacthome, topFactabout and topFactfaq, etc.

Or is this issue related to relative and absolute positioning? I must admit, I am not quite solid in understanding the options (pro and cons) these options. Sitewide I have only employed positioning through padding and margins, nothing is positioned relatively or absolutely. (I'm almost embarrassed to say that ....)

I apologize if the clarity of my issue is hard to understand. I tried my best to remain brief and concise. If you have questions about what the hell I'm trying to express, please ask rather than pass me by. :)

Cheers, and thanks ....

I apologize if the clarity of my issue is hard to understand. I tried my best to remain brief and concise. If you have questions about what the hell I'm trying to express, please ask rather than pass me by.



Yes all that text is hard to understand. What would be better is to see your code or better a link to your live site.

When you say you had to tweak positionings of your maincontent....I would bet you're using css positioning, which is probably not needed. The natural behavior of a div is to expand to fit the content within it. This Ideally should have no affect on adjacent/neighboring divs provided they are coded correctly.

So again, please post code or a link. If code, please use the code button(#) to wrap your code in tags.

I have found myself needing to "tweak" the positioning of mainContent naturally resulting in inconsistency in positioning between pages. I should have realized this was going to happen, but I am learning as I go.
We need proof/samples.

I have several pages that I am working on : home, about, faq, etc. Needless to say, I haven't attacked navigation/links, so I will refrain from posting to the web at this point.

Thanks again teedoff for remaining such a "constant" resource for me until this point. I do appreciate it.

Here ya go ..............

HTML:

I realize that there are unnecessary selectors in my CSS at the moment, as their values aren't contributing to anything. They are just the result of trying out different options. I haven't "cleaned" anything up, I figure it's too early for that as I am far from publishing to the web.

Currently I am using DW to enable easy and quick trials at attempting to design. I know it can be a bit of a crutch, but I am continuing to learn HTML and CSS from the ground-up. There is A LOT to learn, I realize that.

Is there a "routine" way I should be attacking this whole endeavor? I mean to say, is there an "order" that I should stick to when progressing from one "functional" area to another, i.e. layout first, then content, then styling, etc? I have been just going along with what I happen to know at the time, and trying my best not to get to frustrated and quit. I really have no "strength" any any certain area, I'm sure I am causing more work that what is necessary ......

Thanks, and hello abduraooft.

The reason I am even interested is my desire to design is that I happen to have a lot of free time at the moment, and have been approached by a few people to start web design as a couple of "locals" here have a need, and I am willing to try and help them out.

Either of you looking for a "project" and mentor me? LOL Just kidding .............

Currently I am using DW to enable easy and quick trials at attempting to design. I know it can be a bit of a crutch, but I am continuing to learn HTML and CSS from the ground-up. There is A LOT to learn, I realize that.

Is there a "routine" way I should be attacking this whole endeavor? I mean to say, is there an "order" that I should stick to when progressing from one "functional" area to another, i.e. layout first, then content, then styling, etc? I have been just going along with what I happen to know at the time, and trying my best not to get to frustrated and quit. I really have no "strength" any any certain area, I'm sure I am causing more work that what is necessary ......

Thanks, and hello abduraooft.

The reason I am even interested is my desire to design is that I happen to have a lot of free time at the moment, and have been approached by a few people to start web design as a couple of "locals" here have a need, and I am willing to try and help them out.

Either of you looking for a "project" and mentor me? LOL Just kidding .............

You should never start creating a website without the content having been written. The design must suit the content, not the other way around. Content is always king.

I would suggest, if you are having trouble with your workflow, starting with a "wireframe" so that you know where everything will be located, and then slowly develop the styling from top to bottom. Some people find they work better if they make up the design as they're going along, but for a beginner I strongly recommend having already made the design — on Photoshop, Fireworks, pen and paper or whatever you know how to use best — before starting on the HTML.

Once you have functional HTML pages, implement anything that must be done server-side, e.g., SSIs or pulling information from databases.

Apostropartheid says

"I would suggest, if you are having trouble with your workflow, starting with a "wireframe" so that you know where everything will be located, and then slowly develop the styling from top to bottom. Some people find they work better if they make up the design as they're going along, but for a beginner I strongly recommend having already made the design — on Photoshop, Fireworks, pen and paper or whatever you know how to use best — before starting on the HTML. "

Thanks for your input. I started out attacking the layout, then got caught-up with playing around with styling. Then one thing led to another, and my focus was lost. I would have to resort to using a "pen and paper" wireframe because I really don't want to introduce too much more onto my plate by having to learn another program. Remembering that "content is king" shouldn't be too difficult an idea for me to grasp - Thanks for that "bone."

Thanks again for taking the time to help me, it's much appreciated.

Cheers