Lists

Discussion in 'HTML' started by Luigi Donatello Asero, Feb 16, 2004.

  1. Luigi Donatello Asero, Feb 16, 2004
    #1
    1. Advertising

  2. Luigi Donatello Asero

    Paul Furman Guest

    Luigi Donatello Asero wrote:
    > The following page has a table which contains the name of the provinces in
    > the region
    > http://www.scaiecat-spa-gigi.com/sv/toscana.html
    > I think I should have used a list though.
    > Can I write a list which looks like a table with different rows?


    The setup for a horizontal list is bizzare. I just got it working so I
    may misunderstand but aparently you need to set up the css for a list of
    that style and a wrapper for it to sit in:

    ul.menu {
    display: inline;
    list-style-type: none;
    margin: 0;
    }
    #navigation li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    <div id="navigation">
    <ul class="menu">
    <li><a href="index.php?">home</a></li>
    <li> index.php?SCREEN=ecards.php">ecards</a></li>
    </ul>
    </div>

    maybe it could have been:
    <div>
    <ul class="menu" id="navigation">
    but that's how I saw a sample done


    Simplified to only two items, as shown on the bottom of:
    http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
    home ecards class-links html-links about contact
    This will wrap if it's squeezed in a narrow window & that would probably
    make a mess of your table if you have headers.
    Paul Furman, Feb 16, 2004
    #2
    1. Advertising

  3. Toby A Inkster, Feb 16, 2004
    #3
  4. "Toby A Inkster" <> skrev i meddelandet
    news:p...
    > Paul Furman wrote:
    >
    > > <div id="navigation">
    > > <ul class="menu">
    > > <li><a href="index.php?">home</a></li>
    > > <li> index.php?SCREEN=ecards.php">ecards</a></li>
    > > </ul>
    > > </div>
    > >
    > > maybe it could have been:
    > > <div>
    > > <ul class="menu" id="navigation">
    > > but that's how I saw a sample done


    This system works on the page
    http://www.scaiecat-spa-gigi.com/sv/toscana.html


    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/sv/presentartiklar.html
    Luigi Donatello Asero, Feb 16, 2004
    #4
  5. "Paul Furman" <> skrev i meddelandet
    news:...
    > Luigi Donatello Asero wrote:
    > > The following page has a table which contains the name of the provinces

    in
    > > the region
    > > http://www.scaiecat-spa-gigi.com/sv/toscana.html
    > > I think I should have used a list though.
    > > Can I write a list which looks like a table with different rows?

    >
    > The setup for a horizontal list is bizzare. I just got it working so I
    > may misunderstand but aparently you need to set up the css for a list of
    > that style and a wrapper for it to sit in:
    >
    > ul.menu {
    > display: inline;
    > list-style-type: none;
    > margin: 0;
    > }
    > #navigation li {
    > display: inline;
    > list-style-type: none;
    > margin: 0;
    > padding: 0;
    > }
    >
    > <div id="navigation">
    > <ul class="menu">
    > <li><a href="index.php?">home</a></li>
    > <li> index.php?SCREEN=ecards.php">ecards</a></li>
    > </ul>
    > </div>
    >
    > maybe it could have been:
    > <div>
    > <ul class="menu" id="navigation">
    > but that's how I saw a sample done
    >
    >
    > Simplified to only two items, as shown on the bottom of:
    > http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=web-ref.php
    > home ecards class-links html-links about contact
    > This will wrap if it's squeezed in a narrow window & that would probably
    > make a mess of your table if you have headers.
    >


    How would you center the list under the header
    "Provinser i Toscana" on the page
    http://www.scaiecat-spa-gigi.com/sv/toscana.html


    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/sv/presentartiklar.html
    Luigi Donatello Asero, Feb 16, 2004
    #5
  6. Luigi Donatello Asero

    Paul Furman Guest

    Luigi Donatello Asero wrote:
    >
    > How would you center the list under the header
    > "Provinser i Toscana" on the page
    > http://www.scaiecat-spa-gigi.com/sv/toscana.html


    Well, I used <center> but I think the following CSS is supposed to work
    (or something along these lines):


    margin-left: auto;
    margin-right: auto;

    Maybe applied to the div that contains them?
    Paul Furman, Feb 16, 2004
    #6
  7. "Paul Furman" <> skrev i meddelandet
    news:...
    > Luigi Donatello Asero wrote:
    > >
    > > How would you center the list under the header
    > > "Provinser i Toscana" on the page
    > > http://www.scaiecat-spa-gigi.com/sv/toscana.html

    >
    > Well, I used <center> but I think the following CSS is supposed to work
    > (or something along these lines):
    >
    >
    > margin-left: auto;
    > margin-right: auto;
    >
    > Maybe applied to the div that contains them?
    >


    I used this style (38.css) at
    http://www.scaiecat-spa-gigi.com/sv/test.html
    but the list is still on the left
    p{
    margin-bottom: 2%;
    margin-top: 2%;
    text-indent:5%;
    text-align: left;
    margin-left:10%;
    margin-right:10%;
    }


    TABLE { border-collapse: separate;
    border: 1px solid red;
    }

    ..one {color:#000000; border: 1px solid white;
    background: #ffffff;}
    ..two {color:#000000; border: 1px solid white;
    background: #33ffcc;}
    ..three {color:#000000; border: 1px solid white;
    background: #99ff66;}
    ..four {
    color:#ffffff; border: 1px solid white;
    background: #cc6600;}
    ..five {color:#ffffff;
    border: 1px solid white;
    background: #ff0099;}






    th, li, h1, h2, h3, a {
    color: black;
    background: transparent;
    text-align:center;
    }
    body {
    background: #ffffcc;
    color: black;
    font-size: 100%;
    margin: 0;}
    #head{border:0px solid white;}

    #content{
    margin-left:auto;
    border:1px solid green;}
    DIV.normal{margin-top: 5%;


    }
    div#menu{color:#000000;
    background:#ffffcc;
    width:25ex;



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



    float:left;}
    #menu a {
    margin-left:auto;
    margin-right: auto;
    color: #0000ff;
    background:#ffcc66;

    border-left: 1px solid #F66460;
    border-top: 1px solid #F66460;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 80%;


    margin-top: 5px;

    display: block;}
    #menu a:active {color: #0000ff; background-color:#ffffff; }
    #menu a:visited {color: #000000; background-color:#ffffff;}
    #menu a:hover {
    color: #666666;
    background-color:#ffffff;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #F66460;
    border-bottom: 1px solid #F66460;}
    div.top {margin-top: 2%;
    margin-left: auto;
    margin-right:auto;
    text-align:center;
    }
    div.bottom {margin-bottom: 2%;
    margin-left: auto;
    margin-right:auto;}
    div.navigation
    {
    margin-left: auto;
    margin-right:auto;
    }
    ul {
    list-style: none;
    margin-left: auto;


    }
    ..menu {
    display: inline;
    list-style-type: none;
    margin-left: auto;
    margin-right:auto;
    }
    #navigation li {
    display: inline;
    list-style-type: none;

    }


    </style>

    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/sv/rom1.html
    Luigi Donatello Asero, Feb 17, 2004
    #7
  8. Luigi Donatello Asero

    Paul Furman Guest

    Luigi Donatello Asero wrote:
    >
    > I used this style (38.css) at
    > http://www.scaiecat-spa-gigi.com/sv/test.html
    > but the list is still on the left


    > p{

    <snip>
    > text-align: left;



    That part looks suspicious. I wish I could help more. Try a small sample
    file to experiment without all the clutter, sometimes that helps figure
    it out.
    Paul Furman, Feb 17, 2004
    #8
  9. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:
    > "Paul Furman" <> skrev i meddelandet
    > news:...
    >
    >>Luigi Donatello Asero wrote:
    >>
    >>>How would you center the list under the header
    >>>"Provinser i Toscana" on the page
    >>>http://www.scaiecat-spa-gigi.com/sv/toscana.html

    >>
    >>Well, I used <center> but I think the following CSS is supposed to work
    >>(or something along these lines):
    >>
    >>
    >> margin-left: auto;
    >> margin-right: auto;
    >>
    >>Maybe applied to the div that contains them?
    >>

    >
    >
    > I used this style (38.css) at
    > http://www.scaiecat-spa-gigi.com/sv/test.html
    > but the list is still on the left


    [snip stylesheet]

    If you want to center something by using left and right
    margins, you should also define a width.
    Either define width and set the margins to auto, or define
    the margins and set the width to auto.


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 17, 2004
    #9
  10. "Els" <> skrev i meddelandet
    news:4031bae8$0$41754$...
    >
    >
    > Luigi Donatello Asero wrote:
    > > "Paul Furman" <> skrev i meddelandet
    > > news:...
    > >
    > > I used this style (38.css) at
    > > http://www.scaiecat-spa-gigi.com/sv/test.html
    > > but the list is still on the left

    >
    > [snip stylesheet]
    >
    > If you want to center something by using left and right
    > margins, you should also define a width.
    > Either define width and set the margins to auto, or define
    > the margins and set the width to auto.
    >
    >
    > --
    > Els


    I think you are right about the need of defininge a the margins and set
    the width to auto or viceversa but the code which I wrote below and I used
    as 38.css ( trying to get a better effect) is unfortunately not for a list
    which does not have css bullets and is written horizontally. What is wrong
    with it?

    p{
    margin-bottom: 2%;
    margin-top: 2%;
    text-indent:5%;
    text-align: left;
    margin-left:10%;
    margin-right:10%;
    }


    TABLE { border-collapse: separate;
    border: 1px solid red;
    }

    ..one {color:#000000; border: 1px solid white;
    background: #ffffff;}
    ..two {color:#000000; border: 1px solid white;
    background: #33ffcc;}
    ..three {color:#000000; border: 1px solid white;
    background: #99ff66;}
    ..four {
    color:#ffffff; border: 1px solid white;
    background: #cc6600;}
    ..five {color:#ffffff;
    border: 1px solid white;
    background: #ff0099;}






    th, li, h1, h2, h3, a {
    color: black;
    background: transparent;
    text-align:center;
    }
    body {
    background: #ffffcc;
    color: black;
    font-size: 100%;
    margin: 0;}
    #head{border:0px solid white;}

    #content{
    margin-left:auto;
    border:1px solid green;}
    DIV.normal{margin-top: 5%;


    }
    div#menu{color:#000000;
    background:#ffffcc;
    width:25ex;



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



    float:left;}
    #menu a {
    margin-left:auto;
    margin-right: auto;
    color: #0000ff;
    background:#ffcc66;

    border-left: 1px solid #F66460;
    border-top: 1px solid #F66460;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 80%;


    margin-top: 5px;

    display: block;}
    #menu a:active {color: #0000ff; background-color:#ffffff; }
    #menu a:visited {color: #000000; background-color:#ffffff;}
    #menu a:hover {
    color: #666666;
    background-color:#ffffff;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #F66460;
    border-bottom: 1px solid #F66460;}
    div.top {margin-top: 2%;
    margin-left: auto;
    margin-right:auto;
    text-align:center;
    }
    div.bottom {margin-bottom: 2%;
    margin-left: auto;
    margin-right:auto;
    }
    div.ulmenu {
    display: inline;
    list-style-type: none;

    margin:auto;
    padding: 0;

    text-align:center;
    width:50%

    }
    #navigation li {
    display: inline;
    list-style-type: none;
    }
    ul {
    list-style:none;
    margin:auto;


    }





    </style>

    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/it/svezia.html
    Luigi Donatello Asero, Feb 17, 2004
    #10
  11. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    > "Els" <> skrev i meddelandet
    > news:4031bae8$0$41754$...
    >
    >>Luigi Donatello Asero wrote:
    >>
    >>>"Paul Furman" <> skrev i meddelandet
    >>>news:...
    >>>
    >>>I used this style (38.css) at
    >>>http://www.scaiecat-spa-gigi.com/sv/test.html
    >>>but the list is still on the left

    >>
    >>[snip stylesheet]
    >>
    >>If you want to center something by using left and right
    >>margins, you should also define a width.
    >>Either define width and set the margins to auto, or define
    >>the margins and set the width to auto.

    >
    > I think you are right about the need of defininge a the margins and set
    > the width to auto or viceversa but the code which I wrote below and I used
    > as 38.css ( trying to get a better effect) is unfortunately not for a list
    > which does not have css bullets and is written horizontally. What is wrong
    > with it?


    I think this:

    > div.ulmenu {
    > display: inline;
    > list-style-type: none;
    >
    > margin:auto;
    > padding: 0;
    >
    > text-align:center;
    > width:50%
    >
    > }
    > #navigation li {
    > display: inline;
    > list-style-type: none;
    > }
    > ul {
    > list-style:none;
    > margin:auto;
    >
    >
    > }


    there is no div.ulmenu in the html file
    just an div#navigation and a ul.menu.....

    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 17, 2004
    #11
  12. "Els" <> skrev i meddelandet
    news:40322286$0$41749$...
    >
    > Luigi Donatello Asero wrote:
    >
    > > "Els" <> skrev i meddelandet
    > > news:4031bae8$0$41754$...
    > >
    > >>Luigi Donatello Asero wrote:
    > >>
    > >>>"Paul Furman" <> skrev i meddelandet
    > >>>news:...
    > >>>
    > >>>I used this style (38.css) at
    > >>>http://www.scaiecat-spa-gigi.com/sv/test.html
    > >>>but the list is still on the left
    > >>
    > >>[snip stylesheet]
    > >>
    > >>If you want to center something by using left and right
    > >>margins, you should also define a width.
    > >>Either define width and set the margins to auto, or define
    > >>the margins and set the width to auto.

    > >
    > > I think you are right about the need of defininge a the margins and

    set
    > > the width to auto or viceversa but the code which I wrote below and I

    used
    > > as 38.css ( trying to get a better effect) is unfortunately not for a

    list
    > > which does not have css bullets and is written horizontally. What is

    wrong
    > > with it?

    >
    > I think this:
    >
    > > div.ulmenu {
    > > display: inline;
    > > list-style-type: none;
    > >
    > > margin:auto;
    > > padding: 0;
    > >
    > > text-align:center;
    > > width:50%
    > >
    > > }
    > > #navigation li {
    > > display: inline;
    > > list-style-type: none;
    > > }
    > > ul {
    > > list-style:none;
    > > margin:auto;
    > >
    > >
    > > }

    >
    > there is no div.ulmenu in the html file
    > just an div#navigation and a ul.menu.....
    >
    > --
    > Els


    I think I make some basic mistake when I try to define classes and id:s.
    I tried to change the html code and use a div class which is called
    "stadsdelar" and used a new css style (39.css) but it does not validate
    http://jigsaw.w3.org/css-validator/validator?uri=http://www.scaiecat-spa-gigi.com/sv/test.html
    and I wonder which one line 0 is!

    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/it/svezia.html
    Luigi Donatello Asero, Feb 17, 2004
    #12
  13. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:

    >
    > I think I make some basic mistake when I try to define classes and id:s.
    > I tried to change the html code and use a div class which is called
    > "stadsdelar" and used a new css style (39.css) but it does not validate
    > http://jigsaw.w3.org/css-validator/validator?uri=http://www.scaiecat-spa-gigi.com/sv/test.html
    > and I wonder which one line 0 is!


    is the previous problem solved yet?
    This stylesheet 39.css doesn't validate, because of the }
    between the styles for div.stadsdelar and ul, at the bottom
    of the stylesheet.



    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 17, 2004
    #13
  14. "Els" <> skrev i meddelandet
    news:403232dc$0$41763$...
    >
    > Luigi Donatello Asero wrote:
    >
    > >
    > > I think I make some basic mistake when I try to define classes and id:s.
    > > I tried to change the html code and use a div class which is called
    > > "stadsdelar" and used a new css style (39.css) but it does not validate
    > >

    http://jigsaw.w3.org/css-validator/validator?uri=http://www.scaiecat-spa-gigi.com/sv/test.html
    > > and I wonder which one line 0 is!

    >
    > is the previous problem solved yet?
    > This stylesheet 39.css doesn't validate, because of the }
    > between the styles for div.stadsdelar and ul, at the bottom
    > of the stylesheet.


    I had seen and corrected it but thanks anyway. What about the fact that
    the list is still vertically aligned, though?
    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/it/svezia.html
    Luigi Donatello Asero, Feb 17, 2004
    #14
  15. Luigi Donatello Asero

    Els Guest

    Luigi Donatello Asero wrote:
    >
    > I had seen and corrected it but thanks anyway. What about the fact that
    > the list is still vertically aligned, though?


    Change the last parts of your stylesheet to:

    div.stadsdelar {
    margin:auto;
    padding:0;
    text-align:center;
    width:50%;
    }

    ul {
    margin:auto;
    list-style-type:none;
    }

    li {
    display:inline;
    }

    Not the div.stadsdelar has to be displayed inline, but the
    <li>'s.
    Same goes for list-style-type, this apllies to the ul, not
    to the div. You set it on both, but a div doesn't have a
    list-style-type as far as I know.


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 17, 2004
    #15
  16. "Els" <> skrev i meddelandet
    news:40323cd5$0$41764$...
    >
    >
    > Luigi Donatello Asero wrote:
    > >
    > > I had seen and corrected it but thanks anyway. What about the fact

    that
    > > the list is still vertically aligned, though?

    >
    > Change the last parts of your stylesheet to:
    >
    > div.stadsdelar {
    > margin:auto;
    > padding:0;
    > text-align:center;
    > width:50%;
    > }
    >
    > ul {
    > margin:auto;
    > list-style-type:none;
    > }
    >
    > li {
    > display:inline;
    > }
    >
    > Not the div.stadsdelar has to be displayed inline, but the
    > <li>'s.
    > Same goes for list-style-type, this apllies to the ul, not
    > to the div. You set it on both, but a div doesn't have a
    > list-style-type as far as I know.


    Thank you.
    Now it works
    http://www.scaiecat-spa-gigi.com/sv/rom1.html

    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/it/svezia.html
    Luigi Donatello Asero, Feb 17, 2004
    #16
    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. JustSomeGuy

    Sorting lists of lists...

    JustSomeGuy, Jun 17, 2004, in forum: C++
    Replies:
    0
    Views:
    307
    JustSomeGuy
    Jun 17, 2004
  2. Jon Slaughter

    lists of lists

    Jon Slaughter, Dec 13, 2004, in forum: C++
    Replies:
    4
    Views:
    406
    Buster
    Dec 13, 2004
  3. Charlotte Henkle

    Counter for items in lists in lists?

    Charlotte Henkle, Sep 25, 2004, in forum: Python
    Replies:
    8
    Views:
    392
    Charlotte Henkle
    Sep 26, 2004
  4. robin
    Replies:
    10
    Views:
    532
    Dave Hansen
    Apr 12, 2006
  5. =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==

    List of lists of lists of lists...

    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==, May 8, 2006, in forum: Python
    Replies:
    5
    Views:
    388
    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==
    May 15, 2006
Loading...

Share This Page