63 replies [Last post]
Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

I know this has been covered a few different ways technically. However, I am wanting to ask this question one more time, and invite that the answer might be "you don't want to do that"

Coming from the whole table driven thing I am wanting once more to revisit trying to use all DIV's instead of tables.

My problem comes with absolute vs relative heights and such. With tables I can use a * and things are good. So if my title/banner area is fixed let's say 60 pixels, and my footer and such is 30 pixels, when I set the content area it gets the "rest of the area". Similarly with widths, let's say I allow 150 pixels for my left column navigation and 200 pixels for my right column click ads then I want the center portion to dynamically size.

Am I just thinking wrong in my layout ideas or is there a way to do this, as it appears to be simple enough in a table, though I have been doing it that way so long, maybe I can't remember that it may have been difficult to figure out in the first place.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your biggest problem is that

Your biggest problem is that you are still thinking in terms of table layouts, and that will be your biggest stumbling block or issues to get over, to a large extent you have to discard what you may have understood by way of using tables for layouts and re-learn layouts using semantic structure, and on that note be careful when thinking or saying divs replacing tables as they don't, they are simply a means of logically grouping elements they are not tds.

Not much help I know but an important if not slightly depressing caution, do not attempt to replicate table layouts using divs or mentally constructing a table layout and then wondering how that converts to non table elements as it doesn't in truth. The attributes of a table in respect of height don't apply, this feature is specific to tables height has to be handled in a different manner with semantic structure and the natural flow of elements, height is generally considered to be something that is controlled / dictated by content not forced.

Try not to think in terms of a 'page' requiring to be the full height of the viewport, as regards width then one can control things to a greater degree; your 3 column requirement is easily handled by using floats on the sidebar elements and then leaving the center area to naturally fill the full width of the layout, using margins on the left and right flanks that are equal to or slightly greater than the sidebar widths will ensure that your center column elements are retained in the area between those sidebars; that will give you a fluid center that contracts and expands with the width of the viewport.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 4 years 39 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

Something that helped me a

Something that helped me a lot in the beginning honestly, was not only reading up on it, but generating layouts here on this site. Then I would look at the code and see exactly how the layout was achieved.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Thanks for getting back to

Thanks for getting back to me Hugo. Please humor me while I think out loud, and tell me where I go astray...

In general most web pages look alike and as such there are:
A. TOP
1. Top Title Area (with company logo and name and such)
2. Top Banner Area (where some banner ads or other rotating information is displayed)
3. Top Menu Area (with some horizontal navigational stuff)

B. CENTER
This is followed by the center area which is logically broken up into:
4. Left Navigational Area (sometimes a vertical duplicate of the horizontal Top Menu Area)
5. Main Content Area
6. Right Ads area, perhaps different from the top banner ad area

C. BOTTOM
This is followed by the bottom area:
7. Develper Identification and contact information
8. Copyright

In my mind, A and C are positioned absolutely at top=0 and bottom=0% respectively or maybe some other trick of which I am unaware, and they have actual pixel heights based on logo needs and such, and are of 100% widths.
1, 2, and 3 can merely be allowed to come one right after the other as they are going to be full with and ultimately take up some percentage of the height of A totaling 100.

Same thing goes for C and 7,8 being at the bottom as long as I can make the 0% thing work.

Now B I can certainly absolutely place 4, 6 at left=0 and right=100% respectively.

So 4 and 6 are a specific pixel width as are A and C however, in both cases I need to allow 5 and B to be dynamically sized so that when I allow them to be scrolled they will work...

Again I know how to do this with a table... How do I accomplish it with DIV's.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Well I'm definitely not Hugo

Well I'm definitely not Hugo Smile but my 2 cents worth...

Quote:

In my mind, A and C are positioned absolutely at top=0 and bottom=0% respectively or maybe some other trick of which I am unaware, and they have actual pixel heights based on logo needs and such, and are of 100% widths.

and

Now B I can certainly absolutely place 4, 6 at left=0 and right=100% respectively.

If you are serious about using CSS and divs, you really, really, really need to forget absolute positioning and come to grips with floats before you go any further.

Try this tutorial for a live demonstration of floats, read the whole thing and then go to Floatutuorial for some practice layouts.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Well that was a great read!

Well that was a great read! I will have a bunch to digest now, but hopefully I can internalize it well and apply it all.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Pleased you found them

Pleased you found them worthwhile Laughing out loud
Floatutorial, along with Selectutorial and Listamatic (a great list resource), is part of Max Design - it was a while before I figured that out :rolleyes: - so have fun looking around if you didn't know the site before.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Little old I know...

Absinthe, what nobody (except Hugo in a roundabout way) has said is that when they were writing CSS specs, they screwed up with the height thing. That people were making 100% high designs with tables at the time seems to have gone unnoticed by them until it was too late.

CSS sucks at vertical-alignement and % heights. It just does. You can get what you want but it's a big hack. This is the reason why you'll see everyone say, "Use Faux Columns" to imitate the look of 3 (or 2 or 4 or whatever) 100% high columns. Why are we faking it? Because CSS has so much trouble actually doing it.

If I have designs with similar requirements then I start out with a 100% height model. I swear the first time I heard of it I was like, My Gods! Amazing! And I've been abusing it ever since.

It is indeed abuse. Gary will say (and has said for some time now) that the design you've proposed is "a holdover from print, and the web is not print". Well, designers still want to design like print and if imitation can be made then we'll do it. But usually with CSS it is indeed imitation, and nothing wrong with fakery when it comes to css. I fake constantly.

In general you'll need to really dive into css, especially CSS tricks, to get that layout. So in the meantime, read what you can on "regular" layouts (like what Smee posted, and more) to get a better feel of how positioning works, what the limitations are, and what workarounds the various cloaked and hooded geniuses have come up with. While I have seen a few interesting 100% tricks using absolute positioning, for most regular positioning you will try to avoid absolute position because of the tornadoes it calls down upon trailer parks and other positioning disasters. It needs to be used rarely and carefully, like dolphin-unsafe tuna : )

The design you are wishing for should be the last design you try. First, get a feel for "regular" ones, and for CSS in general.

BTW, I was surprised to learn, that height was never a valid property of tables. Ever. That people got browsers to display tables or parts of tables at 100% or whatever height was pure browser flukes. May teh gawds bless the better flukes!

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Stomme poes wrote:Absinthe,

Stomme poes wrote:

Absinthe, what nobody (except Hugo in a roundabout way)

Well thanks for that Smile I guess I'm just a roundabout kind of guy.

Caution must be taken when discussing this aspect of CSS and height, there are reasons why height is as it is and reasons why tables act the way they do.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Stomme poes wrote:It is

Stomme poes wrote:

It is indeed abuse. Gary will say (and has said for some time now) that the design you've proposed is "a holdover from print, and the web is not print". Well, designers still want to design like print and if imitation can be made then we'll do it.

Well the web is a print medium, by and large, it is just not a paper medium. Print on a computer screen is not the same as print on paper and trying to treat a computer screen as if it were paper is a bad idea.

The computer screen is flexible and acts like a window on a larger world, a world which can be viewed by scrolling. Paper can't do that.

On the other hand the best monitors still suck compared even to newsprint when it comes to resolution and contrast. I can still easily read normal magazine fonts on paper which are much smaller than normal fonts on a monitor. Fonts at that same size on a monitor are unreadible for me.

To treat the computer screen as if it were of fixed dimensions is a mistake because you have no idea about what the dimensions of the visitors window to your text are.

We need to adapt our designs to the medium we work with. If you want to see what happens when people try to treat one medium like the old one they were used to working with, just watch some early 1950's television programs. They knew radio so they used what worked for radio on TV. The results are sometimes quite laughable from today's perspective.

If we persist in using paper media conventions on web pages we might be used as a similar example of someone not understanding the difference between media in a few decades ourselves.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I feel that if I want to

I feel that if I want to make some design, any design, that isn't the basic header-box sidebar-box maincontent-box footer-box setup, I need to hack my way into it instead of just designing. And I never coded in tables.

The amount of hacks one uses to get from the top of the screen to the bottom stinks. While browsers have no problem automargining widths (never mind that both web sites and screens the hardware can expand side-to-side), they have no clue how to measure from the top and bottom in the same way, either of the screen or of their parent boxes (who, while not having a height set on them explicitly, do indeed have a rendered height of some sort set by their content).

Maybe it's just deceptive, looking like centering upanddown should be as easy as centering sideways or setting a height as easily as setting a width. I'm not a programmer and I didn't write any browser rendering code. But it's frustrating to everyone. We know what we want the design to look like!

My husband always complains that CSS must've been written by designers instead of coders (he writes Perl). It was definitely not written by designers! Then again, I probably wouldn't trust anything written by artsy-fartsy Mac-using photoshop fanboiz... : )

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Poes are you really a

Poes are you really a graphic designer? cos your talking like one Smile

What hacks does one use to get to the bottom of the screen? I don't hack anything for this purpose :? trying to set a layout to the viewport height is a horrible notion - most of the time.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Lawlz, you know I got into

Lawlz, you know I got into this HTML crap because I can doodle on paper? Funny world. I learned HTML and CSS by accident.

Bottom of the screen means automatically I needs a 100% height BS setup, esp if I wants a footer, or anything else weird. And then extra stuff for IE6 and below (how many times did I battle bottom: 0 with IE?). Plenty of people (clients) don't like a blank body peeking out from under their web sites just because that particular page doesn't have enough content or the visitor appeared with a ginormous screen. Sometimes you just want your simple web site to cover the screen.

Quote:

Poes are you really a graphic designer? cos your talking like one

More like, I want Nazi-like control over how the page looks regardless of whatever teh users throw at it, esp since I came into this job by fixing the code behind already-existing websites done in tables, while retaining the visual design (poor as it may have been in the first place). I should be able to imitate anything the boss or my colleagues throw at me without an unreasonable amount of unreasonable code. Three-column 100% height? Using Faux-columns you are trapped by the limits of inflexible background images, plus you've used up your 1 image per element unless you've got Safari. Thank teh gawds I don't need to use an image to get 100% width! No matter how wide a screen comes to visit my web sites. Prolly why, though I've used Faux columns, I've tried everything else instead when I can, including matryoshka floats and whatever other techniques I've run across. That, or maybe because I hate French words?

I'm not saying I'd make something like this or this but I should be able to imitate them with pure unadulterated CSS (hacks for retarded browsers notwithstanding). No, I don't meant the moving stuff, that's Flashola : )

Bah, I just want my way and want it easy. Like Burger King. (add whine here)

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:I should be able to

Quote:

I should be able to imitate anything the boss or my colleagues throw at me without an unreasonable amount of unreasonable code.

Too a large extent this is a fallacy and suggestive that CSS and markup is simply there to serve graphic design.

Quote:

don't like a blank body peeking out from under their web site

Again a fallacy, the body is their web site, it's from ignorance of what a web site is that this notion of filling a viewport stems, that and table layouts and graphic designers desire to force their paper print values on to the web.

Glad you said Burger king rather than MacDonalds Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Ok, sounds like I really

Ok, sounds like I really started something here.

However, it seems like I asked "How do I do blurf" and the answer is "Don't do blurf"

I will assume that no one that is in love with CSS will admit that it has a weak point and if I want to do something it doesn't do well, then I am doing it wrong. And those who view it as a tool, simply will say you must perform some sort of hack to accomplish this.

As for the paradigm argument of print vs screen etc. I am not 100% on how all these arguments hold water. Certainly, as information is presented visually, that is a print medium. The fact that it is on CRT or other friends of Joe-Electron vs paper should make little difference. If you want to take the argument that it is a dynamic view port much like the windows operating system, even then there is no reason why I should not be able to paint my view port as I see fit, placing items accurately at any of its extents either dynamically or statically just look at Java programs which by default place items dynamically and as the window is resized they move and resize accordingly.

I will accept that there is a "best practice" for each paradigm, and am completely coachable as to following such as long as I know what it is.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I think you should do some

I think you should do some research into the ideas behind the web as stated by the folks who actually designed it. The web is even more flexible than I implied above. While most people see print the web is designed so that people who cannot see at all may still use it. It is purposely designed to be flexible right from the ground on up. HTML itself has no visual aspect at all in it's original design. It is a language for marking up the meaning of a document, pure and simple. HTML in it's original form and also in it's latest versions, is designed to say nothing about the appearance of a site. This is just a fact - feel free to look it up.

You can wish this were not so all you like, but it is so nevertheless, and if you refuse to recognize that there will be consequences you will have to suffer. If you produce TV shows as if TV were just radio with pictures you will suffer too.

HTML is what it is. Pretending it is something other than what it is is a recipe for trouble, in my opinion. If you want trouble of course, that is your free choice and you have a perfect right to make it. No skin off my neck, unless I happen upon your site, but my "back" button is still nice and handy and I know how to use it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:suggestive that CSS

Quote:

suggestive that CSS and markup is simply there to serve graphic design.

I think I'm under the impression that it is. Isn't it for purposes of styling content?? And isn't styling content, if you go past changing link colours or something, design? How do you view CSS?

Yeah, Absinthe, I do kinda see CSS as a tool. Like a programming language is a tool to do something you want it to do (when it does what you want, lawlz). Like all tools, you can use them correctly, you can use them limitedly, you can use them to their full capacity, and you can misuse them or use them for something it was not quite made for (off-label use, you'd say).

I don't think that HTML being what it is can really stop anyone who wants to design it up. And just like CEO's don't know the ins and outs of print or what's available, they do know how they want their company represented up on billboards and on TV commercials... so too with their website. Even when they don't know the technical limitations.

I'm no expert, but I fake one on teh Internets

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Alright, before this

Alright, before this degrades into a religious war reminiscent of the vi vs emacs ones of past let me show you where I am, and perhaps someone can guide me down the correct path moving forward.

A couple years ago, I did this site for my wife's business:

http://annsmall.com/

Physical layout is using tables, and sizing and coloring is via css. Notice how I force my copyright and contact to the bottom, and try to keep it always available. It is generally centered, even if to its detriment both horizontal and vertical.

Here is a more current one however using similar techniques in that the main layout is using a table and sizing and coloration and other such things are handled by CSS:

http://smalllockandkey.com/
and the older one:
http://toolsforlocksmiths.com/
Which is not using css for anything.

And for sake of completeness an old personal vanity page with frames and such..

http://home.earthlink.net/~bradleysmall/default.html

Which even includes a web page written all the way back in 1989 or somewhere thereabout.

I put all this here not to blow my own horn (heaven forbid since they mostly suck by my opinion.) But to show what I have been indoctrinated into merely by repetition.

Going forward I think I would like to do the following:

Create logical groupings of information based on what it is rather than where it goes. (Need some guidance to figure out how to think this way) Create style sheets to lay it out after the fact.

Ultimately, I think the data should all be stored in a database and the page created on the fly, and laid out to suit the taste of the user with some ability to select a layout either from a group of choices or by customizing some existing one. However, I am getting ahead of myself, and perhaps this aspect is beyond the scope of this forum or at least this thread.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:vi vs emacs Gosh that

Quote:

vi vs emacs

Gosh that gives your age away Tongue

Quote:

Ultimately, I think the data should all be stored in a database and the page created on the fly, and laid out to suit the taste of the user with some ability to select a layout either from a group of choices or by customizing some existing one. However, I am getting ahead of myself, and perhaps this aspect is beyond the scope of this forum or at least this thread.

Yes getting way way ahead of yourself, and this type of approach is only suited to particular applications, we have a half finished product that we are coming back to which will allow clients to create pages from dragable building blocks of markup, but it's for a specific reason takes a lot of development time to get right, and we have shelved it until such time as we can release dedicated coding time to it.

To the problem:

The most fundamental aspect that I think you will need to deal with is that content (markup) reigns supreme, in many senses people shouldn't be allowed anywhere near CSS(presentation) until they have learnt to describe semantic markup, and it's surprising the number that can't; this is also the biggest stumbling block for table based transitioning. So understanding how to lay out a page of content is the primary concern and always should precede any real CSS presentational aspects; the foundations must be in place , the page elements flowing in a logical progression that makes sense, only when that is achieved can styling be started , styles are applied to markup not the other way around , if the markup is not correct, logical, well-formed, then applying styles is a waste of time.

You are correct in saying that you think that you want to describe markup by what it is rather than by where it goes, that is the fundamental point to Semantic markup, you must convey meaning to the data, and not be concerned with positioning.

A page 'flows' from top to bottom , markup elements fall into two groups inline and block which describe their nature block elements are major , and require the width of the page and will always follow after another requiring a new line descending down the page, inline elements are those elements that describe the actual data and flow right to left (or reverse)dropping to a new line when there is no more room on the line.

The best approach is to look at your actual content/data and decide what it is that will decide what elements you use to mark it up e.g is it a lot of text? does it qualify as a paragraph in real world terms? if so then a paragraph tag should be used; are you looking at a set of navigation links? if so then one describes a ul list. What is important is to consider where in the flow of elements you want these parts to appear.

In deciding where the parts are set in the element flow you might decide that a certain number of them represent a group of similar parts and you may then group them under a parent this would possibly be a div used to logically group a number of elements into a division of the page; so we might create an overall parent element called 'wrapper' this will be a div and represent our top level after html,body elements in that wrapper I might decide that the first elements/content of the layout are site title, a graphic perhaps, a horizontal navigation, grouping these within

So now I have decided that I have a header group which contains certain layout elements after that I might look at the content and consider that it requires a sidebar to the left with my main content to the right and these I would describe next, note there is still no positioning as such, just a consideration of the page flow, after #header I would probably use a div and call it #sidebar right after that another div called #content, I now have (lets forget footer for the moment) what I need as a framework to hold various aspects of content/data, #sidebar could contain further links #content is likely to hold my primary heading and main content everything, though, set in meaningful semantic elements.

At this stage I have a layout it will render and it will have browser default styles, it will flow logically and read well, it is lightweight and fast loading, search engine friendly, and essentially assistive device friendly.

Now you are ready to apply styles to position the layout, you might want the #sidebar to the left of #content in a classic columnar style layout so you say float:left #content you simply say marginleft = to the width of the sidebar and your done, want the sidebar to the righ side? then simply reverse those simple rulesets (try that with tables!)

With all of the above please bear in mind that it is deliberetly oversimplified, the most important apect of Semantic markup coupled with CSS-P is the extreme flexibility, there are countless approaches one can take and are impossible to cover in a single post.

The best thing to do initially is down load some templates from reputable sources and play around with them observe how the CSS styles relate to the markup also download different types of layout i.e two column, three column, source ordered, this will give you different takes on how to use markup grouping along with styles to achieve a layout.

Now if I may get back to my just and righteous religious war, there's battles to be fought }:)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Perhaps I am giving away my

Perhaps I am giving away my age, or then again perhaps just my "internet age." Smile

I wrote my first web page using vi, and looked at it using lynx. I remember Mosaic and and bouncing the echoes on twilight zone. I had an account on Nyx of the Night. I even remember playing with Linux Slackware when it was version 0.97 and on and on and on...

I will either work on taking one of my existing pages or the start of my new project, and begin with some basics.

Any suggestions for naming conventions of the basic semantic ideas? As in are there some already pretty standard or just whatever each person thinks is good?

Actually, how would you go about changing any of the ones I put up in the previous post?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Back to Max Design Absinthe!

Back to Max Design Absinthe! Smile
Sample CSS Page Layouts

If you did the "Floatutorial" I pointed you at above, try the "Selectutorial" this time (half way down the page) - various 3 column liquid layouts. Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Yep did them both.

Yep did them both.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Good for you! In that case

Good for you! Smile

In that case semantic naming conventions tend to be things that make sense.
i.e.

wrapouter
header
navholder
nav
wrapinner
sidebar*
content*
footer

* or column1, column2 etc

The general consensus is to name them so they make sense according to position or what they do rather than being specific to the content.

At least I think that's right Smile Hope it helps.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Smee wrote:The general

Smee wrote:

The general consensus is to name them so they make sense according to position or what they do rather than being specific to the content.

At least I think that's right Smiling Hope it helps.

Close, girl; just backwards. Name the ids and classes according to what they are, just as html elements name the tagged content for what each is. Just remember that a class or id's purpose is to provide a contextual hook for CSS or javascript. A div named #leftcol will seem kinda silly if you decide to put it on the right. OTOH, #toc, #sidebar or #adblock tells you what it is without semantically tying the block to any particular rendering.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 17 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Close, girl; just

Quote:

Close, girl; just backwards.

:rolleyes: I knew what I meant Laughing out loud

Quote:

OTOH, #toc, #sidebar or #adblock tells you what it is without semantically tying the block to any particular rendering.

That's what I was actually trying to explain, but of course you've done it much better :thumbsup:

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Ok, next is to what degree

Ok, next is to what degree to continue using standard tags. H1, or UL and stuff like that. Or do you redefine each of them relative to their semantic location?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Gary wrote:Close, girl; just

Gary wrote:

Close, girl; just backwards. Name the ids and classes according to what they are, just as html elements name the tagged content for what each is.

Man, I generally do this but find myself running into a problem with styling classes sometimes. I have sometimes some random piece of text that my colleague wants centered instead of aligned left. I started naming the classes by what the content was-- and ended up with a list of about 10 classes with text-align: center on it... and I changed my mind and made them all one class called "centered" and now I have one. Will it look stupid when he changes his mind again and wants them left again? Yeah, I'll delete those classes, but I couldn't keep going with a bunch of classes with 1 purpose but 10 different kinds of content.

Quote:

Ok, next is to what degree to continue using standard tags. H1, or UL and stuff like that. Or do you redefine each of them relative to their semantic location?

With h# and lists, it's simply what it is (although someone once warned me to watch out for the difference between a list and a sequence. A sequence can be a list but doesn't have to be). The headers do have rules, namely:
the h1 is considered by standardistas to be the Name Of The Page. Thus, you get only one, and while I'm super guilty of using it for the name of the company (and covered by their logo with image replacement), it should be stating the name of the page, or describing its overall content.

You get to have as many of the others as you want. The main sub-sections get headed by h2's, and under each h2, any subdivisions would be h3's. Things of equal importance get the same header:

Why vi Rox0rz
byline of text or whatever
Reasons why it r0x0rz
text?
header of perhaps a collection of reasons
Perhaps another collection of related reasons
Maybe another

Where it's used(we're going to consider this also a Why vi rox0rz)
Applications
Physical places
It be used in lots o places...
Edjumacational places
various such as...
Corporations
various such as...
Dirty Nerd Bedrooms such as so-and-so's... list
Various dirty nerds such as...
whatever else

Humour about how it rox0rz
blah...

Someone may argue that the last one would be an h3 since it's not a major reason though most people will say you shouldn't skip headers.. meaning something shouldn't be able to go from h1 to h3 or from h2 to h5 etc...

uls, dls, if it's a regular unordered list then you use one. If it's a list of pairs which have a relationship, dl may be warrented (or maybe I'm just abusing them, I use them all the time and never for definitions!), and a list where the order is important, an ol.

If you speak Perl, ul/[email protected] and dl=%hash. : ) Prolly more like ol than ul since order matters there...

So with headers it may be location (in an organisational context) and with something like lists it's pretty much, what is it?

Often I have changed content from normal text to a header or vice-versa because it fit the way the page would be read, and I could argue it that way. If I can't convince myself that so-and-so could be a header or whatever then I can't do that, but there is often leeway (the reason you can get people arguing about semantics in the first place). Some things are obviously definitely right and wrong, and other things are definitely maybes and arguable. : )

Not that I'm ever, EVER eristic! Oh noes... : )

I'm no expert, but I fake one on teh Internets

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

So for these rules, are they

So for these rules, are they published as such perhaps to enable page readers for the blind or such to be used and still make sense?

::embarrassed that he never used a

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I've seen the "one h1 per

I've seen the "one h1 per page" thing bandied about all over teh interwebs so it's gotta be writte somewheres...
http://www.google.com/search?hl=en&q=h1+only+one+per+page&btnG=Google+Search
shows you at least how much we talk about it : )

I'm sure Window-Eyes can do it too, but JAWS has a Headers key (ins+f6 or quickkey Grade so visitors can get one header, decide if they want to read further or jump to the next header, or whatever. It's jawssome. : )
http://www.youtube.com/watch?v=AmUPhEVWu_E

In fact I've seen more and more occasional headers for clarity which are hidden from visual visitors (usually an h2 stating THIS menu out of the 5 on this page is the MAIN menu!)-- you can see this at green-beast.com/blog for example.

Headers and rules about them are pretty much snatched from general newspaper and technical paper typography as far as I know. Y'know, from back in the days when teh InterTubes was only filled with boring technical papers sent from university nerd to university nerd, or from military guy to military guy to spy... or whatever it was before Al Gore invented it.

Lots of people don't use dl, and many people don't believe its right to use if you're not specifically using it for terms and definitions. I'm interpreting it very loosly-- any list if pairs with a relationship is good enough for me. I really like to use them to present form information (after someone has submitted a form, the results are in a dl). I do not use them in forms themselves. I don't use lists at all in forms.

I'm no expert, but I fake one on teh Internets

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Absinthe wrote:Ok, next is

Absinthe wrote:

Ok, next is to what degree to continue using standard tags. H1, or UL and stuff like that. Or do you redefine each of them relative to their semantic location?

The answer is to use those tags as much as possible, according to their semantic meaning, to mark up content that fits that meaning. The vast majority of your markup should use the proper semantic tags provided by html. P for paragraphs, H 1 through 6 to mark up levels of headings, list elements to mark up lists, and so on.

Try a google on "semantic html" and reading the top few results.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Lots of people don't

Quote:

Lots of people don't use dl, and many people don't believe its right to use if you're not specifically using it for terms and definitions.

And many right minded folk Smile understand that there are precious few semantic tags and they don't all have rigidly defined definitions, definition terms and definition descriptions are open to interpretation and as such allow us a little more flexibility, there can be a point at which Semantics are a bottleneck and leave us wondering where we can go for a semantic meaning at times. I love DL lists and have advocated them a lot in the past here, and do indeed place a large amount of liberal interpretation on their semantic meaning.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Here is the first attempt at

Here is the first attempt at conversion...

http://smalllockandkey.com/

If anyone has time to take a peek at my page, please let me know what I did wrong and right.

For what it is worth, all the linked pages are still written in the previous style, as it is a working site and I was editing in place Smile So it is only the opening page that matters right now. Also to note, the style sheet is in place in the page to make it easier to evaluate, I will no doubt replace it with a link tag later.

Thanks in advance.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Absinthe wrote: If anyone

Absinthe wrote:

If anyone has time to take a peek at my page, please let me know what I did wrong and right.

What you did wrong was you didn't validate your code. You have some nasty bad CSS syntax errors and you should fix them up. You also have an html error, admittedly minor in that you've closed one too many DIVs.

I imagine your site would cause visual problems for anyone with the most common types of colour blindness. There are quite a few folks like that in the population.

As defined by Wikipedia "The most frequent forms of human color blindness result from problems with either the middle or long wavelength sensitive cone systems, and involve difficulties in discriminating reds, yellows, and greens from one another." Remind you of your color scheme?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

You should use a complete

You should use a complete DTD, including the url part. That forces standards mode. Right now you're in quirks mode where IE follows IE5 rendering rules, and Opera plays I-wannabe-IE. This does not seem to cause issues in this page, but it can, and where it does, it's a PITA.

A couple of notes on writing easier to maintain and easier to debug documents:

Do not put css rulesets all in one line. Use a separate line for each rule, and indent. See the stylesheets for any page in my site.

Set your editor or Tidy to wrap your lines at a sane value; in the range of 66–72 is good, 80 is absolute max.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

now I am embarassed...

Well, it did validate but then I ran tidy on it and it broke... Sad

For some reason tidy has been turning (specifically © into the actual character) I caught it a few times but then I must have missed it. And I have no idea where the extra /div came from but the validator is happy now..

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

As for the wrap the tidy

As for the wrap the tidy settings are kind of goofy right now in that it forced everything onto one line, I will see what I can do to fix that. As for the DTD settings I tried the "strict" however that broke my ability to do the 4 column same height columns trick.. so if I switch to it I will need a new strategy for that...

Actually it breaks with strict or loose...

What is so unreasonable about a 4 column common length layout?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

What's so unreasonable is

What's so unreasonable is IE's lack of css2.1 support.

Since this is a fixed width, it is a perfect candidate for faux columns.

I cleaned up the css a bit and used the faux column technique in this version. The image is attached.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title>Test Small Lock</title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
  body {
    background-image: white url(logoemb.jpg);
    color: black;
    font: 100% arial, sans-serif;
    margin:50px 0px;
    padding:0px;
    }
 
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
 
  h1 {
    color: #79E1FB;
    margin-bottom: 0;
    margin-left: 282px;
    }
 
  h2 {
    padding: 0 .5em;
    color: #79E1FB;
    font-size: medium;
    }
 
      :link    { color: green }
      :visited { color: green }
      :active  { color: green }
 
  #container {
    background: #700 url(logoemb.jpg);
    border: 8px outset gray;
    color: white;
    margin:0px auto;
    overflow: hidden;
    width: 800px;
    }
 
  #header {
    border: 4px solid black;
    background-image: transparent url(images/slk80.png);
    }
 
  #addr {
    background-color: #700;
    color: yellow;
    font-weight: bold;
    margin-left: 312px;
    }
 
  #tagline {
    margin-left: 282px;
    font-size: x-large;
    font-weight: bold;
    }
 
  #contcontainer {
    background-image: url(smalllock.png);
    overflow: hidden;
    }
 
  /*Holly hack, because IE6 is stupid*/
  * html #contcontainer {
    width: 100%;
    }
 
  .content {
    float: left;
    width: 195px;
    padding-left: 4px;
    }
 
  #contentFoot {
    border: 4px solid black;
    font-size: x-large;
    margin: 0;
    text-align: center;
    }
 
    /*]]>*/
  </style>
</head>
 
<body>
  <div id="container">
    <div id="header">
      <h1>Small Lock &amp; Key</h1>
 
      <p id="addr">Lake Monticello, VA 22963
      <br />
      Phone: 434-591-6027
      <br />
      Cell: 434-466-5952
      <br />
      Email: <a href=
      "mailto:[email protected]">SmallLock@hotmail.com</a></p>
 
      <p id="tagline">Your Locksmith By The Lake</p>
    </div>
 
    <div id="contcontainer">
      <div class="content">
        <h2>Our locksmith is:</h2>
 
        <ul>
          <li>Licensed 11-5627</li>
 
          <li>Certified</li>
 
          <li>Registered</li>
 
          <li>Bonded</li>
 
          <li>Insured</li>
        </ul>
      </div>
 
      <div class="content">
        <h2>We provide locksmith services for:</h2>
 
        <ul>
          <li>Home</li>
 
          <li>Automotive</li>
 
          <li>Business</li>
 
          <li>Commercial</li>
 
          <li>Transponder "Chip" Keys</li>
 
          <li>Motorcycles</li>
        </ul>
      </div>
 
      <div class="content">
        <h2>We carry and service the following brands of locks:</h2>
 
        <ul>
          <li>CX-5®™</li>
 
          <li>USCAN</li>
 
          <li>Arrow</li>
 
          <li>Ilco</li>
 
          <li>Schlage</li>
 
          <li>Kwikset</li>
        </ul>
      </div>
 
      <div class="content">
        <h2>We provide locksmith services to:</h2>
 
        <ul>
          <li>Lake Monticello</li>
 
          <li>Palmyra</li>
 
          <li>Fluvanna County</li>
 
          <li>Scottsville</li>
 
          <li>Fork Union</li>
 
          <li>Dixie</li>
 
          <li>Bremo Bluff</li>
 
          <li>Buckingham</li>
        </ul>
      </div>
    </div> <!-- end contcontainer -->
 
    <p id="contentFoot">Yes! We work on all size locks, not just small
    ones!!</p>
 
    <div id="footer">
      <ul class="hnav">
        <li><a href=
        "http://smalllockandkey.com/locallocksmiths.html">Locksmiths</a></li>
 
        <li><a href=
        "http://smalllockandkey.com/organizations.html">Organizations</a></li>
 
        <li><a href=
        "http://smalllockandkey.com/business.html">Business</a></li>
 
        <li><a href=
        "http://smalllockandkey.com/oldads.html#">Ads</a></li>
 
        <li><a href="http://smalllockandkey.com">Home</a></li>
      </ul>
 
      <div id="colophon">
        <a href="http://validator.w3.org/check?uri=referer"><img src=
        "http://www.w3.org/Icons/valid-html401"
             alt="Valid HTML 4.01 Transitional"
             height="31"
             width="88" /></a>
        <br />
        Copyright ©2008 Bradley M. Small
 
        <address>
          <a href="mailto:[email protected]">Contact to report
          errors or to have your own website handcoded in HTML with
          love.</a>
        </address>
      </div> <!-- end colophon -->
    </div> <!-- end footer -->
  </div> <!-- end container -->
</body>
</html>
I've set my Tidy for xhtml, so let your config switch the syntax This is valid strict.

cheers,

gary

AttachmentSize
smalllock.png 217 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Ok, I had to tweak yours a

Ok, I had to tweak yours a little to get it to work,

1. Your Tidy seemed to do the same trick of changing the characters
2. You mixed up some background images
3. You left out some tags
4. You killed my menu stuff

So far it looks ok however, when you replaced the DIV's with P tags in the header, I have inherited some extra lines that I can't figure out how to get rid of the text and the logo should be the same height like in my original page.

Here is a link to what you posted, with just those 4 tweaks made.

http://www.smalllockandkey.com/index2.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Absinthe wrote:Ok, I had to

Absinthe wrote:

Ok, I had to tweak yours a little to get it to work,

1. Your Tidy seemed to do the same trick of changing the characters
2. You mixed up some background images
3. You left out some tags
4. You killed my menu stuff

1) ?
2) Oops, you mean putting the emblem thingy on #container?
3) Yep. Redundant and unneeded.
4) I only styled enough to demonstrate the faux columns.

Quote:

So far it looks ok however, when you replaced the DIV's with P tags in the header, I have inherited some extra lines that I can't figure out how to get rid of the text and the logo should be the same height like in my original page.

Simply set top and bottom margins to zero.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

1. it would appear that

1. it would appear that © and ™ and ® are converted to their respective characters by tidy. Yours did it too.
2. yes the embossed thingie
3. No, I meant ones that you referenced and didn't carry over, like footer and colophon and the ul stuff
4. Kind of what I assumed, but I made the changes to be able to put it up.

............

Ok, so I have absorbed your ideas and changed the original. It validates, and appears to show ok in IE, Opera and Firefox.

http://www.smalllockandkey.com/

What next? Anyone else care to chime in? Or have I gotten it?

BTW, can you explain what is happening with the faux columns?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

1. My tidy.conf is set to

1. My tidy.conf is set to use utf-8, so they're converted. I didn't notice, 'cuz I usually enter the characters directly as utf-8, as I do here; © ® ™

3. Nope, they're there in the html markup; I just didn't include the style rules.

See my faux column, two columns apparent equal height demo, and be sure to follow the link to the seminal article on the technique.

The background image I created is simply a series of smaller images appended to one another, then rotated. For making these background images, I find the ImageMagick suite of utilities to be the easiest route. For this image, I used the cli and ran the following command (all on one line; the \ indicates wrapping)

gt@aretha:~$ convert -size 10x4 xc:black \
-size 10x195 xc:#770000 -append \
-size 10x4 xc:black -append \
-size 10x195 xc:#770000 -append \
-size 10x4 xc:black -append \
-size 10x195 xc:#770000 -append \
-size 10x4 xc:black -append \
-size 10x195 xc:#770000 -append \
-size 10x4 xc:black -append -rotate 90 smalllock.png

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Gary -- Relative to tidy

Gary --

Relative to tidy settings, I am not using tidy.exe proper but rather the tidy that comes inside PSPAD for windows. However, in order to get my tidy to behave properly I had to set the setting:

[TiDy clean Document - wrap]
bare:no
clean:no
fix-bad-comments:yes
fix-backslash:yes
indent:yes
indent-attributes:yes
indent-spaces:2
char-encoding:ascii
replace-color:yes
wrap:80
wrap-asp:yes
wrap-jste:yes
wrap-php:yes
write-back:yes
output-encoding:ascii

I am just learning this particular package, as I would normally use Visual Slick Edit. However, the settings screen for their "beautify" is so convoluted I can't get it to setup the way I want it so I started using PSPAD and the tidy inside it... I may ultimately just have to figure how to use tidy.exe as an external tool to SlickEdit

I am off to read your article. Hmmm seems like a finished page about coco the gorilla and such... Maybe I missed something, or should I just be dissection the page?

Please have another look at the original page as I made the changes. I have stuck with html 4.1 instead of going all the way to XHTML as in yours but seems to work. You have some shortcuts such as colors with only 3 numbers .. guess I have been away a little while, does that mean #700 = #770000 or #700000?

Shall I assume that the graphic you used made the length by duplicating vertically as many times necessary to fill the longest, and all the boxes are actually overlapping and just moved over by the margin or something like that?

FWIW, I guess I could have given them heights and that would have worked too? Pretty much nothing is dynamic in this case right? All the widths are set specifically and all that so why not the heights? So if I were to make a new style sheet, that let's say eliminated one of the columns or changed the colors, I would need to add a new graphic right? So if the client is wanting to tweak the site a little at a time is is more than just changing the color numbers right? Am I understanding the implications?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Quote:Hmmm seems like a

Quote:

Hmmm seems like a finished page about coco the gorilla and such... Maybe I missed something, or should I just be dissection the page?

My bad. I copy/pasted the url from my lan server, koko, instead of the public server. The link is corrected now.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Relative to tidy

FWIW, I attach my tidy.conf file. I mostly accept the defaults, with a few overrides.

cheers,

gary

AttachmentSize
tidy.conf_.txt 13.4 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Now I think I get it better.

Now I think I get it better. The graphic goes on the containing div, and each item in the div has a margin that simply overcomes its left most obstruction, I was thinking that each item was positioned like on zero left and the margin was overcoming each preceding block... Kind of why it was not making sense to me. Ok, I think I have that now. Not much different from the left boarder backgrounds

Next step will be to go convert the rest of the site Smile

So are these good choices for names? Am I missing any that I may need?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Lose the spans,

Lose the spans, span.yellowtext*. Use the cascade,

  .content {
    color: yellow;
    float: left;
    width: 195px;
    padding-left: 4px;
    }

* About the class name, what if you changed your mind about the color of .yellowtext? Light blue, maybe?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

I was trying to get the text

I was trying to get the text to be yellow and leave the markers white.. I guess I will have to find a graphic to make it so?

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Ok, spans are gone, replaced

Ok, spans are gone, replaced with yellow text, and white graphic for li

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:You have some

Quote:

You have some shortcuts such as colors with only 3 numbers .. guess I have been away a little while, does that mean #700 = #770000 or #700000?

#700 would mean #77 00 00 = #770000. Each single number in the shortcut (#700) represent two hex digits that are the same. Apparently this only works when each of the two are identical-- you can't take #445506 and make it #4506.

Yeah I would have used spans if there were no anchors in my lists, and wanted the bullets to take on one colour (of the li) and the text to be another colour (another element like a span).

A graphic isn't bad either. I would guess if it mattered a lot, you could look at what is more content in size: the graphics or the spans. Graphics are usually bigger.
However in a list you'll get more control over where the graphic goes than with list-styles when talking cross-browser.

Quote:

FWIW, I guess I could have given them heights and that would have worked too? Pretty much nothing is dynamic in this case right? All the widths are set specifically and all that so why not the heights? So if I were to make a new style sheet, that let's say eliminated one of the columns or changed the colors, I would need to add a new graphic right? So if the client is wanting to tweak the site a little at a time is is more than just changing the color numbers right? Am I understanding the implications?

The reason I don't like faux columns is that it does restrict you somewhat because you're using an image. However I've seen people make much larger images and then positioning them a bit off-screen so that sidebars can grow sideways (they are repeat-y in this case) with text-enlarge or if the client wants to increase the width a bit with the sidebar. You do lose the ability to easily switch a left sidebar to a right for instance, one of the reasons touted for using CSS. Faux columns are best used in very stable pages with very not-picky clients, or you'll be doing a lot of (minor) image editing. So yes if that was going through your mind, yes, that is an implication. There are other ways to "fake" the columns; I've seen several demos doing other things but some of them also have a brittleness. Gary may even have a multi-column demo somewhere without images. I've used the "matryushka" setup (I dunno what to call it): floats in float in floats with the innermost having a min-height set to something ungawdly like 9999em : ) No footer allowed here unless it's position: fixed. Though if the content inside the innermost float is always the longest, you'll have flexible, non-set-height equal columns. This does not fit the profile of every page though-- some have longer content and others have longer sidebars and still others have another sidebar that grows per page or as an expandable list tree thingie.

Otherwise, though, it's not a good idea to set heights on things in HTML, because heights are (except in IE6) a limit. Text either has to overflow it (if more is typed, or Ed Seedhouse comes back in and enlarges the text to 20 pixels high (some people do that)) or it gets hidden, depending on how you set your main box up. Overflow: auto might be a nice tool if the design-idea is to keep a box in the middle of the page which doesn't ever reach down to the bottom of the page. But that's getting into Fake Frames which are complicated (due to IE6, again).

I'm no expert, but I fake one on teh Internets

Absinthe
Offline
Regular
Last seen: 10 years 48 weeks ago
Joined: 2008-10-22
Posts: 26
Points: 0

Is this what you are talking

Is this what you are talking about when you say matrishka

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 1 hour ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Good explanation Sp, and

Good explanation Sp, and some good points.

@Absinthe: I misunderstood your issue with the span class="...", as I was in tunnel vision mode on layout. Your approach was fine, but there is/was no need for the class. Use the cascade.

.content li {
  color: white;  /*sets color for the li, including the list marker*/
  }
 
.content li span {
  color: yellow;
  }
==========
...
  <li><span>list item</span></li>

The faux column technique is really more of an elegant work around, than an elegant technique in its own right. IE just sucks at css, so we make do. For two columns, it works easily and well. For more columns, if dynamic, it becomes more difficult. Since this is a fixed width, there was no problem, and a 217 byte image is no burden.

Yes, Sp, I do have a non-image equal height columns demo. It was made in late 2005 and updated for some reason in Jan, 2006. I haven't refactored it for my present site, so here is the 3 column equal heights for modern browsers demo, courtesy of the wayback machine. The demo specifically does not work in IE.

Sp wrote:

The reason I don't like faux columns is that it does restrict you somewhat because you're using an image. However I've seen people make much larger images and then positioning them a bit off-screen so that sidebars can grow sideways (they are repeat-y in this case) with text-enlarge or if the client wants to increase the width a bit with the sidebar. You do lose the ability to easily switch a left sidebar to a right for instance, one of the reasons touted for using CSS.

Since everything is defined in the css, including the bg image, it is trivial to switch left for right, or to have dynamic widths. The bg image is a minute or two's work, if you use a cli application like ImageMagick. (See above how I made nine images, and joined them for the four column bg.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.