Toon posts:

[css] ul li in kolommen

Pagina: 1
Acties:

Onderwerpen


  • Liqued
  • Registratie: februari 2001
  • Laatst online: 02-03 13:27
Loop tegen het volgende issue aan. Ik heb de volgende output (ik kan alleen de stylesheet aanpassen, dus ik moet alles oplossen met css) vanuit een CMS:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul>
    <li>
        hoofdmenu 1
        <ul>
            <li>submenu 1.1</li>
            <li>submenu 1.2</li>
            <li>submenu 1.3</li>
            <li>submenu 1.4</li>
            <li>submenu 1.5</li>
        </ul>
    </li>
    <li>
        hoofdmenu 2
        <ul>
            <li>submenu 2.1</li>
        </ul>
    </li>
    <li>
        hoofdmenu 3
    </li>
    <li>
        hoofdmenu 4
    </li>
</ul>


Nu is het doel dat hooftmenu items in kolommen komen met daaronder de sub menu items. Ik heb het hier onder proberen weer te geven.
HTML:
1
2
3
4
5
6
hoofdmenu 1     |       hoofdmenu 2     |       hoofdmenu 3     |       hoofdmenu 4
submenu 1.1     |       submenu 2.1     |                           |
submenu 1.2     |                           |                           |
submenu 1.3     |                           |                           |
submenu 1.4     |                           |                           |
submenu 1.5     |                           |                           |


Nu ben ik veel opties tegen gekomen met floats, maar niks lijkt goed te passen (krijg het alleen voor elkaar in rijen en niet in kolommen). Kunnen jullie mij helpen?

  • MueR
  • Registratie: januari 2004
  • Nu online

MueR

Moderator Devschuur®

is niet lief

Zo moeilijk is dat toch niet? Hoofdmenu horizontaal maken moet je toch lukken. Children vervolgens relatief tenopzichte van parent positioneren. Ik mis een beetje wat je zelf geprobeerd hebt. Zet eens een testcase van je probeersel online, of post hier wat relevante css.

Anyone who gets in between me and my morning coffee should be insecure.
Breng nu uw applicatie naar de kloot. Dat is veel beter! Nu samen met klootopslag. Voor maar €9,95. Doei doei!


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 04-06 12:54

OkkE

Front-end ninja :+

Dit is toch wel heel erg basic. Elke <li> een float en width geven, vervolgens de <li> van sub's niet floaten.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Pendaco
  • Registratie: augustus 2003
  • Laatst online: 15:07

Pendaco

Vogon Poetry FTW!

^^ With stupid ;)

Met de volgende CSS moet je al een heul heul heel eind komen;

Cascading Stylesheet:
1
2
3
4
5
6
7
8
ul {
    padding: 0;
}
ul li {
    width: 150px;
    float: left;
    list-style: none;
}

"All that the xHTML validation shows is that you can lowercase and close your tags."



Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee