DIV overlapping

Discussion in 'HTML' started by Luigi Donatello Asero, Dec 8, 2005.

  1. Luigi Donatello Asero, Dec 8, 2005
    #1
    1. Advertising

  2. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    > How can I prevent the <div> which relates to Italy and the the <div> which
    > relates to Sweden from overlapping?
    > https://www.scaiecat-spa-gigi.com/sv/index.php


    You probably won't take this advice (deja-vu), but: don't use
    position:absolute; if you don't understand the consequences.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #2
    1. Advertising

  3. Luigi Donatello Asero

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    proclaimed:

    > You probably won't take this advice (deja-vu)


    I'd save your fingers for more useful things, like picking your nose and
    typing replies to folk who will listen, if I were you.

    --
    Dylan Parry
    http://electricfreedom.org -- Where the Music Progressively Rocks!
    Dylan Parry, Dec 8, 2005
    #3
  4. "Els" <> skrev i meddelandet
    news:...
    > Luigi Donatello Asero wrote:
    >
    > > How can I prevent the <div> which relates to Italy and the the <div>

    which
    > > relates to Sweden from overlapping?
    > > https://www.scaiecat-spa-gigi.com/sv/index.php

    >
    > You probably won't take this advice (deja-vu), but: don't use
    > position:absolute; if you don't understand the consequences.


    The consequences can be understood better by trying to use it... and see
    what it happens.
    I assume that the alternative would be to use
    position:relative;


    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #4
  5. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    > "Els" <> skrev i meddelandet
    > news:...
    >> Luigi Donatello Asero wrote:
    >>
    >>> How can I prevent the <div> which relates to Italy and the the <div>

    > which
    >>> relates to Sweden from overlapping?
    >>> https://www.scaiecat-spa-gigi.com/sv/index.php

    >>
    >> You probably won't take this advice (deja-vu), but: don't use
    >> position:absolute; if you don't understand the consequences.

    >
    > The consequences can be understood better by trying to use it... and see
    > what it happens.
    > I assume that the alternative would be to use
    > position:relative;


    Assumed wrongly.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #5
  6. Luigi Donatello Asero

    Els Guest

    Dylan Parry wrote:

    > Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    > proclaimed:
    >
    >> You probably won't take this advice (deja-vu)

    >
    > I'd save your fingers for more useful things, like picking your nose and
    > typing replies to folk who will listen, if I were you.


    You're so right! :)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #6
  7. Luigi Donatello Asero

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", Luigi
    Donatello Asero finally proclaimed:

    > I assume that the alternative would be to use
    > position:relative;


    No. The alternative is to not specify *any* value for the position and
    to leave out the position rule entirely. You don't need to specify
    anything.

    --
    Dylan Parry
    http://electricfreedom.org -- Where the Music Progressively Rocks!
    Dylan Parry, Dec 8, 2005
    #7
  8. Luigi Donatello Asero

    Arne Guest

    Once upon a time *Luigi Donatello Asero* wrote:

    > "Els" <> skrev i meddelandet
    > news:...
    >> Luigi Donatello Asero wrote:
    >>
    >> > How can I prevent the <div> which relates to Italy and the the <div>

    > which
    >> > relates to Sweden from overlapping?
    >> > https://www.scaiecat-spa-gigi.com/sv/index.php

    >>
    >> You probably won't take this advice (deja-vu), but: don't use
    >> position:absolute; if you don't understand the consequences.

    >
    > The consequences can be understood better by trying to use it... and see
    > what it happens.
    > I assume that the alternative would be to use
    > position:relative;


    Hint: try "float" :)

    --
    /Arne
    -- *Joke of the day* ----------------------------------------
    Support: Click on 'My Computer' on the left of the screen.
    Customer: Your left or my left?
    -------------------------------------------------------------
    Arne, Dec 8, 2005
    #8
  9. Luigi Donatello Asero

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    proclaimed:

    > You're so right! :)


    I'm either stupid or full of chocolate and coffee icecream, but he's got
    me trying to be helpful too now :(

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Dec 8, 2005
    #9
  10. "Arne" <> skrev i meddelandet
    news:...
    > Once upon a time *Luigi Donatello Asero* wrote:
    >
    > > "Els" <> skrev i meddelandet
    > > news:...
    > >> Luigi Donatello Asero wrote:
    > >>
    > >> > How can I prevent the <div> which relates to Italy and the the <div>

    > > which
    > >> > relates to Sweden from overlapping?
    > >> > https://www.scaiecat-spa-gigi.com/sv/index.php
    > >>
    > >> You probably won't take this advice (deja-vu), but: don't use
    > >> position:absolute; if you don't understand the consequences.

    > >
    > > The consequences can be understood better by trying to use it... and see
    > > what it happens.
    > > I assume that the alternative would be to use
    > > position:relative;

    >
    > Hint: try "float" :)



    I did it before (float:left;) with position:relative;
    Perhaps should I try (float: bottom;)?
    It does not seem to look very well without setting any position either...

    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #10
  11. Luigi Donatello Asero wrote:

    > "Els" <> skrev i meddelandet
    > news:...
    >
    >>Luigi Donatello Asero wrote:
    >>
    >>
    >>>How can I prevent the <div> which relates to Italy and the the <div>

    >
    > which
    >
    >>>relates to Sweden from overlapping?
    >>>https://www.scaiecat-spa-gigi.com/sv/index.php

    >>
    >>You probably won't take this advice (deja-vu), but: don't use
    >>position:absolute; if you don't understand the consequences.

    >
    >
    > The consequences can be understood better by trying to use it... and see
    > what it happens.
    > I assume that the alternative would be to use
    > position:relative;
    >
    >

    No, 'position: irrelevant' unless you have a specific reason to do so.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 8, 2005
    #11
  12. "Jonathan N. Little" <> skrev i meddelandet
    news:4398944a$0$17661$...
    > Luigi Donatello Asero wrote:
    >
    > > "Els" <> skrev i meddelandet
    > > news:...
    > >
    > >>Luigi Donatello Asero wrote:
    > >>
    > >>
    > >>>How can I prevent the <div> which relates to Italy and the the <div>

    > >
    > > which
    > >
    > >>>relates to Sweden from overlapping?
    > >>>https://www.scaiecat-spa-gigi.com/sv/index.php
    > >>
    > >>You probably won't take this advice (deja-vu), but: don't use
    > >>position:absolute; if you don't understand the consequences.

    > >
    > >
    > > The consequences can be understood better by trying to use it... and see
    > > what it happens.
    > > I assume that the alternative would be to use
    > > position:relative;
    > >
    > >

    > No, 'position: irrelevant' unless you have a specific reason to do so.


    I want the display the boxes on the top
    (top left, top centre, top right)
    and
    (bottom left, bottom centre bottom right)
    However, it would be nice if they did not overlap...

    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #12
  13. "Luigi Donatello Asero" <> skrev i meddelandet
    news:5F0mf.152051$...
    >
    > "Jonathan N. Little" <> skrev i meddelandet
    > news:4398944a$0$17661$...
    > > Luigi Donatello Asero wrote:
    > >
    > > > "Els" <> skrev i meddelandet
    > > > news:...
    > > >
    > > >>Luigi Donatello Asero wrote:
    > > >>
    > > >>
    > > >>>How can I prevent the <div> which relates to Italy and the the <div>
    > > >
    > > > which
    > > >
    > > >>>relates to Sweden from overlapping?
    > > >>>https://www.scaiecat-spa-gigi.com/sv/index.php
    > > >>
    > > >>You probably won't take this advice (deja-vu), but: don't use
    > > >>position:absolute; if you don't understand the consequences.
    > > >
    > > >
    > > > The consequences can be understood better by trying to use it... and

    see
    > > > what it happens.
    > > > I assume that the alternative would be to use
    > > > position:relative;
    > > >
    > > >

    > > No, 'position: irrelevant' unless you have a specific reason to do so.

    >
    > I want the display the boxes on the top



    I want to display the div boxes on the top
    (top left, top centre, top right)
    and
    (bottom left, bottom centre bottom right)
    However, it would be nice if they did not overlap...

    --
    Luigi Donatello Asero

    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #13
  14. Luigi Donatello Asero

    Els Guest

    Dylan Parry wrote:

    > Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    > proclaimed:
    >
    >> You're so right! :)

    >
    > I'm either stupid or full of chocolate and coffee icecream,


    'or' or 'and'? ;-)

    > but he's got me trying to be helpful too now :(


    Stop now, or be lost forever :p

    Just a reminder (maybe new info for others): the solution to Luigi's
    problems is almost invariably utterly simple. It's the convincing him
    of such fact, which is a downright PITA.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #14
  15. "Els" <> skrev i meddelandet
    news:1f6uk6bvj50ox$...
    > Dylan Parry wrote:
    >
    > > Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    > > proclaimed:
    > >
    > >> You're so right! :)

    > >
    > > I'm either stupid or full of chocolate and coffee icecream,

    >
    > 'or' or 'and'? ;-)
    >
    > > but he's got me trying to be helpful too now :(

    >
    > Stop now, or be lost forever :p
    >
    > Just a reminder (maybe new info for others): the solution to Luigi's
    > problems is almost invariably utterly simple. It's the convincing him
    > of such fact, which is a downright PITA.



    So, tell me which was your fine solution?


    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #15
  16. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    > "Els" <> skrev i meddelandet
    > news:1f6uk6bvj50ox$...
    >> Dylan Parry wrote:
    >>
    >>> Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    >>> proclaimed:
    >>>
    >>>> You're so right! :)
    >>>
    >>> I'm either stupid or full of chocolate and coffee icecream,

    >>
    >> 'or' or 'and'? ;-)
    >>
    >>> but he's got me trying to be helpful too now :(

    >>
    >> Stop now, or be lost forever :p
    >>
    >> Just a reminder (maybe new info for others): the solution to Luigi's
    >> problems is almost invariably utterly simple. It's the convincing him
    >> of such fact, which is a downright PITA.

    >
    > So, tell me which was your fine solution?


    I just *know* you won't use it, but here's anyway:

    <div id="top">
    <div id="a">bla</div>
    <div id="b">bla</div>
    <div id="c">bla</div>
    </div>
    <div id="bottom">
    <div id="d">bla</div>
    <div id="e">bla</div>
    <div id="f">bla</div>
    </div>

    #top,#bottom{
    width:100%;
    float:left; /* to avoid peek-a-boo in IE */
    clear:left;
    margin:20px 0;
    }
    #a,#d{
    width:30%;
    float:left;
    background-color:yellow;
    }
    #b,#e{
    width:30%;
    float:right;
    background-color:blue;
    }
    #c,#f{
    margin-left:34%;
    margin-right:34%;
    background-color:red;
    }

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #16
  17. "Els" <> skrev i meddelandet
    news:3e7gpz9xmor1$...
    > Luigi Donatello Asero wrote:
    >
    > > "Els" <> skrev i meddelandet
    > > news:1f6uk6bvj50ox$...
    > >> Dylan Parry wrote:
    > >>
    > >>> Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    > >>> proclaimed:
    > >>>
    > >>>> You're so right! :)
    > >>>
    > >>> I'm either stupid or full of chocolate and coffee icecream,
    > >>
    > >> 'or' or 'and'? ;-)
    > >>
    > >>> but he's got me trying to be helpful too now :(
    > >>
    > >> Stop now, or be lost forever :p
    > >>
    > >> Just a reminder (maybe new info for others): the solution to Luigi's
    > >> problems is almost invariably utterly simple. It's the convincing him
    > >> of such fact, which is a downright PITA.

    > >
    > > So, tell me which was your fine solution?

    >
    > I just *know* you won't use it, but here's anyway:
    >
    > <div id="top">
    > <div id="a">bla</div>
    > <div id="b">bla</div>
    > <div id="c">bla</div>
    > </div>
    > <div id="bottom">
    > <div id="d">bla</div>
    > <div id="e">bla</div>
    > <div id="f">bla</div>
    > </div>
    >
    > #top,#bottom{
    > width:100%;
    > float:left; /* to avoid peek-a-boo in IE */
    > clear:left;
    > margin:20px 0;
    > }
    > #a,#d{
    > width:30%;
    > float:left;
    > background-color:yellow;
    > }
    > #b,#e{
    > width:30%;
    > float:right;
    > background-color:blue;
    > }
    > #c,#f{
    > margin-left:34%;
    > margin-right:34%;
    > background-color:red;
    > }
    >
    > --



    Did you take into account the structural relationship between for example
    the div which relates to "Semesterbostäder i Sverige" and the one which
    refers to
    "Semesterbostäder i Italien" (both belonging to "Semesterbostäder" but one
    being into the "top" and the another into the "bottom" while putting
    together 3 divs in the bottom and
    3 divs in the top?

    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/s...laegenheten-1-och-2-i-bionaz-valle-daosta.php
    Luigi Donatello Asero, Dec 8, 2005
    #17
  18. Luigi Donatello Asero wrote:
    <snip>
    >>>The consequences can be understood better by trying to use it... and see
    >>>what it happens.
    >>>I assume that the alternative would be to use
    >>>position:relative;
    >>>
    >>>

    >>
    >>No, 'position: irrelevant' unless you have a specific reason to do so.

    >
    >
    > I want the display the boxes on the top
    > (top left, top centre, top right)
    > and
    > (bottom left, bottom centre bottom right)
    > However, it would be nice if they did not overlap...
    >


    FWIIW:

    <style type="text/css">
    #toplists UL, #bottomlists UL {
    width: 25%;
    float: left;
    }
    #bottomlists { clear: left; }
    #listA { background-color: #F88; }
    #listB { background-color: #8F8; }
    #listC { background-color: #88F; }
    #listD { background-color: #F8F; }
    #listE { background-color: #FF8; }
    #listF { background-color: #8FF; }
    </style>

    <div id="toplists">
    <ul id="listA">
    <li>One A</li>
    <li>Two A</li>
    <li>Three A</li>
    </ul>
    <ul id="listB">
    <li>One B</li>
    <li>Two B</li>
    <li>Three B</li>
    </ul>

    <ul id="listC">
    <li>One C</li>
    <li>Two C</li>
    <li>Three C</li>
    </ul>
    </div>

    <div id="bottomlists">
    <ul id="listD">
    <li>One D</li>
    <li>Two D</li>
    <li>Three D</li>
    </ul>
    <ul id="listE">
    <li>One E</li>
    <li>Two E</li>
    <li>Three E</li>
    </ul>

    <ul id="listF">
    <li>One F</li>
    <li>Two F</li>
    <li>Three F</li>
    </ul>
    </div>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 8, 2005
    #18
  19. Luigi Donatello Asero

    Dylan Parry Guest

    Pondering the eternal question of "Hobnobs or Rich Tea?", Luigi
    Donatello Asero finally proclaimed:

    > Did you take into account the structural relationship between

    ....

    WTF are you on? Just thanks the nice lady[1] and use the damn code.
    Don't worry about trying to imply a /structural relationship/ because if
    there is one then you should be using a table anyway!

    _____
    [1] Els, Apologies for referring to you as "the nice lady".

    --
    Dylan Parry
    http://electricfreedom.org -- Where the Music Progressively Rocks!
    Dylan Parry, Dec 8, 2005
    #19
  20. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    > "Els" <> skrev i meddelandet
    > news:3e7gpz9xmor1$...
    >> Luigi Donatello Asero wrote:
    >>
    >>> "Els" <> skrev i meddelandet
    >>> news:1f6uk6bvj50ox$...
    >>>> Dylan Parry wrote:
    >>>>
    >>>>> Pondering the eternal question of "Hobnobs or Rich Tea?", Els finally
    >>>>> proclaimed:
    >>>>>
    >>>>>> You're so right! :)
    >>>>>
    >>>>> I'm either stupid or full of chocolate and coffee icecream,
    >>>>
    >>>> 'or' or 'and'? ;-)
    >>>>
    >>>>> but he's got me trying to be helpful too now :(
    >>>>
    >>>> Stop now, or be lost forever :p
    >>>>
    >>>> Just a reminder (maybe new info for others): the solution to Luigi's
    >>>> problems is almost invariably utterly simple. It's the convincing him
    >>>> of such fact, which is a downright PITA.
    >>>
    >>> So, tell me which was your fine solution?

    >>
    >> I just *know* you won't use it, but here's anyway:
    >>
    >> <div id="top">
    >> <div id="a">bla</div>
    >> <div id="b">bla</div>
    >> <div id="c">bla</div>
    >> </div>
    >> <div id="bottom">
    >> <div id="d">bla</div>
    >> <div id="e">bla</div>
    >> <div id="f">bla</div>
    >> </div>
    >>
    >> #top,#bottom{
    >> width:100%;
    >> float:left; /* to avoid peek-a-boo in IE */
    >> clear:left;
    >> margin:20px 0;
    >> }
    >> #a,#d{
    >> width:30%;
    >> float:left;
    >> background-color:yellow;
    >> }
    >> #b,#e{
    >> width:30%;
    >> float:right;
    >> background-color:blue;
    >> }
    >> #c,#f{
    >> margin-left:34%;
    >> margin-right:34%;
    >> background-color:red;
    >> }
    >>
    >> --

    >
    > Did you take into account the structural relationship between for example
    > the div which relates to "Semesterbostäder i Sverige" and the one which
    > refers to
    > "Semesterbostäder i Italien" (both belonging to "Semesterbostäder" but one
    > being into the "top" and the another into the "bottom" while putting
    > together 3 divs in the bottom and
    > 3 divs in the top?


    I don't speak Swedish, so I did indeed not take into account any
    structural relationship at all. It's easy enough to make it 3 columns
    of 2 rows instead of 2 rows of 3 columns, but then you won't have
    equal heights. If you want to maintain that relationship /and/ equal
    heights to make it look like a table, you're looking for a table, and
    you shouldn't use divs to make life difficult.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Dec 8, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    Re: DIV overlapping

    Luigi Donatello Asero, Dec 12, 2005, in forum: HTML
    Replies:
    0
    Views:
    435
    Luigi Donatello Asero
    Dec 12, 2005
  2. Luigi Donatello Asero

    Re: DIV overlapping

    Luigi Donatello Asero, Dec 19, 2005, in forum: HTML
    Replies:
    2
    Views:
    425
    Luigi Donatello Asero
    Dec 20, 2005
  3. Luigi Donatello Asero

    Re: DIV overlapping

    Luigi Donatello Asero, Dec 19, 2005, in forum: HTML
    Replies:
    2
    Views:
    392
    Luigi Donatello Asero
    Dec 20, 2005
  4. Luigi Donatello Asero

    Re: DIV overlapping

    Luigi Donatello Asero, Dec 20, 2005, in forum: HTML
    Replies:
    6
    Views:
    542
    Neredbojias
    Dec 22, 2005
  5. Replies:
    1
    Views:
    434
    Martin Jay
    Jun 22, 2006
Loading...

Share This Page