|
Help, my HTML Always Sucks!
I am using Citydesk to develop my consulting web site. My main problem is getting alignment and text flowing appearance to look like I WANT it to, not like how the browser wants to sh*t-schlock it out.
I want certain effects, like boxed text, text flowing alongside a right aligned image, and a subsequent section of text to not flow into the gap along the image above. I know, I can see in my mind's eye what the f*cking thing is supposed to do. I KNOW how I want the damned thing to look. It's always, consistently, every single time anything but. Always. Every f*cking time.
Rant: I *never*, *ever*, *EVER* get this crap right! I repetitively change tags, change alignments, futz with <p> and <div> tags, mess with styles. I always get bizarro shit happening like a boxed area of text appearing to merge into the image, and stuff overlapping that shouldn't.
How do the pros get this garbage right!!? I'm a programmer of real honest applications, not a script head for God's sake. Scripts are supposed to be EASY, not HARD.
Driving me nuts. Any suggestions for knowledge or tools to conquer this crap/sh*t/f*cking overcomplicated twiddly stuff?
Bored Bystander
Sunday, December 14, 2003
Er, obviously I was passionate about getting this stuff right. I could have done w/o a few expletives... OK, laugh at me, everyone. :-(
Gawd, this is embarrASSing...
Bored Bystander
Sunday, December 14, 2003
One word: Dreamweaver
Almost Anonymous
Sunday, December 14, 2003
HTML is just bad :) I've found it hard to get things exactly right, so I don't put much time into my pages at all. I've seen people make amazing pages that render right on everything, but those people take time. Lots of it :)
My roomate advises putting everything in div tags and do everything with CSS.
All I know is that I despise making web pages 8-}
Mike Swieton
Sunday, December 14, 2003
Tables?
Sunday, December 14, 2003
hi bored,
I feel your pain :) Every once in a while Im forced into exactly the same kind of work....html coding makes c++ coding look easy IMO.
Ive found a really effective way for me to get the pages how I want them is to first build the original in dreamweaver and then go through the html afterward and tear out all the unnecessary shite that Macromedia "hey, lets make html coding feel like graphic design" dreamweaver puts in.
If you dont have access to dreamweaver, then I find that doing the layout onto a sheet of paper first helps a lot with working out what to write...
FullNameRequired
Sunday, December 14, 2003
"Spend less time trying to achieve format-oriented goals. Instead, focus your efforts on creating the actual document content and adding the HTML tags to structure that content effectively."
From "HTML, the definitive guide..."
could'nt resist...
Al
Sunday, December 14, 2003
Dear Bored,
As somebody has pointed out HTML was not originally intended as a graphic layout language.
If you are going to use it that way the easiest way is to go for tables. CSS are better but more difficult.
Do remember though, that final control over appearance lies with the user, unless you decide to go for a fixed resolution web page.
Stephen Jones
Sunday, December 14, 2003
http://www.w3c.org/TR/CSS2/box.html
http://www.w3c.org/TR/CSS2/visuren.html
http://www.w3c.org/TR/CSS2/visudet.html
Just bear in mind that to with CSS it's important to grasp the whole model at least to some extent. Just knowing few tidbits can do more harm than good. But if you know C++ (or Lisp) you shouldn't have that much trouble learning CSS. It might be weird and cryptic, but not THAT weird.
Or if you don't wan't to bother, use tables, or your 13-year old niece;)
Juha
Sunday, December 14, 2003
I think this site isn't bad:
http://www.htmldog.com/
Sunday, December 14, 2003
Another vote for tables (although many here would disagree) -- they just work and you don't have to frig about with various browsers implementation of CSS boxing.
Ponty Mython
Sunday, December 14, 2003
Thanks for the pointers. My medication is finally kicking in and the psychotic reaction from last night is finally subsiding ...
Bored Bystander
Sunday, December 14, 2003
Abouy CSS: I haven't wasted a *lot* of time battling CSS behavior. Actually, as an object based developer in my "day job", I generally like CSS's structure and power.
However, I want my site to look a certain way, and trying to grasp how CSS can help me do this feels a little like using J2EE to write a "Hello, World" application.
But I also don't get the religious tinged objections to tables from CSS zealots. I understand that the ultimate goal is to separate data from presentation, and to create "symbolic" names for types of content and to separate those names from the nuts and bolts.
Actually, the "tables" comments in this thread are right-on. I solved my problem by using tables. Any other method was absolutely incomprehensible, CSS or no CSS.
Bored Bystander
Sunday, December 14, 2003
Tables work best. Page layout, whether it is printed or on the web works best by laying out rectangular areas on the page. Each area represents a different object or section on the page. Take a look at a newspaper. Don't see many circular, triangular or random polygonal shaped columns do you? All pictures are square or rectangular in shape. The captions underneath the pictures are all rectangular. The columns and headings are rectangular. Sure there are affects applied to certain areas, but even the affects are contained to a rectangular area. Some of the fancier page Layout software can flow text around curved surfaces, but I don't think this transfers to the web. At any rate, when making webpages, think rectangles and you'll be able to do most anything (within reason, of course). Use CSS to describe the rectangles. Let's say you have 2 pictures with a caption under each. You probably used a table for this (at least I would hope you did). You could make a CSS style "Caption" and use it on the row or column of the table that holds the picture caption.
Just my two cents. (Sorry if all of this is obvious.)
Sunday, December 14, 2003
I think the "CSS culture" has blinded me to the obvious. Thanks, that is a good step in the right direction.
Bored Bystander
Sunday, December 14, 2003
Just look at your favorite pages and peek at the code. Half of them won't render in a WYSIWYG editor, but those that do will show the structure they used.
I also like DreamWeaver for my design & use CityDesk for CM.
www.MarkTAW.com
Sunday, December 14, 2003
What is the best option to buy Dreamweaver for a cheap geek who doesn't make money directly off of web presence?
Bored Bystander
Sunday, December 14, 2003
Font tags considered harmful, tables considered harmful.
Must use CSS.
Well, then about 99% of all sites on the web are harmful.
Mike
Sunday, December 14, 2003
>> Font tags considered harmful, tables considered harmful.
Must use CSS.
Yeah, I've been getting hung up on "statements" like this.
Too bad that when there's a straighforward way to do some software thing, there are huge layers of politics and realpolitik in place to play head games with you to use "higher level" approaches that never seem to be ready for prime time.
Reminds me of people who embraced OOP to such a fanatical degree that it was impossible to suggest writing anything procedurally and/or with static variables.
Bored Bystander
Sunday, December 14, 2003
"Well, then about 99% of all sites on the web are harmful."
No, not harmful. Just obsolete.
http://www.digital-web.com/features/feature_2002-09.shtml
Read up on Zeldman. He has some interesting stuff on his sites.
Interaction Architect
Sunday, December 14, 2003
Please please NO ONE try to defend FONT tags.
They are the devil.
Walter Rumsby
Sunday, December 14, 2003
To address HTML-suckitude:
Download the .zip copies of the HTML 4 and CSS 2 spec, keep them on your local hard drive and take the time to revisit elements and features in the specs when things aren't working the way you expect them too. This can be really illuminating because you might discover better ways of doing what you were trying to do.
I'm not a fan of WYSIWYG HTML editors. Take a look at TopStyle - http://www.bradsoft.com/ - which is a "hand" editor geared towards CSS (and includes a load of useful features).
Keeping a casual eye on Zeldman - http://www.zeldman.com/ - and A List Apart - http://www.alistapart.com/ - can be useful too.
Walter Rumsby
Sunday, December 14, 2003
I just went to the Zeldman site. He use absolute font sizes so that his pages don't scale (via View > Font Size) in the the most widely deployed web browser, IE.
Muppet.
Ponty Mython
Sunday, December 14, 2003
... and he uses a button to navigate to "Previous Reports" - a button to simply navigate somewhere rankles...
Ponty Mython
Sunday, December 14, 2003
Use the border attribute.
ie, within your table element, set border="1", instead of border="0". You'll find it removes a lot of the guesswork when you have mutliple nested tables for layout.
Use .Net if you have it. Not only is the help system comprehensive, but the context sensisitive stuff takes a lot of the agro out of remembering all the element/attributes available. An excellent tool for quickly knocking stuff together, as is Frontpage, although both have a tendency to want to format your code for you.
I have nothing against Dreamweaver, other than that I don't own a copy.
Justin
Sunday, December 14, 2003
"No, not harmful. Just obsolete"
And who is going to build the browser that doesn't render 99 percent of all web sites. Probably mozilla.org;)
I'm not saying that we haven't learned to build better websites than we did 5 years ago, just that there isn't going to be a rush like Y2K Cobol fixup to fix them just because W3C thought it would be a good idea. Web sites that render badly generally pose no threat.
Mike
Sunday, December 14, 2003
Mozilla, IE and I guess Konqueror/Safari and Opera have a "quirks mode". If you don't specify HTML 4 or XHTML as the DOCTYPE (properly) then the browser assumes the HTML will be messy and doesn't try to be standards compliant.
Actually, this could be Bored's problem. See http://www.alistapart.com/articles/doctype/
Walter Rumsby
Sunday, December 14, 2003
This thread really strikes a chord. I've wasted countless hours on getting my own website to look just right...
...soon I intend to spend some personal time with CSS again, to see if I can finally remove the tables. Browsers didn't render CSS properly first time I tried.
I swore a lot. Luckily I didn't have any pets, they wouldn't have survived.
Shodan
Sunday, December 14, 2003
The biggest problem with nested table layouts is that they are write only. I can't understand my own when I come back to them six months later let alone someone else's and I've deciphered more than my share of really ugly code.
The learning curve for css is not trivial but it's elegant and simple once you get the hang of it. The biggest problem is that you have to understand document flow in html to use css well. Cross browser problems are considerably reduced if you develop to something more standards compliant, say mozilla then make sure it also works in IE.
Ken McKinney
Sunday, December 14, 2003
> What is the best option to buy Dreamweaver for a cheap geek who doesn't make money directly off of web presence?
http://search.ebay.com/search/search.dll?query=dreamweaver+3+-templates+-mastering+-training+-frontpage&saregion=0&ht=1&sosortproperty=1&from=R10&catref=C3&sorecordsperpage=50&sosortorder=1&sacategory=18793&BasicSearch=
There's nothing wrong with Dreameaver 3 or 4 for simple stuff like tables.
www.MarkTAW.com
Sunday, December 14, 2003
---" although both have a tendency to want to format your code for you."----
With Front Page you can tell it not to, and it will obey.
I use Front Page like Notepad, that is to say I use it to hand code the Html and then switch to WYSIWYG to have a look. It will also allow you to preview in various configurations. Incidentally you should save in Front Page before you shift views.
Arachnophilia is another good web editor, but as I have Front Page with Office 2000 I use that.
Dreamweaver is atrocious in my opinion; floating toolbars, a tendency to rewrite your code, and other messes. I know I'm in a minority on this, but not a minority of one.
Stephen Jones
Monday, December 15, 2003
* ....I WANT it to, not like how the browser wants to sh*t-schlock it out ...*
unless you want to streach your artistic ability forget how your sites look (at first ) and develop the content. It's the content that matters.
fyi - http://www.useit.com/alertbox/ try reading thru this article by jacob neilson
Ten Most Violated Homepage Design Guidelines - http://www.useit.com/alertbox/20031110.html
If you still feel the urge to create some *beauty* checkout this site by esr site (http://www.catb.org/~esr/) recommendations for design for the design impaired
what to try
here - http://www.catb.org/~esr/site-design.html
and here - http://info.med.yale.edu/caim/manual/index.html (or look at the bottom of the *html hell* pagebelow)
what NOT to try
- http://catb.org/~esr/html-hell.html
last of all check the *view source* on pages that you like ..., cut+paste and experiment.
peter renshaw
Monday, December 15, 2003
for some great CSS inspiration visit:
CSSZenGarden.com
Gavin van Lelyveld
Monday, December 15, 2003
Ponty - Zeldman also offers a style sheet switcher so that you can change his page from his preferred font-size to a higher contrast version which scales. Reading previous reports, or searching the site, will probably reveal his justification for this.
Remember that his target audience is regular readers with a web-design background - people who will take the time to notice these things.
But yes, using a button for a link is a little strange.
Tom (a programmer)
Monday, December 15, 2003
Here's the fundamental difference between using TABLE to do layout and DIV, SPAN
Table is for data, its meant for the structuring of data, not layout. Visually, often you see little difference (though I'd not underestimate how long it can take to do in CSS), but if someone needed to read your web page purely for the content its likely it wouldn't make very much sense.
The TABLE would be read from left to right, perhaps the left most column is News, the middle column the actual content and the rightmost column some advertising or links. If it were annunciated to a blind person, say, then the three different types of content would be run together, unless you nested them carefully and then the user would hear 'Table, Table, column 1, News, dah de dah...' and so on.
Structure the same content with DIVs and you can ensure that the structure of your content remains sane no matter what way any individual user chooses to 'read' it.
Simon Lucy
Monday, December 15, 2003
My problem with using DIV for page layout (and maybe I just haven't read all of the spec properly) is that you can't really specify the DIVs in relation to each other (specifically, their edges).
For example I want to be able to say:
o Box A has:
- top edge: top of window
- left edge: left edge of window
- right edge: right edge of window
- bottom edge: as high as it needs to be for content
o Box B has:
- top edge: bottom edge of Box A
- left edge: left edge of window
- right edge: fixed pixel width
- bottom edge: bottom of window
o Box C has:
- top edge: bottom edge of Box A
- left edge: right edge of Box B
- right edge: right edge of window
- bottom edge: to content
The key point is the bits where I define the edges of various boxes in relation to the edges of other boxes. (This example, in case you were wondering, is the semi-standard "top banner, left navigation, right content" layout.)
Now, you can sort of do stuff like this by nesting DIVs and in the order in which you write the DIVs in the HTML. But what I want is an explicit way (in the CSS) to define the boundaries of the DIVs in relation to the other DIVs. This mirrors what we do in GUI design and in desktop publishing and it don't think that it is an unreasonable expectation for CSS.
Hopefully, at this point someone will point out the CSS property that I've been missing and I can stop using tables...
Bill Tomlinson
Monday, December 15, 2003
Tables might not have been intended for formatting, but that doesn't alter the fact that they are one of the best ways of doing it.
I use borderless tables in Word as well to format documents for printing.
Viagra was originally conceived of as a cardiac treatment drug. Millions have found out that it does very well what it was never designed for :)
Stephen Jones
Monday, December 15, 2003
"This thread really strikes a chord. I've wasted countless hours on getting my own website to look just right..."
This seems to be a common problem for the uber-programmer C++ geek types who proclaim how easy/cheap it is to perform trivial HTML coding work. It's interesting how lame that assertion becomes when taken seriously.
Interaction Architect
Monday, December 15, 2003
Well, in 99% of cases, it's the "just right" part that kills you. As a C++ coder, the "just right" that sucks out all the time and effort.
If you give up on pixel-perfect, lay out the content structurally, and then use CSS to style it to an acceptable level of decent appearance, you will be much happier. Use ems for absolute-widths or positioning and forget about pixel perfect. Your life will be easier.
If your requirements state that it must look good in NN4 or browsers that aren't CSS capable, you're screwed. Kill yourself now and save the grief.
It is OK to use *a* table to do the basic layout. If you find yourself doing nested tables, you're shooting yourself in the foot as far as maintenance goes.
It's good to practice 100% table-free design so you learn the right way to do it in CSS and you'll know when dropping back to tables for layout is worth the loss of structure.
Using anything other than CSS for fonts, colors, and borders is just wrong though.
Richard P
Tuesday, December 16, 2003
I have your answer. USE TABLES!!!
It's much easier the cascading style sheets and faster if you learn in (which is'nt very hard to learn). Here, go to my homepage http://www.yahpoolerz.uni.cc
(It's a yahoo pool cheating website with neat downloads and awsome programs and software). I use tables. Look at my source code and get an idea of what you want to use. Learn tables and you should'nt have a problem at all. As far as alignment and all that stuff, just either rent a book on HTML from the library or by a book on it. It's very easy once you get the hang of it. By the way, my I just started my website so I have the layout looking alright but you might not find much content yet, except some secret breaks and a few downloads but I think the layout is "HOT" , yeah!!!
Brad, Yahpoolerz.uni.cc Host
Tuesday, May 18, 2004
Tables are the last resort, not the first and best.
Harkening back to my childhood days, when kids would shout "Anything you can do, I can do better!" I look at CSS and smile.
CSS/divs CAN do anything tables can do, with only very minor exceptions.
1. It's very difficult to get divs to output rows through a loop effectively.
2. Div positioning can be tricky if you forget the box model.
That's really about it. I've been able to successfully build many websites with not a single table in the code. The only thing to maintain in your mind is that W3C has got an amazing set of links that will help you with all your CSS woes.
There's nothing wrong with a WYSIWYG editor... Unless of course, you're writing web code with it.
For users who want a powerful text editor, I suggest IDM's UltraEdit.
Remember, FrontPage and Dreamweaver are DESIGN tools, not coding tools. Your FrontPage skilz will rarely get you a web gig worth telling your mom about.
Ynfynyty
Thursday, June 10, 2004
 Recent Topics
Fog Creek Home
| 
