Fixed Width Design

[TAz69x]

What are some of the best ways, or the best ways to implement or design a fixed-width site?

 

I'm a PHP and MySQL programmer, but I'm just learning site design and layout now (I thought it would be easier after [selectively] learning PHP and MySQL first!, which it is, but still complex!).  I know CSS pretty well, but implementing all of the [css] attributes practically now and learning about all of the html tags related to formatting and site design is the next step.

^{On a side note, do you know of any good sites, maybe complete sites, that teach how about all of the html tags and CSS attributes, AND mixing CSS+HTML for (complete) site formatting and design work?}

 

I tried a design for my first ever fixed-width design ^(FWD) page.

PS - I use Firefox most of the time, but occasionally Internet Explorer :'(, since I assume that it's the browser that's gonna be used by the majority of users. *ughhh, idiots

So I used a main <div>, and put a <table> 800x600, _errrh, 800 pixel width in the middle, and I used <div align="center"> for the main <div> as well.

*(On a side note, would it be better to use ^CSS to make the main <div> a ^class="", then classify its ^align's and everything in there instead of doing it in the tag itself

with ^{<div align="center" ... >}? ???)

 

So basically, I make a main <div>, then I put a <table> inside of that div of _{800 pixels}width, and from there, all of the content would go inside of that fixed-width table, including additional cells and other design "block" elements, all using table cells.

^{------------------------------------------------------------------------------------------------}

Is this design any good, is it too basic and could any problems arise?

It IS my first ever fixed-width design, meant as a test more than anything, to see how to make a fixed-width design from scratch, then design my own page within that system.

Would there be any problems when running it in Internet Explorer:'(, as I horribly found out with another fixed-width design site I had designed for myself, with heavy use of PHP, MySQL, users database, login, etc. etc., only to find out that the page with the most programming, that displayed a paginated search-list, a table of rows returned from a mysql_fetch_array() call, was formatted wrong by IE :'(, and aligned on the LEFT side of the screen in Internet ^*ughExplorer!  But, while testing it (to my dismay later on!) in Firefox all along, the formatting was all fine, and any formatting errors I discovered I handled on-the-spot as I came across them, and saw and fixed them all in Firefox alone.  But getting so far into the site design, then irrevocably trapped due to the huge amount of change it would involve to try to format the site properly now for Internet Explorer :'( (ughhh!) to display it properly!  I needed to learn how to make a fixed-width design from scratch, and learn the individual quirks of Internet Explorer:'( and Firefox and learn to code them in CSS, and then learn how to make a single page work for both Internet Explorer:'( and Firefox, with the formatting techniques for both browsers being accounted for in a single script.  It'll be best if the HTML is just fundamental and really a framework, and the CSS is really what handles all if not most of the formatting within both browsers, and accounts for any possible formatting errors that could occur in both browsers.

^{-----------------------------------------------------------------------------------------------------------------------------------------------------------------------}

^{- Extra Questions -}

So what are some good fixed-width design types and techniques?

What should I watch out for with formatting [errors/quirks] with Internet Explorer compared to Firefox?  And both in general?

Do you know of any good sites which preferably (see above green ^note) teach this to a great extent, perhaps BOTH CSS and HTML?

What are some of your best preferred personal methods for fixed-width design?

 

In addition, perhaps a fifth/sixth-ish/7th-ish question.  Do you know of any good template system implementations in PHP, perhaps that you use, using ^include()'s and perhaps ^require()'s.

A ^HEADER,_FOOTER design, both of which are included on each page, and the ^LAYOUT.CSS file is included in the ^HEADER file (eg. ^header.php), so each page uses the same ^LAYOUT.CSS, ^HEADER (could be a menu bar system and top design for example), and _FOOTER, which might just be standard fare, like ^{Copyright © 2007}, and mostly for the closing <div> tags, which were started in the ^HEADER.php file, which sets up the template (fixed width) design for each page.  And the _FOOTER ends the <div>'s opened up in the ^HEADER.

Then each individual page (eg. ^INDEX.PHP) ^include()'s ^header.php and _footer.php, which also gives the page ^layout.css included in the ^HEADER file.

This system would allow each individual page to exist on its own, but each page calls the ^header and _footer, which set up a couple <div>'s and maybe a BLOCK element or TABLE in the middle of the page, then the _FOOTER page closes the main <div>'s and maybe even the TABLE as well.  This would allow for each page to follow a general full-site design, and to maybe include a menu system in ^HEADER.php, which could act as a link guide for the site and add any other button-functionality that may be included on each and every page of the site, or PHP, or even Javascript, as anything is possible editing an essentially "site-wide" file/page, as altering ^header.php would change the ^HEADER for EVERY page on the site; just one of the many advantages of this kind of design/template/system.

Is this a good design system/template for a site?

 

Because I was also wondering if it's possible to have a single page, maybe a main page, to open or ^include() other pages separately, and the entire site could exist in that way, technically in a single page, which ^include()'s other pages based on specific parameters or calls; and this site might have some advantages theoretically speaking, as the "entire site" for example would exist as a single page, and many changes could be made quite easily across the site.  Though this is just a thought of a system/template design I've had in my head, and I don't know if it's real or is even possible.

Does anyone know anything about this, if this kind of design exists?

And if so, do you have any examples?

Tutorials?

Sites?

And whatever else you could offer about it?

 

And the first question about template design/system design as well, about <div>'s and ^HEADER's _w/^LAYOUT.CSS-> ^PAGE.php-> _FOOTER's

 

Please answer as many questions as possible!, they don't all have to be answered at once though, so take your time!

Most sentences with a question mark (actually all) are questions that I'm wondering and asking your expert help on for an actual answer!

Thanks so much for your help!

- TAz

[TAz69x]

My topic was moved.  Just curious, are you sure that was the best move?

It was originally in: http://www.phpfreaks.com/forums/index.php/board,58.0.html

or: Application Design/Layout

 

which, since I'm a PHP and MySQL programmer, and am specifically looking for that kind of help in addition as well (as per my post), thought that my post would go best in there, or perhaps at least another PHP/MySQL forum, one concerning additional coding, layout, and/or CSS/HTML.

 

It just seems a little out of place here, HTML/Javascript/CSS > HTML Help

 

Because I'm looking into using things like (specifically mentioned in my post) PHP's include() and require() functions heavily, especially in template design and structure, and a template system too.  Programming in PHP to do most of the work, with the main files named ^HEADER.php, ^LAYOUT.css, ^INDEX.php (and other pages using the template system), _FOOTER.php, it just seemed that my post would go best in another PHP forum, where other users/programmers in PHP could apply their help and knowledge, which would be invaluable in an already-PHP board.

 

Perhaps I'd be better of eventually splitting up my question(s) and posting them in different forums.  But for now, I just thought that this would go better in a PHP-user forum, unless of course this forum has a bunch of PHP programmers as well!, then this argument is slightly moot, and you can give me a lot of the help that I was hoping for!

 

Thanks so much again!

- TAz

[AndyB]

Whether you're using php or not doesn't matter a hoot to the browser that displays the resulting generated html.  The layout of your page(s) is entirely dependent on the html used.  You could use tables to center your design, but a far better method is to use CSS for layout purposes.  Nobody (I hope) will suggest tables as an appropriate solution to your layout question.  Somebody will surely post a few lines of a complete layout using CSS for you.

 

If you don't want to wait, and you need it 'done for you', look here -> http://www.inknoise.com/experimental/layoutomatic.php

[TAz69x]

That's a pretty cool page!; that's a beautiful gorgeous pretty good ^start for my search for fixed-width design sites, tutorials, examples, info, help, etc..  Is there an included tutorial for the specific example on the site that you posted?  (which I see is somewhat like one of the methods I discussed).  Where there's a main <div> that's responsible for centering the fixed-width "block" of the site, and a "block" ^{or perhaps even a <table> (but not in this case)} in the center, formatted with css.

 

That's pretty cool, thanks for the reply[ies] so far.  How is this for [as far as] fixed-width design/sites go?  Is it pretty good?  Is it a good technique?

 

I noticed on the site that they also ^mentioned that it formats for ^both Firefox _and Internet Explorer.

What exactly does it do specifically?  And why does it do this?

What is it about Internet Explorer [formatting] (and perhaps Firefox too) that it has to do this?

What would happen if it didn't do this?/what would it look like?

 

*Please answer as many questions as you can!  Every line that ends with a ^{?uestion-mark} is a question!

^{You don't have to answer them all at once if you don't want to, just try to get to whatever you can!}

 

Aside from this, any additional pages, sites, tutorials, comments, help, suggestions, etc. etc. are all still welcome!

- TAz

[AndyB]

Not sure why you need the frenzied formatting in your posts, but if it irritates other forum members as much as me you probably aren't going to get too many replies until you calm down.

 

The site I linked you to lets you decide just which format you want a CSS file written for.  Why it works like that is because that's how CSS works. Why browsers perform differently is something you could ask the browser manufacturers. To paraphrase another recent posted, there isn't enough bandwidth in the universe to fully explain why.

[TAz69x]

I apologize, I tend to write when I'm tired.  On a side note I suffer from a Central Nervous System disease, and it leads me to (much akin to an accompanying insomnia) to write needlessly long letters, or arbitrarily put forth effort into something where it's not really required or needed in any way.  I'll try to hold out from now on.

It was also the first time I had ever learned to use forum formatting as well, so this combined with my pain had me writing/formatting non-stop to keep focused on something.  I apologize again, I didn't mean to irritate anybody.

Sorry for my cns disease-induced protracted copious dilatability, the very circumlocution of this sentence is a quintessential incarnation of my sleep-deprived loquaciousness.  aka, I needlessly put too much effort into something asinine, and heavily over-talk too much; a combination of the pain of my condition, accompanying insomnia, and keeping my mind off of something (like my pain), especially after learning something else somewhat interesting for the first time (forum formatting), and implementing it, albeit overzealously, somewhat successfully.

 

Anyways, any further posts I will withhold from formatting and excessive unnecessary circumlocution (over-wording) and over-formatting and formatting in general.

Thanks for holding in there and also for telling me, and bearing with my condition (I dislike the word disease).

Please, if possible, continue answering my previous posts as if they were "as normal as possible".  I'm still very curious about the - separate from my convoluted copious protraction of formatting and length/style - fixed-length design questions I had asked about initially, as it is still my greatest interest, and I am still very much looking forward to your answers, tutorials, sites, examples, comments, suggestions, etc. etc..

 

Thanks so much again for all of your help.

- TAz

[MishieMoo]

For good basic HTML/CSS I'd go here first, and then for more advanced things, check out w3schools.

 

o.O You have a lot of questions!  I'll try to answer some xD

 

Firstly, fixed width layouts do display differently in IE than in other browsers because of the way IE interprets the html.  In IE border, padding, and margin are all included in the total width of the div or table, while in other browsers they aren't.  That's something major to consider with these layouts.  One way I've found to get around the padding problem is to nest divs, having the outside one being the size you want it to be, and then the smaller one inside, about 10px smaller so you get the padding affect.

 

With CSS inline vs styesheet, it's more personal preference and application.  If you have one thing changed on one page, maybe go with inline, but if it's used on every page, a stylesheet would probably fit your needs better.

 

Oh and for any site includes = love!  They make it so much easier to maintain or edit a layout.  Not sure about the idea that everything stems from one page, as I'm not much of a PHP programmer (yet )

 

Oh one more thing (I'd love to write more but I'm late for work) the align= property is becoming outdated.  It's much easier to use one of the three css (yes there's three!) to align things inside a div.

 

Hope this helps, a bit!

[Yesideez]

Just a note, I'm quite liking the crazy formatting - makes a difference from boring black

 

I always use tables and never use CSS as AndyB has suggested - why? I find it much easier, it works, editing can be done much easier and quicker. Those are just a couple reasons.

 

Sorry AndyB, had to say it. I've read up on the CSS method with DIV tags and I can't stand it. Much more work to get the same result.

[TAz69x]

Just a note, I'm quite liking the crazy formatting - makes a difference from boring black 

thanks so much! 

 

Thanks for the help too so far!  I find both ways very interesting!  With the Web Developer extension installed on Firefox, I can see some of the formatting of websites so far, where they outline the table cells, div's, etc.  It's really cool, and shows visually what layouts a page has, and lets you edit the css in realtime!  Which is fun =p

I'm just learning about css now, what each attribute changes and how it applies differently to each html tag.  Not knowing that much css yet, I think my best attempt so far has used table cells, set up and sized specifically for the page, and I was able to write content into them, using "nowrap" too to keep some of the sizing.  But I was able to use some css to format the main div and to apply some attributes to some of the table cells, so that was cool!

 

And the includes are amazing!  I've experimented with a few layout designs that use a header and a footer to open/close a couple of main div tags, then I include them on a few different pages on the site, using a table design within the site.  With this layout I was able to make a few different pages, each which used a header-bar and a right-side menu (which changed color on mouse-over's using :hover in css) and include a full-site design template for every page on the site!  I'm interested in trying/learning some more about these fixed-width designs.

 

Thanks so much for your help!, any more suggestions, comments, tutorials, etc. are all greatly appreciated!

- TAz

 

PS - thanks for the help on IE differences.  I think (hoping) this is one of those things that once you learn about initially, should be easy to take care of later on, knowing how to deal with IE's specific quirks and rendering techniques, at least I hope so! =p