[css] probleem met interlinie bij <li> - Softwareontwikkeling

zaterdag 22 maart 2003 11:52

Acties:

Topicstarter

Ik ben bezig met een template te maken in HTML (dus een file die herbruikbaar is).

http://members.brabant.chello.nl/~j.saanen/vb/voorbeeld.html

Nu zit ik steeds te klooien met listitems en unordered lists. Ik vind ze erg lastig.
Als je het voorbeeld bekijkt zie je dat wanneer de textsize van de browser verandert, de interlinie (regelafstand) tussen de regels ook verandert.

Weet iemand hoe ik dit tegen kan gaan ?

De css die ik gebruikt hebt is leden.css

code:

ul {
    margin-top: 0px;
    list-style: square outside;
}

li {
    color: #FF9933;
    list-style: none;
}

edited:
topic titel svp even veranderen in <li> ipv. <il> ;)

.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;

}

.text ik de tekststijl die de list heeft.

[ Voor 5% gewijzigd door Stalkert op 22-03-2003 11:53 ]

zaterdag 22 maart 2003 11:56

Acties:

Verwijderd

Wat gebeurt er als je de line-height een vaste waarde geeft?

zaterdag 22 maart 2003 11:56

Acties:

Verwijderd

HTML:

1
2
3

<link href="file://///Stalkert/webserver1/ovh/css/leden.css" rel="stylesheet" type="text/css">
<link href="file://///Stalkert/webserver1/ovh/css/leden.css" rel="stylesheet" type="text/css">
<link href="leden.css" rel="stylesheet" type="text/css">

Volgens mij gaat er iets niet helemaal goed in de bovenstaande code.

Waarom declareer je die tekst eigenschappen in een aparte class?

zaterdag 22 maart 2003 12:01

Acties:

Stalkert

Topicstarter

Verwijderd schreef op 22 maart 2003 @ 11:56:
Volgens mij gaat er iets niet helemaal goed in de bovenstaande code.

Waarom declareer je die tekst eigenschappen in een aparte class?

oeps. idd. Waarschijnlijk iets wat fout is gegaan bij voorbeeld modifien voor te uploaden.

Waar kan ik die texteigenschappen het beste declareren ? Kan ik gewoon de td tag 'overrule' ?

edited:
Heb ik nu dus gedaan. Ik heb alle eigeschappen die ik in de .text class had staan in de td class gezet in mij css. Maar maakt hij de tekst bij de listitems oranje terwijl dat alleen het bolletje oranje moet zijn.

http://members.brabant.ch...saanen/vb2/voorbeeld.html

[ Voor 78% gewijzigd door Stalkert op 22-03-2003 12:14 ]

zaterdag 22 maart 2003 12:26

Acties:

Verwijderd

neem dit stukje html nou eens:

HTML:

<td width="317" height="639" valign="top"><p><span class="textbold">Kernactiviteiten:</span><span class="text"><br>
          Biedt professionele personeelsmanagement- ondersteuning.<br>
          Niet elke organisatie beschikt over een personeelsmanager in vaste dienst. 
          Toch kan professionele ondersteuning op korte of langere termijn wenselijk 
          zijn.<br>
          Wij bieden de mogelijkheid om die deskundige personeelsmanager aan uw 
          team toe te voegen. Is er een personeelsmanager in dienst, dan kunnen 
          wij ondersteuning bieden met extra kennis en ervaring.<br>
          DPM is vanaf 1996 succesvol actief op het gebied van personeelsmanagement, 
          zoals:</span>

Dit kan beter en netter, in HTML heb je de beschikking over een aantal elementen die al een betekenis hebben, zoals <h1>, <p> en <div> om er maar en paar te noemen.

Ik zou dus ook dat stukje wat ik bovenaan als voorbeeld aanhaal iets anders opbouwen;

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>niet volledige doctype</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
}
h1 {
    font-weight:bold;
}
li {
    /* evt. ander font of kleur, CSS is all about overerving baby !*/
}
</style>
</head>
<body>
<table>
  <tr>
    <td valign="top"><h1>Kernactiviteiten:</h1>
      <p>Biedt professionele personeelsmanagement- ondersteuning.<br>
        Niet elke organisatie beschikt over een personeelsmanager in vaste dienst.
          Toch kan professionele ondersteuning op korte of langere termijn wenselijk
          zijn.</p>
      <p>Wij bieden de mogelijkheid om die deskundige personeelsmanager aan uw
        team toe te voegen. Is er een personeelsmanager in dienst, dan kunnen
        wij ondersteuning bieden met extra kennis en ervaring.<br>
        DPM is vanaf 1996 succesvol actief op het gebied van personeelsmanagement,
        zoals:</p>
      <ul>
        <li> Organisatieontwikkeling</li>
        <li>Interne communicatie</li>
        <li>Werving en selectie</li>
        <li>Beoordelings- en functioneringsgesprekken</li>
        <li>Functiebeschrijving en -waardering</li>
        <li> Arbozorg en verzuimpreventie </li>
        <li>Opleiding, vorming en training</li>
        <li>Personeelsplanning </li>
        <li>Medezeggenschap</li>
        <li>Personeelsadministratie</li>
        <li>Arbeidsvoorwaarden</li>
        <li>Ontslagzaken en -begeleiding</li>
        <li>Mobiliteit en loopbaanontwikkeling. </li>
      </ul>
    </td>
  </tr>
</table>
</body>
</html>

Wat Cheatah hierboven opmerkte is het antwoord op je probleem, gewoon een vaste lijnhoogte meegeven in je CSS (bij <li> dus)

zaterdag 22 maart 2003 13:01

Acties:

Stalkert

Topicstarter

Bedankt shadow

Begint nu allemaal een helderder te worden. Wat ik me alleen nog afvraag is hoe ik de list-style oranje kan krijgen en de tekst zwart laten. moet ik dit misschien doen met een bullet image of kan dit beter ?

zaterdag 22 maart 2003 13:35

Acties:

Verwijderd

Je zou dit kunnen doen:
li{color:orange;}
span{color:black;}
<li><span>tekst</span></li>
Maar ja, dat is je html weer vervuilen met tags.
Dan maar een list-style-image gebruiken.
In de volgend css versie zal dat probleem waarschijnlijk wel worden opgelost (het kunnen stylen van list-style types)

zaterdag 22 maart 2003 16:30

Acties:

Verwijderd

Ik zou idd voor een bullet image gaan

kun je ook keurig defineren in je class. En nu naar buiten de terrasjes roepen

zaterdag 22 maart 2003 22:04

Acties:

Verwijderd

list-style-image geeft zulke enorme verschillende resultaten bij verschillende browsers dat het zo goed als onbruikbaar is. Je hebt totaal geen controle over de plaatsing van de bullet.

De enige oplossing is een background-image aan de li toe te kennen. Dat geeft een stuk meer controle.