Probleempje met positioneren van li-bullets

[Kapotlood]

Hallo allemaal

Ik ben hier bezig met een website, waarbij ik een custom bullet image gebruik voor een Unordered List:
- http://vanbuurenkoudetechniek.nl/homepage1.html
- http://vanbuurenkoudetechniek.nl/css/style.css

Nu probeerd ik die op 2 plekken te gebruiken, op een "opsomming" en een "opsomming2" div'je. Om de één of andere reden schiet m'n layout uit elkaar als ik precies dezelfde CSS-code probeer te gebruiken op "opsomming2".

Op dit moment gebruik ik dus 2 verschillende manieren om de CSS-bullet te tonen, maar bij "opsomming2" krijg ik deze niet goed gepositioneerd (vandaar dat ik 't op de manier wil doen zoals ik bij "opsomming" heb gedaan). Hier het betreffende stukje code:

code:

.opsomming li {
    padding-left: 14px;
    list-style-type: none;
    background: url('http://www.vanbuurenkoudetechniek.nl/img/bullet.png') left center no-repeat;
    }

.opsomming2 li {
    margin-left: 14px;
    list-style-image: url('http://www.vanbuurenkoudetechniek.nl/img/bullet.png');
    color: #5b676d;
    }

Zoals je ziet heb ik bij "opsomming" de bullet als een background-image geplaatst waardoor ik 'm beter kan positioneren. Als ik nu die 3 regeltjes code doorkopiëer naar "opsomming2", dan gaat het mis.

Heeft iemand toevallig enig idee hoe dat kan?

Mvg,
Joram

[gvdh]

Bij de list-style-image staat de afbeelding helemaal linksboven in plaats van gecentreerd. Je zal zelf voor wat witruimte moeten zorgen in de afbeelding.

[Kapotlood]

Klopt, dat had ik gezien

Maag ik wil 't graag op de manier zoals de bovenste oplossing gaan regelen omdat dat betere compatibiliteit geeft en meer controle over de plaatsing, in tegenstelling tot 't gebruik van een "list-style-image". Het probleem is alleen dat als ik dat doe, dat de layout dan helemaal uit elkaar valt (wat ik heel vreemd vindt). Aan de andere kant, als ik de "list-style-image" probeer te positioneren met bijvoorbeeld "left center", dan klapt de layout óók uit elkaar… en ik sta eerlijk gezegd echt voor een raadsel hoe dat kan

[NMe]

Ik zie niet wat er precies fout gaat als je die eerste code gewoon overal gebruikt? Ik doe zelf meestal ook geen moeite met die list-style-image omdat het stylen bijna altijd gezeik oplevert, maar die background lukt normaal prima... Leg eens uit wat er precies breekt? Ik zie het niet aan je site.

Kun je bovendien die link even vervangen door een link naar een testcase in plaats van een livesite? Op deze manier is het eigenlijk gewoon spam; nu staat er een testcase, maar straks staat er gewoon een site die even gratis pagerank loopt te harvesten en dat is niet de bedoeling van ons forum.

[Kapotlood]

De link gaat nu naar een "homepage1.html" pagina, die dalijk helemaal niet meer bestaat… vandaar dat ik 'm zo gelinkt had Ik heb zelf ook een hekel aan "kijk naar mijn probleem want ik heb pageviews nodig" linkjes

Ik heb nu de code even vervangen, zodat bij allebij de li's de background image is gebruikt. Dan kun je direct zien wat er met die pagina gebeurt

[MueR]

Ik zie nog altijd het probleem niet? Je hebt een background image die je positioneert op left center, waardoor deze links en verticaal gecentreerd wordt geplaatst. Dat werkt prima.

[Kapotlood]

Hmm, misschien is 't een cache-probleem met m'n browser… ik zie op Firefox op m'n werk 't probleem ook niet meer. Vreemd!

Ik merk wel een ander probleem op overigens… zien jullie wel de kopjes en 't menu in een sans-serif fontje? Ik heb met @font-face deze een apart font gegeven (MavenPro Regular), en zie deze thuis via Safari en Firefox prima. Maar hier op m'n werk krijg ik een Times te zien om de één of andere reden.

(ik zal trouwens als de probleempjes opgelost zijn deze link hier in m'n eerste post verwijderen om 't helemaal netjes te houden)

[geert1]

@font-face werkt in alle browsers, mits goed geimplementeerd. Gebruik bij voorkeur Fontsquirrel, die geeft je alle benodigde bestanden en css. Zelf gebruik ik altijd een otf óf een ttf, plus een eot voor Internet Explorer. Dan de css even goed opzetten en je bent er.

Het kan goed zijn, afhankelijk van je css, dat het font-bestand op de server niet gevonden wordt en de browser gewoon je eigen lokale variant van het font pakt. Dan zie je het thuis dus prima, maar anderen niet. Dit is allemaal te voorkomen met de juiste font-files + css. Controleer ook of het pad naar je font-bestand in je css klopt. Kopieer anders dat pad even en plak het in de browser om te zien of het bestand dan gevonden wordt. Je kunt absoluut, relatief of relatief aan de root werken, werkt allemaal voor zover ik weet.

[ Voor 19% gewijzigd door geert1 op 11-10-2011 12:44 ]

[OkkE]

geert1 schreef op dinsdag 11 oktober 2011 @ 12:43:
@font-face werkt in alle browsers, mits goed geimplementeerd. Gebruik bij voorkeur Fontsquirrel, die geeft je alle benodigde bestanden en css.

Ik gebruik ook regelmatig Google Webfonts.

[Kapotlood]

Ah getver!
@Geert, je had nagenoeg helemaal gelijk!

M'n code was helemaal juist (gelukkig maar, want ik begon al aan mezelf te twijfelen), ik had alleen een "t" teveel gebruikt in de naam. Ik had even je test uitgeprobeerd door de volledige URL naar de fontjes te testen… en zowaar, hehe. De woff, eot en svg fontjes werkten uitstekend, alleen de ttf-variant had een verkeerde url.

… hoe makkelijk kun je dingen over 't hoofd zien

Problemen zijn opgelost, bedankt allemaal!