Newbie in need of help!(css)

[dantadin]

So I'm new to CSS. But I went through a CSS course on lynda.com!
I made this website with the new knowledge with CSS. http://www.hackstavastergard.com/

But now for the other links (gästhem, bed&breakfast, uthyrning,stipendium, ledarskap, möbler and kontakt), there will be a whole new look. As in not the same
look at all like the main page.

This is how it's going to look. http://www.hackstavastergard.com/images/websitedesign_gasthem_wip01.jpg

I got inspired to make background similar to this http://www.csszengarden.com/?cssfile=/207/207.css&page=0 .
But my problem is that I'm new to css and don't really know how to do it. I'm wondering if I could get a little help?=)

Here is what I got to work with:
http://www.hackstavastergard.com/images/body_bg.jpg it looks the same as http://www.csszengarden.com/207/body_bg.jpg and
http://www.hackstavastergard.com/images/content_bg_top.jpg it looks the same as (i want to learn how to put text over that image later with css ^^) http://www.csszengarden.com/207/content_bg_top.jpg
I really really need help, I really want to learn.

So.
In the firefox addon "web developer", if I choose outline>outline custom elements> and write in "div" in Element 1. Then on the website (http://www.csszengarden.com/?cssfile=/207/207.css&page=0) I can see alot of divs. I do have a problem with the names of divs, what they really mean (thinking that my english isn't the best as well).

I'm wondering if this is the correct way to build the website:
http://www.hackstavastergard.com/images/div_needHelp.jpg

Here is how I got to it=
If i choose Outline>Outline current element, then I can see this:

"html > body#css-zen-garden" in here goes the body_bg i think.

"html > body#css-zen-garden>div#container" in here is everything else on the page. But how in the world did he center this div with so many divs inside?????

Makes no sense to me! The only way that I know how to center is with
.center
margin:auto;
width:80%;
And most of the time I can't even get that to work! And I've heard that code snippet isn't good/healthy!

"html > body#css-zen-garden>div#container>div#intro" I'm guessing that in here goes content_bg_top.jpg somehow...

"html > body#css-zen-garden>div#container>div#intro>div#preamble" Or is it in here he puts the content_bg_top.jpg? How confusing! =(. If I write in

div#preamble inside of outline custom elements. Then it's between the blue text saying "Littering a dark and dreary road..." and the "The Road to

Enlightenment". How in the world did he put div#preamble right over the picture of content_bg_top.jpg in that position? Do i use "position:relative" or "position:absolute" to put the text there inside of div#intro? In div#preamble I want to put a text with a picture. The text on the left and the picture to the right. The first text and picture under the title here http://www.hackstavastergard.com/images/websitedesign_gasthem_wip01.jpg . I want to continue like that further down but then switching place. I'm guessing I could do this "text+picture" with a

div#firsttext
float : left; /*on the picture*/
width : 395px;
height: 170px;

div#firstpicture
float : right ; /*on the text*/
width : 395px;
height: 170px;

div#secondtext
float : right; /*on the text*/
width : 395px;
height: 170px;

div#secondpicture
float : left ; /*on the picture*/
width : 395px;
height: 170px;

/*and so on and on*/

"html > body#css-zen-garden>div#container>div#intro>div#preamble>p.p1" and
"html > body#css-zen-garden>div#container>div#intro>div#preamble>p.p1>span" I don't remember anything about a 'span' in the lectures =(! And p.p1 doesn't look like a div! What is a span??

"html>body#css-zen-garden>div#container>div#intro>div#pageHeader". I have no idé how he put up that div ontop of all over the other divs. My best guess is that in the css lynda.com dvd they talked about a 'depth'. This thing "z-index: 3;" and he didn't say much about it at all!=( So how and when do I use z-index: 3;?

"html>body#css-zen-garden>div#container>div#supportingText" I guess this isn't difficult. It's just inside of div#container together with div#intro. Right?

I'll give you a mental cookie if you tell me if I'm on a good way to success or a good way to failure =)!

[diafol]

*Nosebleed*. Perhaps screenshots would be better than getting users to click through all those links.

[dantadin]

*Nosebleed*. Perhaps screenshots would be better than getting users to click through all those links.

But the pictures on the links are so big! I don't think it'll fit in this forum that good :P.
I have a problem with the body not being on the top of the page, so wierd! Please take a look.

http://img34.imageshack.us/img34/4439/noteswierdhtml.jpg

[diafol]

You can shrink and optimize images. I've had it with links - too many sig spammers on this site, sorry.

[teedoff]

Ok without reading the LONNGGG initial post completely, lol Why would your want to design you other pages to look so different than your home page? I mean its not critical they do, but one of the rules of good web design is "Don't confuse your audience".

A general "theme" throughout a website is key to making sure your visitors have a good experience when they come to your site.

Anyway, just my 2 cents.

[dantadin]

I know! I wanted all the pages would look the same, but the person I'm doing the website for is insisting of doing a totaly differnt page on the 'home' page.

Here is the live website http://www.hackstavastergard.com/gasthem.html , one can't see the code in the picture I provided on the last post :P.

[dantadin]

With the new code

<div class="item odd">
<img src="piccy1.jpg">
<p>Text text text text</p>
</div>
<div class="item even">
<img src="piccy2.jpg">
<p>Text text text text</p>
</div>

.item {clear:both; overflow:hidden;}
.odd img {float:right; margin-left:20px;}
.even img {float:left; margin-right:20px;}

I understand and have more controll of it all. Sweet!
But I have a problem with this piecture:
http://www.hackstavastergard.com/images/intro_gasthem.png

You can see that it's 'sticking out' out of the container just a little. Also it makes the left side of the picture white. Any solutions to fix this??:(

http://www.hackstavastergard.com/gasthemv2.html

[dantadin]

It got fixed with a left:-1; in the .intro.
the .container is 940px and the .intro is 940px. The picture of the heavens is 940px wide. Why is .intro still sticking out a little? I shouldn't need to put a left:-1; on it , right? :(

Now I have my other problem.
The black lines under every text( http://www.hackstavastergard.com/images/websitedesign_gasthem_wip01.jpg )...I have no idée how to put it in there. If i make a

border-bottom : 1px solid #f4j5j66;

on

.odd
.even

then it will also effect the pictures! I don't want that :(!
Any idéas?