[Webteam] Re: CSS question for www.squeak.org

[Jason Rogers]

Karl you can do it by wrapping the menu and news divs in another div
that is absolutely positioned, then you make the menu and news divs
relative and the 'margin-top: 20px' will work.

So you end up with something like in the attached file.

On 1/12/06, karl <karl.ramberg at chello.se> wrote:
> Sylvain pralon skrev:
> > Hi
> >
> > I am a newbie in smalltalk but I have a good experience in CSS !
> > Your problem is a classic one. The problem comes from the fact your
> > positions are absolute.
> > So if the menu div changes the news div don't care !
> >
> > Solution :
> > * position : relative for the both div
> > * for the news div -> margin-top : 20px;
> >
> > try this, I think it will work, if not tell me !
> >
> > sylvain
> Thanks. The whole page is designed using absolute positioning, so it seems
> the style script needs a overhaul...
> Karl
> >> I'm thinking of adding a small News box on www.squeak.org but I can't
> >> figure
> >> out a CSS issue. I have a menu wich is defined like this:
> >>
> >> #menu {
> >>  position:absolute;
> >>  top: 75px;
> >>  left: 10px;
> >>  width:110px;
> >>  padding:10px;
> >>  background-color:#eee;
> >>  border:1px dashed #999;
> >>  line-height:17px;
> >> }
> >>
> >> Below that menu box I would like to display the news box but the menu
> >> box changes in height.
> >> How do I tell the news box to position it self about 20 pixels below
> >> the bottom of the menu box ?
> >>
> >> #news {
> >>  position:absolute;
> >>  top: ?????; menu bottom + 20 px
> >>  left: 10px;
> >>  width:110px;
> >>  padding:10px;
> >>  background-color:#eee;
> >>  border:1px dashed #999;
> >>  line-height:17px;
> >> }
> >>
> >> Karl
> >>
> >>
> >>
> >
> >
> >
> >
>
>
>
>


--
Jason Rogers

"I am crucified with Christ: nevertheless I live; yet not I,
but Christ liveth in me: and the life which I now live in
the flesh I live by the faith of the Son of God, who loved
me, and gave himself for me."
    Galatians 2:20
-------------- next part --------------
------- absolute div -------
|                          |
|   ------ menu ------     |
|   |                |     |
|   |      ....      |     |
|   |                |     |
|   ------ menu ------     |
|                          |
|         (20px)           |
|                          |
|   ------ news ------     |
|   |                |     |
|   |      ....      |     |
|   |                |     |
|   ------ news ------     |
|                          |
------- absolute div -------

<div class='absolutePositionedClass'>
    <div class='menu'>
    </div>
    <div class='news'>
    </div>
</div>