div instead of tables

Discussion in 'HTML' started by Luigi Donatello Asero, Oct 2, 2003.

  1. Needless to say I still need learn very much about CSS.
    I am trying to use div instead of tables to reproduce a similar structure as
    in www.scaiecat-spa-gigi.com/sv/valkommen.html
    Unfortunately I find it difficult to have the text as high as the navigation
    menu which is on the left.
    Does perhaps IE not support <div> positioning or can I just have a div after
    the other vertically but not horizontally?
    I thought I could have two <div> at the same height giving the same value to
    their "top" but it does not seem to work.
    I tried to do it on the page www.scaiecat-spa-gigi.com/sv/testdue.html

    - -
    Luigi ( un italiano che vive in Svezia)



    http://www.scaiecat-spa-gigi.com/sv/svezia.html
    http://www.scaiecat-spa-gigi.com/sv/lagenheterhusrumitalien.html
    Luigi Donatello Asero, Oct 2, 2003
    #1
    1. Advertising

  2. Luigi Donatello Asero

    brucie Guest

    brucie, Oct 3, 2003
    #2
    1. Advertising

  3. "brucie" <-html.org> skrev i meddelandet
    news:amzwboyd782v$...
    > In post <F%1fb.27109$>
    > Luigi Donatello Asero said...
    >
    >
    > > I am trying to use div instead of tables to reproduce a similar

    structure as
    > > in www.scaiecat-spa-gigi.com/sv/valkommen.html

    >
    > http://usenet.alt-html.org/layout-thingy.html
    >
    > --
    > 03/October/2003 09:23:55 am


    What about having a menu on the left and another on the top as on
    www.scaiecat-spa-gigi.com/sv/valkommen.html
    Is that possible with <div>?

    - -
    Luigi ( un italiano che vive in Svezia)



    http://www.scaiecat-spa-gigi.com/sv/svezia.html
    http://www.scaiecat-spa-gigi.com/sv/lagenheterhusrumitalien.html
    Luigi Donatello Asero, Oct 3, 2003
    #3
  4. Luigi Donatello Asero

    brucie Guest

    brucie, Oct 3, 2003
    #4
  5. "brucie" <-html.org> skrev i meddelandet
    news:...
    > In post <NK2fb.27115$>
    > Luigi Donatello Asero said...
    >
    > >>> I am trying to use div instead of tables to reproduce a similar

    structure as
    > >>> in www.scaiecat-spa-gigi.com/sv/valkommen.html

    >
    > >> http://usenet.alt-html.org/layout-thingy.html

    >
    > > What about having a menu on the left and another on the top as on
    > > www.scaiecat-spa-gigi.com/sv/valkommen.html
    > > Is that possible with <div>?

    >
    > yes. you just stick a <div> containing your other menu in the content
    > area.
    >
    >
    > --
    > 03/October/2003 09:53:53 am

    Just
    now I have this on the relative style sheet which I use on
    www.scaiecat-spa-gigi.com/sv/test2.html
    but the buttons on the left do not look like buttons.

    p{

    text-indent:5%;


    }
    body {
    background-color: #ffffcc;
    margin-left:auto;
    margin-right:auto;}






    H1 {
    background-color:#CCFFFF;

    font-size: 250%;
    font-style: italic;
    font-weight:bold;
    text-align: center;

    }


    H2 {
    background-color:#ffffcc;
    font-size: 120%;
    font-style: italic;
    font-weight:bold;
    text-align:left ;


    }

    H3 {
    background-color:#FFCC66;

    font-size: 100%;
    font-style: italic;

    text-align: center;

    }


    ..c{color:#000000;

    background:transparent;}






    div{border:1px solid;}


    #content{
    background:#ffffcc;

    position:relative;
    margin-left:30%;


    border:1px solid white;

    }



    #menu{color:blue;
    background:#ffcc66;
    border:1px solid red;
    display:block;
    position:relative;
    float:left;
    width:20%;

    }

    #head{color:blue;
    background:#ffcc66;
    position:relative;

    font-style: italic;
    font-weight:bold;


    text-align: left;
    border:1px solid red;
    display:inline;
    }
    DIV.navigator{
    background:#ffcc66;



    border:1px solid white;
    text-align:center;
    }

    ..navigator1{color:blue;
    background:#ffcc66;
    border:1px solid red;
    display:block;

    }

    ..navigator2{color:blue;
    background:#ffcc66;

    font-style: italic;
    font-weight:bold;


    text-align: center;
    border:1px solid red;
    display:inline
    }


    - -
    Luigi ( un italiano che vive in Svezia)



    http://www.scaiecat-spa-gigi.com/sv/svezia.html
    http://www.scaiecat-spa-gigi.com/sv/lagenheterhusrumitalien.html
    Luigi Donatello Asero, Oct 3, 2003
    #5
  6. Luigi Donatello Asero

    Richard Guest

    Luigi wrote:

    > Needless to say I still need learn very much about CSS.
    > I am trying to use div instead of tables to reproduce a similar
    > structure as
    > in www.scaiecat-spa-gigi.com/sv/valkommen.html
    > Unfortunately I find it difficult to have the text as high as the
    > navigation
    > menu which is on the left.
    > Does perhaps IE not support <div> positioning or can I just have a div
    > after
    > the other vertically but not horizontally?
    > I thought I could have two <div> at the same height giving the same
    > value to
    > their "top" but it does not seem to work.
    > I tried to do it on the page www.scaiecat-spa-gigi.com/sv/testdue.html


    No problem.
    <div> division one</div>
    <div> division two</div>
    Produces a field on top of a field.
    Similar to:
    <table>
    <tr><td>division one</td></tr>
    <tr><td>division two</td></tr>
    </table>

    You can also nest divisions a little easier than with tables.
    With tables, you use rowspan and colspan, but with division, no need to.
    Just use "position:absolute; left:10px; top:10px;"
    <div id="name1">
    <div id="name2">
    <img src="filename">
    </div>
    <div class="name3"><center>
    <img name="main" src="filename" height="250" width="250"></center>
    </div>
    name1 stuff goes here
    </div>


    This simple code produces 3 divisions. I have my css attributes set to float
    division 2 to the right of division 1.
    Division 3 is contained within division 2.

    http://1-large-world.com/div1.html

    Ok, don't be eating or drinking anything when you click on the link.
    The page shows some ways of manipulating division tags.
    It ain't perfect, but it gets the point across.
    Richard, Oct 3, 2003
    #6
  7. "Richard" <anom@anom> skrev i meddelandet
    news:...
    > Luigi wrote:
    >
    > > Needless to say I still need learn very much about CSS.
    > > I am trying to use div instead of tables to reproduce a similar
    > > structure as
    > > in www.scaiecat-spa-gigi.com/sv/valkommen.html
    > > Unfortunately I find it difficult to have the text as high as the
    > > navigation
    > > menu which is on the left.
    > > Does perhaps IE not support <div> positioning or can I just have a div
    > > after
    > > the other vertically but not horizontally?
    > > I thought I could have two <div> at the same height giving the same
    > > value to
    > > their "top" but it does not seem to work.
    > > I tried to do it on the page www.scaiecat-spa-gigi.com/sv/testdue.html

    >
    > No problem.
    > <div> division one</div>
    > <div> division two</div>
    > Produces a field on top of a field.
    > Similar to:
    > <table>
    > <tr><td>division one</td></tr>
    > <tr><td>division two</td></tr>
    > </table>
    >
    > You can also nest divisions a little easier than with tables.
    > With tables, you use rowspan and colspan, but with division, no need to.
    > Just use "position:absolute; left:10px; top:10px;"
    > <div id="name1">
    > <div id="name2">
    > <img src="filename">
    > </div>
    > <div class="name3"><center>
    > <img name="main" src="filename" height="250" width="250"></center>
    > </div>
    > name1 stuff goes here
    > </div>
    >
    >
    > This simple code produces 3 divisions. I have my css attributes set to

    float
    > division 2 to the right of division 1.
    > Division 3 is contained within division 2.
    >
    > http://1-large-world.com/div1.html
    >
    > Ok, don't be eating or drinking anything when you click on the link.
    > The page shows some ways of manipulating division tags.
    > It ain't perfect, but it gets the point across.
    >

    Hi Richard,
    I have the divisions on the page www.scaiecat-spa-gigi.com/sv/test2.html
    but the buttons on th menu on the left side do not seem to work as areas,
    that means I can only click on the text of the link to open a new page, the
    first time.
    After clicking the first button however, I can click the others even using
    the areas!!


    - -
    Luigi ( un italiano che vive in Svezia)



    http://www.scaiecat-spa-gigi.com/sv/svezia.html
    http://www.scaiecat-spa-gigi.com/sv/lagenheterhusrumitalien.html
    Luigi Donatello Asero, Oct 3, 2003
    #7
    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. Isofarro
    Replies:
    0
    Views:
    789
    Isofarro
    Jul 1, 2003
  2. Nicolai P. Zwar
    Replies:
    0
    Views:
    774
    Nicolai P. Zwar
    Jul 1, 2003
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    718
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    173
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    294
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page