CSS / HTML Menu List item opmaak.,.... kan dit?

zaterdag 10 april 2010 20:12

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goedenavond,

Ik wil graag het volgende bereiken.
Een submenu dat er als volgt uitziet:
Afbeeldingslocatie: http://img693.imageshack.us/img693/8241/voorbeeldg.jpg

Afbeeldingslocatie: http://img693.imageshack.us/img693/8241/voorbeeldg.jpg

Nu wil ik dat met de volgende code maken.

HTML:

<ul>
    <li>submenu item</li>
    <li>submenu item 1</li>
    <li>submenu item 2</li>
    <li>submenu item 3</li>
    <li>submenu item 4</li>
    <li>submenu item 5</li>
    <li>submenu item 6</li>
    <li>submenu item 7</li>
    <li>submenu item 8</li>
</ul>

Maar mijn vraag is..... Kan dat ook?
Of moet ik daar een andere oplossing voor vinden?

Want wat ik graag wil is dat zodra er een item bij komt hij automatisch een stuk opschuift.
Ik dacht dit misschien te doen doormiddel van een DIV eromheen of een tabel. Maar weet niet zeker of dit ook kan werken.
Heb wel een aantal pogingen gedaan maar geen daarvan droegen echt vrucht. Dus mijn vraag was.. Weet iemand hoe ik dit eventueel kan oplossen??

BVD

zaterdag 10 april 2010 20:20

Acties:

0 Henk 'm!

TerraGuy

The weirdo with the beard

Leg eens uit wat je al geprobeerd hebt (bijvoorbeeld met code).

Iedereen kan gelijk hebben, allemaal tegelijk. Dat heb je met quantum.

zaterdag 10 april 2010 20:28

Acties:

0 Henk 'm!

Manuel

Om je vraag te beantwoorden, het lukt wel maar dan moet je 3x een ul aanmaken voor zover ik weet. Dit kan simpel met PHP, gewoon per 3 items (li) 1 nieuwe ul aanmaken.

zaterdag 10 april 2010 20:31

Acties:

0 Henk 'm!

Leftblank

Manuel schreef op zaterdag 10 april 2010 @ 20:28:
Om je vraag te beantwoorden, het lukt wel maar dan moet je 3x een ul aanmaken voor zover ik weet. Dit kan simpel met PHP, gewoon per 3 items (li) 1 nieuwe ul aanmaken.

Nee hoor, dat kan prima met 1 ul, gewoon floaten en vaste breedte meegeven aan de li's en vaste breedte aan de ul. Ik snap daarom ook niet wat de TS heeft geprobeerd of dat dit puur een verkapte scriptrequest is...

zaterdag 10 april 2010 20:31

Acties:

0 Henk 'm!

Verwijderd

Manuel schreef op zaterdag 10 april 2010 @ 20:28:
Om je vraag te beantwoorden, het lukt wel maar dan moet je 3x een ul aanmaken voor zover ik weet. Dit kan simpel met PHP, gewoon per 3 items (li) 1 nieuwe ul aanmaken.

En dat is dus niet wat de TS vraagt. Hij vraagt of het met die HTML kan. Het antwoord is "ja", maar dan alleen in de browsers die de CSS3 multi-column module al hebben geïmplementeerd.

Leftblank schreef op zaterdag 10 april 2010 @ 20:31:
Nee hoor, dat kan prima met 1 ul, gewoon floaten en vaste breedte meegeven aan de li en ul.

Dan staan ze dus in de verkeerde volgorde.

[ Voor 18% gewijzigd door Verwijderd op 10-04-2010 20:31 ]

zaterdag 10 april 2010 20:31

Acties:

0 Henk 'm!

dimako_

Vogel

Het kan volgens mij wel als je ul vaste hoogte en breedte mee geeft en dan de li float left geven en vaste hoogte breedte.
Dan moet het lukken.

dan krijg je dus
---------------------------------------
| item 1 item 2 item 3 |
| item 4 item 5 item 6 |
| item 7 item 8 item 9 |
--------------------------------------

zaterdag 10 april 2010 20:31

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

TerraGuy schreef op zaterdag 10 april 2010 @ 20:20:
Leg eens uit wat je al geprobeerd hebt (bijvoorbeeld met code).

Voorbeeld #1

HTML:

    <style type="text/css">
   .menu {
        position: absolute;
        width: 800px;
        height: 40px;
    }
    </style>
    </head>
<body>
    <div class="menu">
        <ul>
            <li>submenu item</li>
            <li>submenu item 1</li>
            <li>submenu item 2</li>
            <li>submenu item 3</li>
            <li>submenu item 4</li>
            <li>submenu item 5</li>
            <li>submenu item 6</li>
            <li>submenu item 7</li>
            <li>submenu item 8</li>
        </ul>
    </div>

Voorbeeld #2

HTML:

    <style type="text/css">
   .menu {
        position: absolute;
        width: 800px;
        height: 40px;
    }
    .menu ul {
    }
    .menu li {
        float: right;
        margin: 0;
        padding: 0;
    }
    </style>
    
    </head>
<body>
    <div class="menu">
        <ul>
            <li>submenu item</li>
            <li>submenu item 1</li>
            <li>submenu item 2</li>
            <li>submenu item 3</li>
            <li>submenu item 4</li>
            <li>submenu item 5</li>
            <li>submenu item 6</li>
            <li>submenu item 7</li>
            <li>submenu item 8</li>
        </ul>
    </div>

Maar dat tweede voorbeeld wil het in de eerste instantie horizontaal doen en dat werkt dus niet

Voorbeeld #3

HTML:

<body>
    <table style="width: 100%; height: 50px">
        <tr>
            <td>
                <ul>
                    <li>submenu item</li>
                    <li>submenu item 1</li>
                    <li>submenu item 2</li>
                    <li>submenu item 3</li>
                    <li>submenu item 4</li>
                    <li>submenu item 5</li>
                    <li>submenu item 6</li>
                    <li>submenu item 7</li>
                    <li>submenu item 8</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

Geen van allen willen het gewenste resultaat geven. Zelfs de tabel niet.

Leftblank schreef op zaterdag 10 april 2010 @ 20:31:
[...]

Nee hoor, dat kan prima met 1 ul, gewoon floaten en vaste breedte meegeven aan de li's en vaste breedte aan de ul. Ik snap daarom ook niet wat de TS heeft geprobeerd of dat dit puur een verkapte scriptrequest is...

Nee dat is het niet.

Kijk maar naar de probeer pogingen :-D

[ Voor 8% gewijzigd door Verwijderd op 10-04-2010 20:33 ]

zaterdag 10 april 2010 20:33

Acties:

0 Henk 'm!

dimako_

Vogel

Gebruik ook noooit tabellen voor dit soort dingen:)
Just div.

zaterdag 10 april 2010 20:34

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

dimako_ schreef op zaterdag 10 april 2010 @ 20:31:
Het kan volgens mij wel als je ul vaste hoogte en breedte mee geeft en dan de li float left geven en vaste hoogte breedte.
Dan moet het lukken.

dan krijg je dus
---------------------------------------
| item 1 item 2 item 3 |
| item 4 item 5 item 6 |
| item 7 item 8 item 9 |
--------------------------------------

Dat is een hele mooie maar ik wil wel graag de volgorde behouden.
Dus:
---------------------------------------
| item 1 item 4 item 7 |
| item 2 item 5 item 8 |
| item 3 item 6 item 9 |
--------------------------------------

Verwijderd schreef op zaterdag 10 april 2010 @ 20:31:
[...]

En dat is dus niet wat de TS vraagt. Hij vraagt of het met die HTML kan. Het antwoord is "ja", maar dan alleen in de browsers die de CSS3 multi-column module al hebben geïmplementeerd.

[...]

Dan staan ze dus in de verkeerde volgorde.

Dus ik denk dat als ik het goed begrijp moet ik het voor nu maar accepteren of mijn CMS zo herscripten dat hij zelf kolommen aanmaakt?

Of gewoon wachten tot het standaard is....
(Vindt het wachten tot dingen standaard zijn toch wel erg lang duren. Afgeronde div's staan al zeker 6 jaar of langer in de wachtrij en nog steeds ondersteunen een hoop browsers het niet......)

[ Voor 36% gewijzigd door Verwijderd op 10-04-2010 20:37 ]

zaterdag 10 april 2010 20:35

Acties:

0 Henk 'm!

Leftblank

Verwijderd schreef op zaterdag 10 april 2010 @ 20:31:

Nee dat is het niet.

Kijk maar naar de probeer pogingen :-D

Als je m'n bericht goed zou lezen en naar je pogingen zou kijken zou je zien dat je mijn suggestie niet hebt uitegevoerd; je zet of een breedte op je ul of uberhaupt niet, niet op zowel je li als ul zoals nu al 2x gesuggereerd dus

Edit: ok, je blijft dan de wat onlogische volgorde missen inderdaad, dat zal wel via backend aangepast moeten worden.

Als je overigens per se de volgorde van boven naar beneden wil hebben zul je wel echt een oplossing met enige logica moeten gebruiken, floats/css werkt gewoon van links naar rechts. Je list in een tabel zetten zal overigens geen enkel effect hebben verder

[ Voor 32% gewijzigd door Leftblank op 10-04-2010 20:58 ]

zaterdag 10 april 2010 20:38

Acties:

0 Henk 'm!

dimako_

Vogel

dat kan wel maar dan moet je zoals eerder gezegd 3 x <ul> naast elkaar floaten.

code:

<div id="submenu">

<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>

</div>

zaterdag 10 april 2010 20:42

Acties:

0 Henk 'm!

Leftblank

dimako_ schreef op zaterdag 10 april 2010 @ 20:38:
dat kan wel maar dan moet je zoals eerder gezegd 3 x <ul> naast elkaar floaten.

[..]

Wat je dus in je code moet aanpassen, terwijl je dan net zo makkelijk de volgorde kunt aanpassen van de uitvoer; scheelt weer onnodige tags in je code

zaterdag 10 april 2010 20:43

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Leftblank schreef op zaterdag 10 april 2010 @ 20:35:
[...]

Als je m'n bericht goed zou lezen en naar je pogingen zou kijken zou je zien dat je mijn suggestie niet hebt uitegevoerd; je zet of een breedte op je ul of uberhaupt niet, niet op zowel je li als ul zoals nu al 2x gesuggereerd dus

Als je overigens per se de volgorde van boven naar beneden wil hebben zul je wel echt een oplossing met enige logica moeten gebruiken, floats/css werkt gewoon van links naar rechts. Je list in een tabel zetten zal overigens geen enkel effect hebben verder

Ja ik snap wat je bedoeld.

HTML:

    <style type="text/css">.menu {
        position: absolute;
        width: 800px;
        height: 40px;
    }
    .menu ul {
        width: 600px;
    }
    .menu li {
        width: 120px;
        float: right;
        margin: 0;
        padding: 0;
    }
    </style>
    
    </head>
<body>
    <div class="menu">
        <ul>
            <li>submenu item</li>
            <li>submenu item 1</li>
            <li>submenu item 2</li>
            <li>submenu item 3</li>
            <li>submenu item 4</li>
            <li>submenu item 5</li>
            <li>submenu item 6</li>
            <li>submenu item 7</li>
            <li>submenu item 8</li>
        </ul>
    </div>

Maar dan komt alles door elkaar.

dimako_ schreef op zaterdag 10 april 2010 @ 20:38:
dat kan wel maar dan moet je zoals eerder gezegd 3 x <ul> naast elkaar floaten.

HTML:

<div id="submenu">

<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<ul>

</div>

Ja dat bedoelde ik dus. dan moet ik mijn CMS herscripten opdat het drie UL's kan parsen.

[ Voor 20% gewijzigd door Verwijderd op 10-04-2010 20:44 ]

zaterdag 10 april 2010 20:49

Acties:

0 Henk 'm!

mcDavid

Watvoor CMS gebruik je?

Dik kans dat je dit wel met een handige template kunt oplossen.

zondag 11 april 2010 20:26

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

Of je gebruikt de float-methode en stopt ze in een andere volgorde in je template, zodat ze alsnog weer goed staan. Je gebruikt een UL en geen OL, dus de volgorde lijkt me al niet heel erg van semantisch belang.

Onderwerpen