Topic: Absolute and Relative positioning

Hi, guys.
Can I ask you about this please?
Well, there are three boxes in my site: See here: http://www32.brinkster.com/sanukiudon/1.htm .
I am trying to set those three boxes nicely. But not yet as you know.

I wanted to use absolute technich to set all of them. My code is here:

quote:

---

.left{
background: #666;
border: 1px solid #fff;
width: 15%;
padding: 8px;
position: absolute;
top: 18%;
left: 1%;
}
.middle {
background: #666;
position: absolute;
top: 18%;
left: 23%;
width: 75%;
padding: 10px;
border: 1px solid #fff;
}

.top {
background: #666;
width: 75%;
border: 1px solid #fff;
padding: 4px;
position: absolute;
top: 3%;
left: 23%;
}

---

And I did simillar thing using relative position technich like:

quote:

---

.left{
background: #666;
border: 1px solid #fff;
width: 170px;
padding: 8px;
position: absolute;
top: 70px;
left: 20px;
}
.middle {
background: #666;
position: relative;
width: auto;
margin: 70px 20px 20px 190px;
padding: 10px;
border: 1px solid #fff;
}

.top {
background: #666;
width:650px;
border: 1px solid #fff;
padding: 4px;
position: absolute;
top: 20px;
left: 210px;
}

---

I got simillar result but, I prefer absolute way as my site is supposed to flow and fit depending on screen resolution, right? So I got a question here: Do you guys, when do you use relative positioning method? I feel like absolute position is better than relative as I can expect easily what I will get. Am I wrong?

Any advices will be great and wonderful.


Hiroki Kozai

And guys, just I have finished making another sample page.
If you don't mind, please see it using verious blowsers?
http://www32.brinkster.com/sanukiudon/kill.htm
I can do only IE5 and IE6.
I want to check following:
1.I set all three boxes get even space between boxes as well as the distance between boxes and browser window.
2.I set exactly 100% if you sam up box width and magins. Do you know what I mean? I am being afraid if box interfer each other or not. I have been having this problem for ages like http://www32.brinkster.com/sanukiudon/1.htm

Thanks in advance.
Cheers,


Hiroki Kozai

[This message has been edited by Hiroki (edited 04-23-2003).]

[This message has been edited by Hiroki (edited 04-23-2003).]

Well Hiroki, I wonder if you havn't gotten this a little backwards.

quote:

---

I prefer absolute way as my site is supposed to flow and fit depending on screen resolution, right?

---

That's not the way absolute vs relative position works.
Look at it like this:
- Absolute position calculates ALL placement from the upper left corner of the screen.
The placement can be set as pt, px, em, %. The type of valye you choose here controls how far from the upper left corner the element will be placed. Use fixed valyes (px, pt) to keep the element at the same place regardless of the screen resolution. Use flexible values (%, em) to get a distance from upper left based on screen resulotion.

- Relative position measures the placement of your element from the element ABOVE in the actual source code.
The values can be just as with absolute positioning.
There is one more thing with relative position, it reserves space on the screen regardless of its visibility.


On my site I've used relative positioning in combination with % and px for the values for almost all my elements on the site in order to make it scale as well as possible while keeping its relative proportions.
See: http://www.dmsproject.com/ for the site, the CSS is here: http://www.dmsproject.com/css/dms_css.css

/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

quote:

---

- Absolute position calculates ALL placement from the upper left corner of the screen.

---

Not really. If you absolutly position a nested element the absolute position of 0,0 is caculated from the top left of the parent element, ingoring all of the parent elements padding values (I'm not sure if it ingores the parent's margins though as the margn is technically outside of the the elements content area). And about "There is one more thing with relative position, it reserves space on the screen regardless of its visibility." I just tought I'd add that if you use display:none then it won't reserve that space.

Hiroki: Now that you've spent some time playing with CSS and you have an understanding of most of the trems mean you should go re-learn it from a comprehensive source like the W3C so that you can form a clear model in your mind as to how it's structured and how the different principals relate to and affect each other.

Hi, guys. Many thanks to your replies. I really appreciate them.

Well, Dracusis. I have already printed out W3C CSS1 and CSS2 specification. And try them and reread them again and again. I agree with you. My CSS understanding is better than before but not good enough yet. Thanks for your offer.

But I still wonder why I cannot set boxes using absolute position.
I'd love set everything using %. You know what I mean? In that way, my site flow depending on the screen resolution, right. I belive it is the best way to deal with screen resolution problem.

But I haven't been able to achieve that yet. I though I did. But I lost all space between my boxes which hold nab, menu, and content.... I will try to find mistakes. But not sure yet.

This thread is related to http://www.ozoneasylum.com/Forum8/HTML/000565.html . Also you can see what I mean here: http://www32.brinkster.com/sanukiudon/html/2t.htm .

Unfortunately I am afraid I got worse....
So disappointing.....

Hiroki Kozai

Drac, thanx for that clarification (since I actually use that nested abs pos effect I ought to remember it one would think...).

The display:none is CSS2, right? Or at least not supported in NS4. I've been coding so much using visibility:hidden/visible to cater for NS4 so I didn't think of that.

Hiroki:
Looking at http://www32.brinkster.com/sanukiudon/html/2t.htm parts of it flows fine but some things stand in the way.

One: Parts of the table seems to be using fixed width this will prevent the container for the table to expand/contract freely

Two: If you by "losing all space between" mean that as the window shrinks the elements come closer and closer until they overlap. If so, this is probably and effect of the z-indexing that the browser interprets by itself if you don't specify it in the code. If I remember correctly the browser will stack the pages elements in the order they appear in the code, from top to bottom.
Tis means that the menu and the content area (which share the same horisontal space) will be stacked with one "above" the other, thus creating this effect.

I try to use "float" to take care of things like this. The effect is that with the menu having float:left; and content float:right; (control the spacing between them with margin-left & margin-right") you bring them on the same z-index level. This way the elements will reposition on the screen when there is no more space for them (when they now overlap).

It is tricky to make good fluid design with full control over the positioning of the elements. You are definatley on the right track so just keep on experimenting.

/Dan


{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Hi, guys. How are ya?
Do you know any good site to study absolute position and relative one?
I cannot understand concept of relative positioning.
If you know, let me know please.
Cya.


Hiroki Kozai

Hi, Dms! How are you? Are you there????
Could you explain about this more:

quote:

---

Relative position measures the placement of your element from the element ABOVE in the actual source code.
The values can be just as with absolute positioning.
There is one more thing with relative position, it reserves space on the screen regardless of its visibility.

---

I really want to undertand them. It was interesting to see your site. You set almost everything using relative positioning. If I were you, I would do them using absolute positioning straighway as I don't know about relative positioning well.

Many many thanks in advace,



Hiroki Kozai

No time right now, but I'll be back and try to illustrate it for you.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Hi, Dms. Great to hear from you. It might be midnight in Sweden, right. Here NZ, it is quater to 9am.
Have a good sleep.

Well, I am understanding about Relative positioning through here. DL and Emperor explained it for me. So that is OK. I really appreciated your offer.

Many many thanks for that.
Have a good night.
Cya.

Hiroki Kozai

I saw the posts over at the GN and it seems like you are getting the hang of it, good work.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Hi, Dan. How are you? I am going to play valleyball today.
It will be fun. I need some exercise.
Thanks for your reply.
Have a good weekend.
Cya.



Hiroki Kozai