Stylesheet

Status
Niet open voor verdere reacties.
S

Syphera

Gebruiker
Lid geworden
19 jan 2004
Berichten
189
Ik wil in een stylesheet iets definieren voor een opsomming (ul)

Ik wil graag de afstand tussen de bullet (opsommingsteken) en de tekst bepalen.

Weet iemand wat ik hiervoor moet gebruiken?
 
Hello,


Het gaat hierbij eigenlijk niet om de ul-tag, maar de li-tag. Deze zit erin, en defineert de items zelf.

Code: 
/* code */

li
{
   margin: 5px 0 5px 0;
   /* formaat: top - right - bottom - left */
}

dit geeft elk item 5 pixels erboven extra, en 5 pixels eronder extra. Tussen elk item zal dus 10px zitten.



:thumb:
 
Beste "Syphera",

Ik heb uw vraag verplaatst van "HTML" naar "CSS"

Met vriendelijke groet,
Stefan (Tha Devil)
Moderator Helpmij.nl
 
Ik heb nu dit, maar als ik het venster kleiner maak dan komt de 2e regel tekst niet recht onder de eerste regel (hoop dat je deze cryptische tekst begrijpt)

ul {
margin-top: 0px;
padding-left: 15px;
}


ul li span.label {
margin-left: 5px;
}



ol {
padding-left: 20px;
font-weight: bold;
margin-top: 0px;
line-height: 1.5;
}


ol li span.label {
font-weight:normal;
}
 
Heb je toevallig een voorbeeld online, en anders, de (complete) HTML + CSS?

maar als ik het venster kleiner maak dan komt de 2e regel tekst niet recht onder de eerste regel
Klik om te vergroten...

Het klinkt een beetje als een float probleem, maar met zekerheid kan ik dat niet zeggen.
 
Voorbeeld kan ik niet geven, vanwege bedrijfsgevoelige gegevens.

Even voor de duidelijkheid:
- blablablablablablablablablablablablablablablablablabla
- hahahahahahahahahahahahahahahahahahahaha

De ruimte (nu een spatie) tussen het streepje en de tekst moet gedefinieert worden.
Ik denk dat ik ook geholpen ben als ik kan defineren dat de tekst op een vaste afstand vanaf de kantlijn begint.

Nu heb ik dus dit als ik het venster verklein:
- blablablablablablablablablabla
blablablablablablablabla (deze regel zit dus niet recht onder de bovenste regel)
- hahahahahahahahahahahaha
hahahahahahahaha (deze regel zit dus niet recht onder de bovenste regel)


Hoop dat je nu begrijpt wat ik bedoel
 
Laatst bewerkt:
Oh, dat bedoel je.

Probeer het met padding-left: 10px; op elk li-element.
 
Kun je iets preciezer zijn dan "werkte niet" padding-left aanpassen zou namelijk gewoon moeten werken.
 
Als ik pading-left wijzig, dan is de uitlijning in bullets (ul) en nummers (ol) niet meer gelijk

Dan komt het er overdreven zo uit te zien:

  • hahaha
  • momoo

  1. hahaha
  2. momoo

De bullets staan dan niet boven de getallen (als je begrijpt wat ik bedoel)
 
ah, als je het schrijfje recht onder/boven het cijfer wilt hebben in plaats van de . moet je met de linkermarge gaan spelen. In de CSS krijg je dan iets als dit.
Code: 
ul li{
padding-left:10px;
}
ol li{
margin-left:3px;
padding-left:7px;
}
De precieze getallen moet je even mee experimenteren, het hangt ook af van welk lettertype/grootte je gebruikt.
 
Laatst bewerkt:
Ik heb een printscreen gemaakt, maar de tekst onleesbaar gemaakt.

Kijk eerst bij de bullets (ul) en dan bij de regels die beginnen met 'zi' en 'be' (de zogenaamde 2e regel)

Deze zijn anders uitgelijnd dan de regels bij de nummers, zoals de regels die beginnen met 'me' 'aa'

Bij de bullets staan ze iets meer links uitgelijnd dan bij de nummers.

Dit moet dus gelijk worden
 

Bijlagen

  • uitlijning.jpg
    uitlijning.jpg
    49,7 KB · Weergaven: 55
Ik krijg dat hier niet gereproduceerd, je zult toch code moeten laten zien.
 
Het CSS zal geen bedrijfsgevoelige informatie bevatten ;)
Voor de HTML zou je gewoon Lorem ipsum kunnen gebruiken :)

Op die manier kunnen we je beter helpen.
 
Hum-ti-dum-hmmmm...
Ik heb een zoveel mogelijk genormaliseerde pagina met <ul>'s en <ol>'s gemaakt (d.w.z. o.a. in de ul's en ol's ook de margins en paddings die 0 zijn, expliciet op 0 vastgeprikt), en die afgeregeld voor Firefox.
Dat is deze:
Vervolgens ook bekeken in Chrome, Opera, IE7 en Safari.
Brrr!
Ze doen het allemaal iets anders! :shocked:
Screenshots van de 5 browsers over elkaar heen geplakt:

ul-ol.gif

Bevindingen
  • De <ol>'s met de cijfers doen het bij Firefox, Chrome, Opera en Safari nagenoeg hetzelfde (soms 1px L/R verschil). IE plaatst de cijfers veel meer naar de linkerkant (en de bullets in verhouding te veel naar rechts).
  • De <ul>'s met de bollekes vliegen alle kanten op. Niet alleen L/R-verschillen, maar ook verticaal zijn er verschillen! :eek:
  • Inzoomen alleen op tekst gaat niet goed bij Safari en IE7.

Conclusies
  • De <ol>'s zijn met CC's (conditional comments) voor IE bij te stellen.
  • Bij de <ul>'s kan het beste een {list-style: none;} gebruikt worden, waarmee de bullets verdwijnen, om vervolgens aan de <li>'s een home-made bullet-image als achtergrond-figuur vast te maken (die precies op de juiste afstand kan komen via de background-position).
  • Het moet dus (voor de op de pagina gebruikte standaard-lettergrootte) met wat kunst- en vliegwerk wel kunnen! :)
Met vriendelijke groet,
CSShunter
_________
PS:
  • Wil je het 100% loepzuiver, ook bij zoomen, dan kan je de <ul>'s handhaven, maar zou je als workaround de <ol>'s moeten vervangen door een <ul class="cijfers"> met <li>'s zonder bullets, waarin een <span>'netje staat waar de getallen handmatig in gezet moeten worden. Op die manier blijft het list-karakter gehandhaafd. Maar handig is anders!
 
Bedankt voor je bevindingen csshunter.

Tis voor mij nu dus duidelijk dat het nagenoeg onmogelijk is om zowel bullets als cijfertjes gelijkwaardig uit te lijnen.

Ik laat dat kleine verschilletje dat ik nu heb dus maar zitten.

BVedankt allemaal voor het meedenken
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan