[XHTML / CSS] Hoe uit te lijnen m.b.v. het ul en li commando

Pagina: 1
Acties:
  • 118 views

Acties:
  • 0 Henk 'm!

  • Rob Loos
  • Registratie: November 2009
  • Laatst online: 28-05 13:16
Als amateur heb ik voor ons bedrijf een website opgezet. Hier maken we op diverse plaatsen gebruik van het ul en li commando, bijvoorbeeld in de linkerkolom of bij opsommingen ( zie www.eltromat.com/producten.html )
Hoe kan het ul en li commando zodanig ingesteld worden dat een zin die niet op 1 regel past netjes uitgelijnd wordt?

[ Voor 9% gewijzigd door Rob Loos op 27-05-2010 08:52 ]

Elitedesk 620 & Elitebook 820 G2


Acties:
  • 0 Henk 'm!

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
ul en li commando? De ul en li elementen (of tags) bedoel je ;)
Verder zie ik niet wat je hebt geprobeerd, gezocht, gevonden etc. Je verwijst naar een complete site met alle toeters en bellen er op en aan maar we zien hier veel liever een test-case waar in je alleen de hoognodige markup (code zo je wil) gebruikt om je probleem te demonstreren. Had je die moeite genomen dan had je gezien dat een unordered list standaard precies het gedrag vertoont dat je graag had gewild:
HTML:
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <ul>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque nibh nec mauris ornare condimentum. Morbi ornare scelerisque placerat. Nullam molestie faucibus pretium. Nam pretium, lacus et dapibus ornare, tortor libero malesuada quam, vel sagittis urna magna a elit. Pellentesque pharetra lorem vitae metus scelerisque quis semper elit luctus. Vestibulum sed ultrices orci. Pellentesque id metus et est sodales porta sit amet suscipit odio. Nunc luctus massa vitae nisl commodo in tincidunt ligula interdum. Integer placerat elit et nisi sollicitudin sit amet viverra est molestie. Integer risus enim, eleifend eu vestibulum et, cursus eu est. Mauris iaculis sem vel ante pretium porttitor eu et ante. Sed aliquam sem eu justo vestibulum at commodo nulla rutrum. Quisque libero metus, convallis eu adipiscing a, tempus eget mi. Donec gravida volutpat ipsum, ut pellentesque sapien ullamcorper eget. Cras ullamcorper vulputate sapien, a elementum nunc euismod nec. Vivamus elementum massa vitae augue cursus pulvinar. Praesent tincidunt faucibus orci at placerat.</li>
        </ul>
    </body>
</html>

Geeft:
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque nibh nec mauris ornare condimentum. Morbi ornare scelerisque placerat. Nullam...
Dat is een kleine moeite om te nemen en je hebt meteen een duidelijke test-case om te experimenteren waar het verschil dan in zit met jouw code; that is: ga vervolgens alle CSS etc. toevoegen welke je site gebruikt en niet in de test-case zit; stapje voor stapje, net zo lang tot je met de test-case het probleem gereduceerd hebt. Je probleem zit dan in de laatste stap. Simpel. Je kunt niet verwachten van ons dat wij tussen de hele lading (voor het probleem irrelevante) HTML en CSS gaan zitten spitten om ergens je probleem te spotten en het dan voor je aanwijzen; dat zoeken mag je zelf doen, we wijzen je hooguit in de juiste richting.

Omdat je topic niet echt voldoet aan wat we verwachten van een topicstart hier gaat dit topic dan ook op slot; ik adviseer je even onze Quickstart door te nemen mocht je een nieuw topic willen openen (by all means, do so!) maar zorg dan dus wel dat je alle punten van de Quickstart in acht neemt ;)

Dan nog een hint: het heeft te maken met het list-style-type en je margin/padding reset op *

[ Voor 7% gewijzigd door RobIII op 27-05-2010 10:24 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Dit topic is gesloten.