I'm so Annoyed with Myself - But More Annoyed With CSS

**JardinPrayer** · August 29th 2008, 04:07 PM

You know, if I had a week with nothing else to think about, I could sit down with any tutorial or Dummies book and have CSS down pat. That's how I taught myself HTML 6 years ago. That's how I taught myself Photoshop. But, here I am, trying to design a real website for a real nonprofit organization I'm starting and it has to be up and running and it has to be soon and I have a gazillion other things to do to make all of tis work. So, I'm failing miserably. I'm looking at half a dozen or so online tutorials and - for something that is supposed to be so simple - it is amazing how no two sites seem to agree on how to make a simple, 3-column, fixed width page with a header and footer. I'm trying to just extract the information I need without actually sitting and studying the syntax, so I'm baffled by words like "float" and "margin," that were not in my HTML language. I'm still thinking like a table designer and I cannot make the transition. I wanted to just lift some code and plug in my content. No deal. Ain't working. I'm literally

I do have a friend coming over on Monday morning (if she shows up...she's technically proficient, but very dreamy and forgetful and didn't show up last time we had plans to do this). But, I want it done now! I want the stupid code out of the way so I can get back to the content and the graphic design.

Okay, rant over.

**MarcusAndreas** · August 29th 2008, 07:25 PM

HTML is an awesome language.
I found this, it is a quick guide to CSS: http://www.thenoodleincident.com/tut...css/index.html

HTML forever!
PHP is too hard.

**$cirisme** · August 29th 2008, 08:00 PM

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<style type="text/css">
		#content {
			width: 700px;
			margin-left: auto;
			margin-right:auto;
			background-color: blue;
		}
		
		.column {
			float: left;
		}
		
		#column1 {
			background-color: green;
			width: 100px;
		}
		
		#column2 {
			background-color: red;
			width: 500px;
		}
		
		#column3 {
			background-color: green;
			width: 100px;
		}
	</style>
	
</head>

<body>

<div id="content">

	<div id="column1" class="column">
		<p>column</p>
	</div>
	
	<div id="column2" class="column">
		<p>column</p>		
	</div>
	
	<div id="column3" class="column">
		<p>column</p>
	</div>
	
</div>

</body>
</html>

There you go.

**$cirisme** · August 29th 2008, 08:19 PM

Sorry, here is that same thing with a header and footer, I missed that when reading your post the first go round.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
	<style type="text/css">
		#header {
			margin-bottom: -16px;
		}

		#content, .bar {
			width: 700px;
			margin-left: auto;
			margin-right:auto;
			background-color: blue;
		}
		
		.column {
			float: left;
		}
		
		#column1 {
			background-color: green;
			width: 100px;
		}
		
		#column2 {
			background-color: red;
			width: 500px;
		}
		
		#column3 {
			background-color: green;
			width: 100px;
		}
		
	</style>
	
</head>

<body>

<div id="header" class="bar">
	<p>header</p>
</div>

<div id="content">

	<div id="column1" class="column">
		<p>column</p>
	</div>
	
	<div id="column2" class="column">
		<p>column</p>		
	</div>
	
	<div id="column3" class="column">
		<p>column</p>
	</div>
	
</div>

<div id="footer" class="bar">
	<p>footer</p>
</div>

</body>
</html>

**JardinPrayer** · August 29th 2008, 08:26 PM

But...but...but...that code doesn't say all the other stuff about text alignment and stuff to center it on the screen. I'll give it a try. Thanks.

**$cirisme** · August 29th 2008, 08:31 PM

The margin-[left|right]: auto aligns the whole block in the center.

**JardinPrayer** · August 29th 2008, 08:38 PM

I don't get it...how does that code tell the columns to line up alongside one another? It doesn't specify position at all.

**$cirisme** · August 29th 2008, 09:05 PM

Jardin, floats are the most complicated and counter intuitive things in CSS. By floating the columns, we are pulling them out of the ordinary document flow (without the float, each column would appear below each other) and telling them to stack up next to each-other in the left of the parent element.

You don't understand it to use what I gave you, but if you want to learn more you can read about float theory. But I honestly wouldn't bother if I were in your position. Learn more CSS first imho.

**$cirisme** · August 29th 2008, 09:06 PM

IOW, floats are "magic". Because floats pull things out of the normal document flow, they basically have their own gravity and all kinds of strange rules apply.

**JardinPrayer** · August 29th 2008, 09:30 PM

That actually made sense to me.

**$cirisme** · August 29th 2008, 10:18 PM

I have that effect on people.

**JardinPrayer** · August 30th 2008, 07:51 AM

Well, I tried to incorporate those principles into my little site (actually, it's a site I'm building for a friend as a testing ground for my site) and the problems are:

the right column doesn't float (I checked syntax and it all seems correct, but obviously something isn't)
The footer doesn't center
the background image doesn't display for the "container," which is the word I'm using where you used "content."

Any bright ideas without me having to give you all the code?

**$cirisme** · August 30th 2008, 11:15 AM

I'm not sure what you mean by #1 and #2 since they work in my design. For #3, make sure you are using the rule like: background-image: url(URLFORIMAGE);

**JardinPrayer** · August 30th 2008, 11:42 AM

For #3, I'm using: background-image: url(images/imagefilename); because it's in a directory called "images" at the same level as the css file and the html file. So, the file structure looks like this:

(folder)images
(file)blahblah.css
(file)blahblah.html

I've tried using (images), (/images), and ('images'). Actually, it displayed at some point yesterday, but I changed something else...not this line. Maybe I should put them up on my site somewhere in the background and let you look, eh?

As for #1 and #2, I didn't use your code specifically...I integrated it into what I already had.

**$cirisme** · August 30th 2008, 11:59 AM

Definitely do /images/imagefilename.ext

And for the others, I have absolutely no way of helping without knowing what you did. I told you floats are complicated.

Thread: I'm so Annoyed with Myself - But More Annoyed With CSS

Thread Tools

Search Thread

I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Re: I'm so Annoyed with Myself - But More Annoyed With CSS

Similar Threads

Al Qaeda annoyed with 9/11 troofers

I Am Seriously Annoyed with Ryokan

Dee Dee Warren's pick for 10-12-2003 ~ Beware of Mildly Annoyed Buddhists

Posting Permissions

Brutal cleaver assault on British...

Giving Permission to Die

Passed On What I Received

Who owns your DNA? Turns out you...

NSM Evotional 05/22/2013

YEC perspective of Adam and Eve

Tell Your Dumb Jokes Here

Meteors have another go at hitting...

Meteors have another go at hitting...

Tell Your Dumb Jokes Here

Blog Entries

5 Questions for Advocates of the...

The Scholarly Nutshell, #1

A Blog Resurrection