Alrighty, for the kick off, I'm new, so Hello. Ok, here's the problem: I have two div elements, and I positioned a picture over one, and that was good. Then, I tried to position the same picture (copied) over a second div element, but for some reason, it won't go. I tried everyithing. At my original web design community no one replied really to help, so I'm hopign someone can here.


You can see everything here: http://geocities.com/tatlntokyo/
(Geocities doesn't work with .png's so just ignore the fact you can't actually see it, because you can see the outline anyways.

PLease help?

I appreciate it. Thanks!

Deunan

#1 thing to do - put a proper DOCTYPE on your pages.

#2 Instead of using outdated code like hspace and vspace, I suggest you learn about floated layouts http://css-discuss.incutio.com/?page=FloatLayouts

#2 begets #3 - get rid of the absolute positioning.

Thank you, now I'll check this out. If I run int some sort of problem for some reason, can I contact you again?

Deunan always know you can ask any time you have a problem. Many if us will be happy to help with any question you have.

Ok, I went and tried that CSS stuff. I still can;t get it to work.

You can see this test page I made: http://geocities.com/tatlntokyo/
Do you see the two green div's? Well, what I want to do is seperate them, and have them both a bit i nthe center, one a little left, one a little right but I just canot get it to be so. If I chance anything about Ferno (smaller div) the larger one acts as a barrier or something, and the little one always stays close to it, I can't move it away from it, and more ot the right. I've fiddled with everything.

Help >.<

The problem is in trying to use positioning. It's usually not the best way to layout a site.

The way I would probably do this is:


HTML Structure:

<div id="container">

 <div id="content">
  <p>some content</p>
 </div>

 <div id="ferno">
  <p>some content</p>
 </div>

</div>

CSS:

div#container {width: 40px; margin: 50px auto}
div#content {float: left; margin-right:20px}
div#ferno {float: left}

The margin: 50px auto on the container div is shortcut. It's giving the top and bottom margins 50px and letting the browser give an auto margin to the left and right. auto will make sure both left and right margins split any space leftover by after taking the width of the container into account. The margins will be equal and the overall containing div will be centered.

I'm just guessing at the width and you'd need to adjust to what you need.

div content is floated left so it will sit along the left edge of container. div ferno also floated left will sit next to div content. The margin-right on content will put some space between them.

Most css layouts make use of floats and margins to position the various elements. The absolute positioning sounds like it will be easier to use, but it actually makes things more difficult at times.

>.<

I'm staring at it, and trying to figure it out. I fiddled a bit with it, but still it's going over my head, better yet, right through it. I just can't get it, espcially
the part:

div
#container {width: 40px; margin: 100px auto}

I'm sorry I just can;t wrap my head around quite yet. >.<

#container {width: 40px; margin: 100px auto}

The "container" holds all the other divs for the layout.
I think the width: 40px is fairly self-explanatory
margin: 100px auto - is CSS shorthand - instead of:

margin: 100px auto 100px auto; - which means Top, Right, Bottom, Left - just think TRouBLe.

What that does then is to add a 100px top and bottom margin, and makes left and right margins 'auto' - which is how the container div gets centered on the page. In order for this method of centering to work, you have to define a width on the div, in this example the 40px.

In order for all of this to work properly, you MUST include a proper DOCTYPE on all of your pages.

You also have to get rid of the position:absolute - it causes major headaches and can be harder to master than using floats.

LadynRed covered it perfectly. I'll try using a non css analogy.

Imagine you have two small boxes and you want both sitting in the middle of your living room one next to the other.

What we're doing is taking both boxes and putting them inside one larger box and moving the larger box to the middle of the room.

div#container is the big box. We center that and then we can apply other rules to the other divs to get them to display the way we want inside the big box.

I hope that makes sense.

Well I took a look to see if I could figure anything out, and noticed, your first div has the wrong id (C instead of c). Secondly do make it valid or else it'll have issues. There is code after your closing html tag that the server put in that you need to remove, it'll shoot your site to pieces.

C instead of c Good catch.

Sorry this took me a day or two to get back to.

Well, that non-css analogy did help. I wondered before if it was something like that. Thinking of it that way really helps. So, you have this big box, and these two smaller boxes set inside of it, and "stuck" to the sides of it, and when you expand the box, those two smaller boxes would naturally draw away from each other. (Even virtual elasticity works^^). That I can understand.


Since I'll be playing with it, now I'd like to know why it had to chande when I was just getting SO used to the other way of doing divs. Well, variety is good.

I'd still like to position my original .png's over thwm though because I really want it to be that way, but I don't quite want to use them as the backgrounds, (I'm stubborn.)

I wanna thank everyone for helping me so far. I've never been to a forum where people could help you like this~

Ok, now, off to divy div land~

Glad we could help and glad the analogy made sense. I understand the stubbornness. I can be the same way.

And remember to ask more questions as they arise.