Background image problem

[photomoon]

Hey.
I am new at the forum, also newbie when it comes to on my own coding css.

I have both checked out this forum´s posts and other forums and homepages, without luck finding what I´m looking for.
AND I have tried to learn about positions and float (padding/margin), also without luck (I think that all places I´ve been there is not so much examples. I am more of a practical person than theory… ;) :oops: ).

To get some help, still not got a homepage that I´m satisfied with, so I give you a printscreen of a background-image.

[img]http://www.kolumbus.fi/jani.mantyla/bg-pic4.jpg[/img]

I have been thinking of doing the page with
– body
-(div id=bg)
– wrap
– content
(-maincontent)
– sidebar (I haven´t decided do I need one or not)
– footer

Okey, to my problem(s). :)

– The problem to understand positions and float (padding/margin)

– I would like to know how I the best way can get my text to fit into the "white space"? Is it okey to get the padding/margin to over 150px or what´s the "righter" way?

– I am confused about where is the best place to set the background image – in the body-tag or as a div tag (div id=bg)?
Have tried to get an answer to the div-tag, looking around for solutions, but there is so many ways, and I don´t get how the position/float should be for the bg image and the other divs. :oops: :?

– I don´t know what´s the way to do things, for example the (main)content-tag(s). Should they be height on them or not? It seems so "funny" at the index-site, where there is just a few senses, and good on other sides where there is more text? What is the common way to do this?

– How to get a picture in the footer, that fits the layout? And actually same problem as the maincontent – how to get the footer to fit the layout?

Okey, hopefully I get som help, (because I am desperate :) ) .

Thanx in advance! 8-)

[AshtonSanders]

Welcome to the world of CSS.

I recommend jumping in and trying your best. There really isn’t a "wrong" or "right" as long as it looks the same in most browsers.

With that said, I would recommend looking at other websites, and viewing their CSS to see how they have done it. Here’s a simple site to check out.

Here’s a good practical tutorial on Positions: http://www.barelyfitz.com/screencast/ht … sitioning/

Hope that helps.

[photomoon]

I have now tried different things and also read your link-suggestions. Thanx for them!

I still wondering about position/float (in general);
Is it necessary to use position at all (instead float)?
Is it more position:absolut that´s used (against position:relative)?
Can I just use float:left and/or right, and position absolut, and not at all relative?

[AshtonSanders]

First off, there’s no real "right" or "wrong"… there’s only "Works in all browsers" or "doesn’t work in all browsers" Everyone has their own way of using CSS…. and if it works, it works.

"photomoon" wrote:

Is it necessary to use position at all (instead float)?

They both have their uses. Position is very useful because it doesn’t have a lot of cross-browser problems, but it "extracts" the element from interacting with other elements… so that can be touchy too…

"photomoon" wrote:

Is it more position:absolut that´s used (against position:relative)?

Position: relative is used to create the "outline" or "box" that you can then use position: absolute to base your movement (top, right, bottom, left) off of..

"photomoon" wrote:

Can I just use float:left and/or right, and position absolut, and not at all relative?

Position:absolute "overwirtes" float. You can’t use both at the same time.

[Author]

Posts