Topic: CSS means Constantly Sickening & Stupid!!

hehe...

ok, I've tried and tried the whole CSS thing probably off and on over the past 2-3 years. I bought an awesome book from Sitepoint HTML: Eutopia creating sites without tables, and it is phenominal! BUT, I'm more of a try.... fail...try...fail...try... it WORKED kinda guy.


I've offered to a couple of friends of mine to design sites for them just so I can practice but I cannot quite achieve the results I'm looking for using only CSS. Are tables really designers worst enemy??

One site concept is here www.wayoutwestenterprises.com/jsconsulting/

I have the two images in the body utilizing float: right with a padding of 10px and I like the way it all looks.
But I would love to build this using CSS only. I've made several brutal attempts and they all looked like crap.

And tips from you CSS gods would be nice. If you're into good reading, that book I mentioned is pretty awesome!

thanks!

Hum, there isn't much here.
A header, a navigation, some content with 2 pulled images, a 'navigation', a footer including one more 'navigation'. Put it like that, the markup should be straight forward and the CSS not too shabby.

I'm trying to lay down the page and a basic CSS.


For the record the Constantly Sickening & Stupid thing with CSS is that some browser vendors ignored them for years.

Hope that helps.

The links looks different in FF2 than in IE6 and OP9, but I didn't bother to make the Image Replacements.

It should only take a few background images to get something really close to your page, then some IR for the navigations and voilà.




(Edited by poi on 01-31-2007 00:51)

I'd use one navigation ul, like so...

<ul id="nav">
	<li>
		<a href="marketing/">Marketing</a>
	</li>
	<li>
		<a href="advertising/">Advertising</a>
	</li>
	<li>
		<a href="internet/">Internet</a>
	</li>
	<li>
		<a href="publicrelations/">Public Relations</a>
	</li>
	<li>
		<a href="training/">Training</a>
	</li>
	<li>
		<a href="contact/">Contact</a>
	</li>
	<li id="resources">Resources
		<ul>
			<li>
				<a href="publicrelationsresources/">Public Relations Resources</a>
			</li>
			<li>
				<a href="marketingresources/">Marketing Resources</a>
			</li>
			<li>
				<a href="internetresources/">Internet Resources</a>
			</li>
			<li>
				<a href="marketingresources/">Marketing Resources</a>
			</li>
		</ul>
	</li>
</ul>

...and of course HTML 4.01 Strict.

(Edited by reisio on 01-31-2007 01:37)

tsk tsk tsk....
I'm sure you've heard all of the ways of condemning calling the *tools* stupid, so I won't repeat them here

The main problem I think you are facing is that you are looking at design from a table standpoint. Not in regard to code, but in regard to the initial approach. The methods used 4-5 years ago to create table based designs are obsolete. Don't think in terms of putting images on each corner, and running borders up each side, creating little boxes for each nuance...
Expand the terms in which you think about cutting and attaching your graphics as background images, and a whole big world opens up for you.

For example -

- the entire header of that page can be a single background image.
- Same with the footer.
- The main content area can have a vertically tiling background image.
- A header tag can hold the curved portion that encases the content area,
- the closing paragraph can hold the curved bottom that closes it.

That brings you from 20 or so images to form your basic layout down to 5.
That cuts out huge amounts of kb from your code.
That makes future customization of the design a snap.

quote:

---

Radical Rob said:

Are tables really designers worst enemy??

---

They're up there, yeah (when used for page layout).
In reality the two things that are a designer's worst enemies are the designer, and the client.

As DL-44 emphasized, the (x)HTML+CSS approach starts from the content of the page while table based "layout" starts from the visual design.

Notice that the first thing I did was to list and catergorize the content of the page. That step pretty much defined the whole markup of the page.

Valid ( and semantic ) markup also present the advantage to be insanely simple to style for various media such as print or handheld.


In theory when you disable CSS, the only images that should remain are the illustrations accompanying the content.

The graphic enrichements are mostly done using background images and typography ( you can play with the letter-spacing, text-transform, ... )


It takes a bit of time to switch your mind and think that way, but once you're there, there's no going back.

Let go of your anger, man.




I'm your Yoda. Be my Luke.






*cough*

-steve

Still I am reminded why I love this place so much and ALWAYS come back....

I guess the hardest part for me is (as DL mentioned) is rethinking my frame of mind.
Believe me I'm not one of those guys that asks "How do I do this" and waits for someone else to do it.
That wouldn't really help me. I have been self taught with just about every aspect for my company and I pride myself on that.

SO, I'm at a cross road with this site, stick with the tables (for now) and convert it later. She wanted to get the site done by end of Feb. (hehe....) I've played around with it a little as far as creating a few php pages for the footer nav, main nav, etc. www.wayoutwestenterprises.com/jsconsulting/php/

I am very serious about getting this CSS thing down though. I bring my trusty book with me to work every day, every free moment I'm reading. I come from the backwards school of learning too, look at what someone did, break it apart, figure out why it works, but seems that doesn't work to much if I don't understand the concept as deep as I need to in putting the css together in the first place.

I'll take a crack at it and post it. Wish me luck. :-)

Ok, this is a different layout concept, but basically the same scope.

http://wayoutwestenterprises.com/streetart/streetart_index.htm
I created 3 div id's for each section but I'm not sure what would be the best way to piece together some "content".

There is a screen grab of the layout here http://www.wayoutwestenterprises.com/streetart/img/Picture%207.png

In the img folder there is a top, middle, and bottom for the text content area. Do I need to create a div id for each section? This is where I lose it. I know how I should format the text, but if the box don't look right, what's the sense...

Oh and how would I center everything? I created a #wrapper id but what do I use to center everything?
thanks mates!

Ok, last edit... found a hack to center the divs... i don't understand it but it works. (should anyone care to elaborate on it)
www.wayoutwestenterprises.com/streetart/streetart_index2.htm



(Edited by Radical Rob on 02-01-2007 02:13)

(Edited by Radical Rob on 02-01-2007 02:15)

(Edited by Radical Rob on 02-01-2007 02:33)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
#wrapper {
	width: 711px;
	margin: 0 auto;
}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>
				<a href="#">Los Angeles Street Art</a>
			</h1>
			<ul id="nav">
				<li id="gallery">
					<a href="#">Gallery</a>
				</li>
				<li id="street">
					<a href="#">Street</a>
				</li>
				<li id="sketches">
					<a href="#">Sketches</a>
				</li>
				<li id="submit">
					<a href="#">Submit</a>
				</li>
				<li id="kontakt">
					<a href="#">Kontakt</a>
				</li>
			</ul>
			<div id="content">
				<p>foo</p>
				<div class="bottom"></div>
			</div>
		</div>
	</body>
</html>

margin: 0 auto; sets top and bottom margins to 0, and left and right to auto; it's just less to type than margin-left: auto; margin-right: auto;. [*]

(Edited by reisio on 02-01-2007 02:51)

Hey POI, I didn't even catch the link on my previous read... thanks a bunch! My only question is in the main body section, how would I create the background image so the "top section" remains at the top, "bottom section" remains at the bottom and the middle bg expands as the text or content area expands? I'm so customed to using the bgimage method of tables for that.

When I get to my office today I will make an attempt at placing in the images.

And thanks Reisio, I'm making notes on just about everything! Eventually I hope to whip up code like you guys. :-)

Ok, update.... seems like when I cut out the css and attached it to an external css everything stopped working right.
It's getting a tad bit frustrating.... maybe I shouldn't work so late. (wheres my coffee..... damint, i hate coffee....)

http://www.wayoutwestenterprises.com/streetart/

quote:

---

Radical Rob said:

Ok, update.... seems like when I cut out the css and attached it to an external css everything stopped working right.

---

easy mistake. Look at the path of the images in your style sheet. You have:

background-image: url(img/header.jpg);

Should probably be :

background-image: url(../img/header.jpg);

Because your image is one directory up from where your style sheets are. Right now the style sheet is looking for the images in a directory called "img" that is located in your "css" directory. Which they are not there. So you need to move one directory up.

Later,

C:\

Your urls are relative, and, thus, not in the right place.

For example...
[code]
body {
margin:0;
max-width:711;
background-image:url(img/bg.jpg);
}
[code]

In this case, your bg.jpg is being looked for in the /css/img directory. Change that line to background-img : url(../img/bg.jpg); and you will see it magically show up. The same is true for other images you have referenced in that css document.

-steve

(hits head against keyboard for making stupid mistake)

my bad... thanks guys!

btw, is how I put the content section at the bottom the best way to do so?



(Edited by Radical Rob on 02-02-2007 21:38)

quote:

---

Radical Rob said:

btw, is how I put the content section at the bottom the best way to do so?

---

sure.

Just not sure about some of your html markup though. It works as it is, but there are different ways of doing it. Take for instance, the menus.

After you get more comfortable with using css, take a look at styling the menus using a list. Also, no reason to use the image map. I think that it's deprecated anyway.

Later,

C:\

I need to mess with list style nav more, it get it... sort of, but if I go to fast I OD on css jibberish.

The only reason it's an image map is I plan on creating a flash animated version of the navigation. This site is just so I can practice without
the stress of someone over my should going "Is it done yet? How come this is blue?? Why does'nt the link work? blah...blah..blah...

I'll make an attempt at the nav now.... (big sip of red bull......)

All I can say is I LOVE YOU ALL!!!!! I think I finally got a grasp on CSS.... (elementary of course)
I'm so excited I had to post this... I'll edit this post once I get it a little more completed.

If you're ever in LA I'll buy all of you a drink!!!!!!!!

Perhaps you should take a look at :

http://www.csszengarden.com/

Browsing throught the designs will give you a good idea of what is possible to do with CSS. And if you wonder how it was made, just take a look at the source.

Good luck on your design

----
If wishes were fishes, we'd all cast nets.



(Edited by Moon Shadow on 02-08-2007 16:02)

i've been there before I had a grasp on things. Gotta take another peek. I've run into a little snag with the original design I posted up. I'll repost it
at www.wayoutwestenteprises.com/jsconsulting/layout2/

Problems I've encountered...
1) The navigation layout is not the right color and I cant figure out why...
2) Theres a stupid gap under the body section....

For some reason I had to float all the sections to left otherwise it looked messed up.

Anything I'm doing wrong? hehe... (stupid question)

I had the problem of the <div separation. Poi suggested it was improper paragraphing and it was. There are many <br in the uppermost section of the page.
I would guess that the use of <p instead of <br might solve some of the problems..
Then there is always &nbsp ..but if &nbsp solves the "break" ..then the problem is <p

(Edited by skyetyger on 02-10-2007 05:29)

There are some definite improvements there, but there is still quite a ways to go toclean up that code, and to clean up the general approach. Let me lay out a few things that will help move in the right direction:

1) way too many divs. always think of what you can do with only the bare bones in your HTML, and add elements only when necessary. the 'wrapper' 'headtopper' 'bodytopper' 'lowtop' 'lowmid' etc, are *all* completely unnecessary.
This is part of still looking at the design from a table point of view.
- the *entire* header area can be a single non-repeating background image - logo, text, curved top, and all...
- the 'bodytop' image can be attached to the bottom of the 'nav' div
and so on...

2) way too many class names. same concept as above - start with as few as possbile and only add when needed. Use the Cascading aspect of your cascading style sheets -
- instead of having

<div id="navbg">
	<a href="" class="mainnav">HOME</a> ? 
	<a href="" class="mainnav">MARKETING</a> ? 
	<a href="" class="mainnav">ADVERTISING</a> ? 
	<a href="" class="mainnav">INTERNET</a> ? 
	<a href="" class="mainnav">PUBLIC RELATIONS</a> ? 
	<a href="" class="mainnav">TRAINING</a> ? 
	<a href="" class="mainnav">CONTACT</a>

</div>

Simply remove the class="" from the links, and your CSS, declare like this:

#navbg a {
appropriate styles....
}

The majority of classes in this page can be done away with i this manner...

3) HEADERS!!
The <h1> etc tags exist for a reason. Your "<p class="bodybold">" is a header - code it that way!

4) margins/padding: don't use extra empy <p>'s and divs to add space - set the margins and padding of your element appropriately.

that'll do for now
hope it helps...

Hi Rob;

Sorry to be absent from this really interesting discussion. Great comments in this thread so far. I've got some thoughts of my own.

First: there are at least three really important disciplines in today's web design (four if you count sales/marketing, but let's not go there):
the content people whose job it is to provide meaningful content
the developers who make the technology work
the designers whose focus is on appearance

It's REALLY hard to do all three by yourself. You I gather come from the design spectrum. You start out with an idea of what the page is going to look like and work from there.

The internet started out as a convenient means of distributing primarily text with an odd illustration or chart here and there.

Then it took off commercially and there was a huge push to make a web page look like a print brochure or catalog.

Maybe it's my own bias, or the blogs I follow, but now things have swung towards a more "semantic" web, where (to the extent possible) *everything* in the html markup *means* something. All the presentational stuff is handled by css.

What does that mean? If you look at your page without any css (except the browser's default styles) does it make sense? Does it look like an outline? If you were a googlebot would you know what the purpose of the page was?

This article by Tommy Olsson was a real eye-opener for me:
http://www.sitepoint.com/print/html-37-steps-perfect-markup

In a nutshell - people have bought that "tables for presentation are bad", but they have substituted divs which are essentially equally meaningless. Tommy advocates using html elements wherever possible and styling them. Sometimes you need a div and sometimes a div is semantically meaningful (a division), but use html elements wherever they exist.

If you can find a used copy of Andy Clarke's "Transcending CSS" I REALLY recommend it. I say "used" because 2/3 if it is pretty esoteric. But there is some terrific material on how to start the design process, and how to mark up a page FIRST and style it LATER. That puts the emphasis solidly on meaning, plus it provides GREAT flexibility for re-styling later. It's less fragile, less built around one design.

Excellent link Steve, thanks =)

wow.... here i was thinking I was on the right track! thanks dl for the downlow, i knew there had to be an easier way but as you said, i guess I'm still thinking tables.... I've always been more of a "try it" then see what's broken kind of web designer. That's why I've stuck with table designs this long. Ireally appreciate the tips!

I was going to stick with table based originally for this design by the friend that I'm helping with this wants to get it out by the end of the month.

Hey Steve, great feedback! Great link. I should probably browse around sitepoints site more as they publish the CSS book I bough.

I'm now debating weather I should continue with the layout as is and fix it later or if I could get it "right" the first time. My whole thinking is once I get a page that works perfect style wise, I was going to break it apart using php aand includes to allow for easy updating for hte site.

I will definately spend some time at work tommorow playing with reducing the divs.... :-D

thanks alot you guys!! I'll repost the results tommorow hopefully.



oops, sorry link was typed wrong on my last post, some of you figured it out.... :-)

www.wayoutwestenterprises.com/jsconsulting/layout2/

(Edited by Radical Rob on 02-12-2007 04:04)

ok, change a few things to celean up the css a bit...

As far as having too many divs, I think that way is effective as the top section in the header will eventually be replaced by an animated flash banner.

The bottom sections are going to be expanded on as well as the footer navigation is eventually going to have several more lements.
I just couldn't figure out the lists or the navs. For some reason the coloring isn't right. I put a color element in the div with the nav. I assumed that all non-link elements would default to the color specified but it doesn't.

New link is here.
http://www.wayoutwestenterprises.com/jsconsulting/layout2/index2.html



(Edited by Radical Rob on 02-12-2007 23:04)

Radical Rob..
I don't have time to read the code right now but the page looks much better....

AND...Thanks for the link Steve...