Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

<ol> en CSS?

11 antwoorden
  • Ik ben bezig met een pagina waarop 2 geordende lijsten komen te staan. [code:1:5f124e116c]<p>Lijst 1:<ol> <li>Item</li> <li>Item</li> </ol></p> <p>Lijst 2:<ol> <li>Item</li> <li>Item</li> </ol></p>[/code:1:5f124e116c] Echter ontbreken bij de [b:5f124e116c]lijst 2[/b:5f124e116c] de nummers. Als de CSS file wordt weggehaald worden beide lijsten wel goed getoond (met nummers dus). In de CSS file wordt overigens niks opgegeven voor ol...... als ik voor ol wel iets opgeef zoals: [code:1:5f124e116c]ol { padding-left: 60px; }[/code:1:5f124e116c] dan worden de nummers wel weergegeven, maar is [b:5f124e116c]lijst 1[/b:5f124e116c] verder naar rechts ingesprongen dan [b:5f124e116c]lijst 2[/b:5f124e116c].... Als ik voor lijst 2 ol in ul verander worden daar de opsommingstekens trouwens wel goed weergegeven... Hoe is dit op te lossen :-?...
  • Je kunt geen list in een p-element zetten. Weet niet of dat helpt, maar dat is sowieso de eerste stap die je moet nemen: weghalen van de <p>'s.
  • Het buiten de <p></p> zetten van de <ol></ol> veranderd niets... zie nu trouwens ook dat t probleem zich in FF niet voordoet, alleen in IE... :-? :-?
  • dat zal wel weer te maken hebben met de verschillende "bugs" in IE, heb je al gekeken of het in opera wel goed weergegeven word ?
  • Je moet in de source code kijken. Als daar wel nummers staan is het een (css) weergave probleem, verstopt achter iets anders. Ook altijd een pagina valideren bij w3.org. Gevonden fouten zijn vaak een goede indicate van een probleem. wimb
  • [quote:5b42107730]dat zal wel weer te maken hebben met de verschillende "bugs" in IE, heb je al gekeken of het in opera wel goed weergegeven word ?[/quote:5b42107730] Heb hier helaas geen Opera om het te checken... [quote:5b42107730]Je moet in de source code kijken. Als daar wel nummers staan is het een (css) weergave probleem, verstopt achter iets anders.[/quote:5b42107730] In de bron staat het gewoon als: [code:1:5b42107730]<p>Lijst 1</p> <ol> <li>Item1</li> <li>Item2</li> </ol> <p>Lijst 2</p> <ol> <li>Item1</li> <li>Item2</li> </ol>[/code:1:5b42107730] [quote:5b42107730]Ook altijd een pagina valideren bij w3.org[/quote:5b42107730] Pagina is HTML 4.01 Strict gevalideerd. Ik houd het voorlopig maar op een bug in IE dan... :roll:
  • Opera is sindskort helemaal gratis, die kun je halen op www.opera.com . Wat gebeurt er als je er een nested list van maakt? [code:1:466b72c5a3]<ul> <li>Lijst 1 <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </li> <li>Lijst 2 <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </li> </ul>[/code:1:466b72c5a3]
  • Het ligt waarschijnlijk aan een andere regel in de CSS file. Kunnen we die ergens bekijken of kun je die hier posten? Er is een andere margin of padding waarde ge-inherit (mooi nederlands zo :wink: )
  • Als 'nested' list blijft het euvel bestaan (nummers verschijnen wel maar de padding-left blijft afwijkend). CSS-file (al zou ik niet weten waarom, geen opgave voor ol en correcte weergave in FireFox): [code:1:5f97389b83]body { margin: 5px 5px 0 5px; color: #362408; background: #FFFFCC; font-family: Tahoma, sans-serif; } img { border: 0; vertical-align: text-top; } img.foto { vertical-align: text-top; } img.serie_mr { margin-right: 5px; } img.top5 { margin-right: 5px; vertical-align: text-bottom; } a { color: #BF8226; } a:hover { text-decoration: none; } a.menu { display: block; padding-left: 25px; width: 149px; background: url('../img/a_menu_bg.gif') no-repeat left center; color: #362408; font-size: 14pt; font-weight: bold; text-decoration: none; } a.menu:hover { background: url('../img/a_menu_bg2.gif') no-repeat left center; color: #FFFFCC; } a.menu_login { display: block; padding-left: 25px; width: 149px; background: url('../img/a_menu_login_bg.gif') no-repeat left center; color: #362408; font-size: 14pt; font-weight: bold; text-decoration: none; } a.menu_login:hover { background: url('../img/a_menu_login_bg2.gif') no-repeat left center; color: #FFFFCC; } a.menu_english { display: block; margin-top: 38px; padding-left: 25px; width: 149px; background: url('../img/a_menu_english_bg.gif') no-repeat left center; color: #362408; font-size: 14pt; font-weight: bold; text-decoration: none; } a.menu_english:hover { background: url('../img/a_menu_english_bg2.gif') no-repeat left center; color: #FFFFCC; } a.menukl { display: block; padding-left: 45px; width: 129px; background: url('../img/a_menukl_bg.gif') no-repeat 25px center; color: #362408; font-size: 12pt; font-weight: bold; text-decoration: none; } a.menukl:hover { background: url('../img/a_menukl_bg2.gif') no-repeat 25px center; color: #FFFFCC; } a.menu_info { display: block; padding-left: 20px; width: 154px; background: url('../img/a_menukl_bg.gif') no-repeat left center; color: #362408; font-size: 12pt; font-weight: bold; text-decoration: none; } a.menu_info:hover { background: url('../img/a_menukl_bg2.gif') no-repeat left center; color: #FFFFCC; } a.fotonav { color: #362408; font-weight: bold; text-decoration: none; } a.fotonav:hover { color: #FFFFCC; } span.pijl { display: block; padding-left: 20px; width: 154px; background: url('../img/span_pijl_bg.gif') no-repeat left center; color: #362408; font-size: 12pt; } div.titel { margin: 0 0 5px 0; padding: 5px; width: 815px; height: 55px; background: url('../img/titel_bg.gif'); } div.container { width: 825px; } div.menu { float: left; width: 180px; } div.menu1 { margin: 0 0 5px 0; padding: 22px 2px 2px 2px; width: 174px; height: 252px; background: #D99C41 url('../img/div_menu1_bg.gif') no-repeat; border: 1px solid #362408; } div.menu2 { margin: 0 0 5px 0; padding: 22px 2px 2px 2px; width: 174px; height: 147px; background: #D99C41 url('img/div_menu2_bg.gif') no-repeat; border: 1px solid #362408; } div.menu2a { margin: 0 0 5px 0; width: 174px; height: 85px; font-size: 0.9em; } div.menu2b { width: 174px; height: 57px; } div.menu3 { padding: 2px; width: 174px; height: 13px; background: #D99C41; border: 1px solid #362408; color: #BF8226; font-size: 8pt; text-align: center; font-weight: bold; } div.inhoud { margin: 0 0 5px 0; float: right; width: 640px; text-align: justify; } div.serie_hr { width: 640px; height: 5px; font-size: 0; } p { margin: 0; font-size: 0.9em; line-height: 1.4em; position: relative; top: -2px; } p:first-letter { font-weight: bold; } p.top5 { display: inline; font-size: 0.9em; line-height: 1em; position: static; } form { margin: 0; width: 640px; } input { padding: 1px; width: 316px; background: #FFFFCC; border: 1px solid #362408; color: #362408; font-family: Tahoma, sans-serif; font-size: 1em; } input.submit { width: 320px; background: #FFFFCC; border: 1px solid #362408; color: #362408; font-weight: bold; font-size: 0.9em; } textarea { padding: 1px; width: 316px; background: #FFFFCC; border: 1px solid #362408; color: #362408; font-family: Tahoma, sans-serif; font-size: 1em; } li { font-size: 8pt; }[/code:1:5f97389b83]
  • Wat gebeurt er als je die regel van die li tijdelijk wegcomment (met /*)? Er is ook een *-hack waarmee je alle margins en paddings op 0 zet.. Maar je kan misschien ook proberen om je stylesheet als volgt te bouwen: http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
  • De oplossing heet .Htc Met Htc kan je behaviors toevoegen aan je Css, dus eens iets nieuw, namelijk de behaviors syntax gebruiken. Htc is dus eigenlijk Javascript dat je oproept via Css. Je Css krijgt deze toevoeging: [code:1:ea228aa2f8]ol.hack { behavior: url(oplossing_olbug.htc); }[/code:1:ea228aa2f8] En zo ziet het magische Htc bestand uit: Sla dit bestand op als eender_welke_naam.htc [code:1:ea228aa2f8]<attach event="ondocumentready" handler="FixHetProbleem" /> <script type="text/javascript"> function FixHetProbleem(){ l = element.getElementsByTagName("li"); for(c=0;c<l.length;c++) { l[c].value = c+element.start; } } </script>[/code:1:ea228aa2f8] De Xhtml ziet er nu zo uit : [code:1:ea228aa2f8]<ol class="hack"> /*de class .hack aan de ol voegen*/ <li>Dit is item 1</li> <li>Dit is item 2</li> <li>Dit is item 3</li>[/code:1:ea228aa2f8] groetjes, Vanessa

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.