Newbie in need of help!(css)

HTML & CSS
1

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 =)!

2

The background image is 1279px wide which means that it will rounded up or down at a different rate to the even numbered 940px element when thay are made central. The background image should be 1280px with the central part exactly in the center of that image.

You will still get a 1pixel jog in older versions of IE though as images on the body are rounded differently.

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?

To save adding an extra html element just make a 450px wide 1px image for the line and then place at 0 0 on .odd and at 100% 0 on .even (or vice versa).

3

Oh my word, that’s a mess…

This is the problem with using Dreamweaver - it turns out to be a nightmare it’s woven - and if you’re just using it as a WYSINQWYG editor without understanding what it’s doing underneath, it can create some absolutely abominable code that is impossible to figure out.

The reason the clouds are not appearing is because the element they’re applied to has shrunk to zero height. It has no content and it’s only children are floated - and unless you tell it to, the parent won’t expand to enclose the floated children. You can do this by adding overflow:hidden; to the container. (Although the method I’ve outlined below uses this in a different place)

But beyond that, the div-460s are confusing the heck out of me.

It should be very simple.

<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>

and so on.

Then in your CSS, you need:

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

and any other styling you need.

There’s no need to give any dimensions to them, they will pick up the intrinsic dimensions of the images automatically.

4

I notice your page isn’t online in the screenshot. If you are unable to give us a live link, at least post full HTML/CSs

5

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??:frowning:

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

6

It might be a caching issue - maybe your browser hadn’t properly reloaded the page last time round? Anyway, it works now and that’s what matters!

But one question, how do I make the h1 container get taller? as in height.
I need to push the text and picture further down below the backgroundimage.

h1 {min-height:…}

7

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? :frowning:

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?

8

Wow! I accidently made the background image ( http://www.hackstavastergard.com/images/content_bg_top.jpg ) appear from nowhere! First it wasn’t there, only the background color was shown. But now it’s there after I changed the css of h1 a little. I change the height, margin 0 and padding 0. Then I was like, what! It worked? But how?
So I deleted those values (attributes) one by one, and when I deleted all the new attributes (that fixed the problem), the background image hasn’t dissapeared! So how is this possible? Everything has the same attributes as before. I don’t understand!

But one question, how do I make the h1 container get taller? as in height.
I need to push the text and picture further down below the backgroundimage.

9

The overflow:hidden; worked perfect!
But my background image still won’t show itself :(.

I’m wondering something else.
How do I make the h1 go further down? I really need that air. As in the text is to tight.

But what I really want is to not delete the h1 there and instead make my background image showitself instead (because the background image have the same text as h1). But I have no idée how to do that.

10

or even better :wink:

<div class="item">
<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;}
.item img {float:right; margin-left:20px;}
.even img {float:left; margin-right:20px;}
11

Oh okay, here is the live website http://www.hackstavastergard.com/gasthem.html

12

p.p1 refers to <p class=“p1”>
A <span> is a generic element for inline content, in the same way that <div> is a generic element for block-level content. If you want to apply arbitrary formatting (eg <strong>, <i> etc are not appropriate, you just want a particular bit of text styled differently), you can put a <span> round it, and then apply formatting to the span.

“html>body#css-zen-garden>div#container>div#intro>div#pageHeader”

Holy guacamole! That is serious overkill.

An ID must be unique - it can only be used once on each page. So you know exactly what #pageHeader refers to, because there can only be one element on the page with id=“pageHeader”. Therefore there is no reason at all even to say that it’s a div, let alone to list every parent element that it sites inside. That just creates a whole load of unnecessary work for you, and gives a much higher chance that it will all go wrong.

13

So I want the text and pictures to line up like this http://www.hackstavastergard.com/images/websitedesign_gasthem_wip01.jpg
but they simply won’t!

And the background picture of the clouds won’t show either!
Can anybody help? In dreamweaver it looks perfect! But in firefox or ie it looks like bad! please take a look!:
http://www.hackstavastergard.com/gasthem.html

14

Glad to see it’s working better! The only thing I can think of that might be causing that 1 pixel jog (which doesn’t happen in Opera, so Dragonfly is no help here :confused:) might be the float:left; on the intro div - I can’t see why you need the float, try getting rid of it and see if that helps.

15

You’ll have to give us a link to a live page for us to really understand what’s going on.

16

I see ok. I understand span a bit more now, thanks. I won’t touch #pageHeader, lol!

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