[opgelost] afwijking html/css template na conversie naar cms

[john99]

hallo allemaal, misschien kun je me helpen met het volgende probleempje

ik heb een html/css website omgezet naar een cmsms template, en de originele website zo getrouw als mogelijk in cmsms nagebouwd

kijk op http://chinees.biz/

wat belangrijk is, is dat je op de site GEEN witregel onder en boven aan de banner ziet...
als je verder over de menubalk heen gaat met je cursor, "hover" dus, zie je de tekst veranderen van rood naar zwart en de achtergrond van het menu-item wordt donkergrijs...
na aanklikken wordt de tekst ROOD en die blijft rood

hetzelfde HAD moeten werken op de cmsms-site, maar dat doet het dus niet...

kijk op http://chineescms.farmhouse.nl/

ik had alle css uit de oude html template overgenomen in de nieuwe cmsms stylesheet, maar het resultaat was steeds niet zoals het moest zijn (letterkleur niet goed, wel grijze ondergrond maar witte letters, alle menu-items grijze ondergrond in plaats van alleen cursor, etc.)
ook die witte streep onder en boven de banner krijg ik niet weg; ik zie ook nergens witruimte of afstand gedefinieerd rond de banner

ik heb alle relevante css uit mijn stylesheet(s) gesloopt, en nu denk ik dat er ergens css wordt gedefinieerd waarvan ik niet kan zien waar dat gebeurt (top-menu items die zwart en onderstreept worden bij "hover" is niet van mij, en ik kan dus niet vinden waar dat wordt aangeroepen) [NB zwart en onderlijnd on hover bij submenu, links en events in de linker balk doe ik wel zelf]

voor de duidelijkheid: ik gebruik de menutemplate simple-navigation, en als er al sprake is van css declaratie (class of id) wordt die aangeduid (bijvoorbeeld) met "div_horiz" of iets dergelijks. Maar die benaming gebruik ik helemaal nergens. In de menutemplate zelf zit geen css.

zit er nog ergens iets aan standaard-css wat ik over het hoofd zie? Of is het toch iets van het menu-template?

hoor graag van je!

[timdebuurman]

Hoi john99,

Ik was net de website eens aan het bekijken om wat oplossingen aan te dragen, maar nu is de cmsms-site niet meer online lijkt het.

gr Tim

edit -> de originele ligt er ook uit zie ik.. server problemen?

[timdebuurman]

john99,

Hier stap-voor-stap de oplossing:

1. Kopieer de simple_navigation menutemplate om een bewerking te maken. (onder menubeheer kun je het sjabloon importeren)

2. Verander in de menutemplate de <ul> in <ul class="navlist"> <ul id="navlist>

3. Opslaan en deze aangepaste menutmplate gebruiken.

4. In je sjabloon (dus in de html-code) verwijder je <div id="navlist"> (en natuurlijk de erbij horende </div>) die je voor en na het menu had geplaatst. (deze div stond er zelfs dubbel in, beide moeten weg, dus 2x <div id="navlist"> weghalen en 2x de </div> )

5. Open nu de stylesheet en maak de volgende aanpassingen.

6. Deze toevoegen:
#banner p {
margin: 0;
}

7. Voeg dit toe aan #navlist
padding: 4px 5px 5px 0;
margin-top: 0;

8. Voeg dit toe aan #navlist li a
color: #FFF;
padding: 4px 5px 5px 0;

9. Voeg dit toe aan #navlist li a:hover
background-color: #B2B2B2;
color: #333;
text-decoration: none;
padding: 4px 0.75em;

Het was een beetje behelpen zo alleen met 'firebug' , maar volgens mij is het nu opgelost.

groet Tim

[Rolf]

Hier stap-voor-stap de oplossing:

LOL Goed bezig, Tim

Het was een beetje behelpen zo alleen met 'firebug' , maar volgens mij is het nu opgelost.

Firefox Add-ons: http://forum.cmsmadesimple.org/viewtopi ... 52&t=37163

grtz. Rolf

[mcDavid]

In plaats van stap 6 zou ik de <p> tags helemaal verwijderen uit de header. Die horen daar sowieso niet.

[timdebuurman]

Ja, dat kan ook.

[john99]

Tim, bedankt voor je uitgebreide to-do list, echter: zie hierna

Rolf, ook bedankt; Firebug heeft een zeer uitgebreide tegenhanger in IE9 onder "tools - F12 developer tools". Dat wil overigens niet zeggen dat ik daar goed mee uit de voeten kan

Tim, ik heb je lijstje afgewerkt
- menu template aangepast (nu simple_navigation_chinees); even uitzoeken was dat je de uitgang .tpl niet meer mag gebruiken, ook niet in verwijzing. Heb <ul> veranderd in <ul class="navlist">
- #banner p toegevoegd
- navlist aangepast ----> ZELFDE PROBLEMEN ALS EERDER

je geeft aan dat ik <ul> moet veranderen in <ul class="navlist">; dat betekent dat #navlist aan het begin van de lijst .navlist moet worden (alleen grijze ondergrond over width 100% werkt, van menu-items blijft de ondergrond wit)

vervolgens zeg je: Voeg dit toe aan #navlist (etc.); bedoel je een nieuwe div? #navlist { } - heeft overigens geen effect; als ik de waarden in class .navlist zet werkt het ook niet goed

verder werkt "display: inline" niet meer waar ik hem ook zet (class, div, etc.)

link, hover, current (active?), visited werkten niet, en werken ook nu niet (er gebeurt wel wat, maar dat wordt niet bepaald door navlist)

hover werkt niet, althans niet wat ik zelf aangeef in navlist; kennelijk is dat ergens standaard gedefinieerd

-------------------

wat ik zelf nog zie in IE9/website developer tool (F12) is 2x css declaratie:

<ul class="navlist">

<li class="menuactive"><a class="menuactive"

waar zit die "menuactive" dan? Ik denk dat daar het probleem zit

greetz, john99

[timdebuurman]

sorry, moet inderdaad

<ul id="navlist">

zijn.

Probeer dan de rest van de stappen ook..


edit -> Ik heb je site er weer bijgepakt en van "class" weer "id" gemaakt.
In je stylesheet ook weer de .navlist veranderd in #navlist en inderdaad werkt het dan.

[john99]

Tim, ik wordt hier langzaam gek

simple-navigation gewijzigd <ul id="navlist">
navlist gewijzigd van class naar id

en wat zie ik in source view op verschillende computers:
<ul class="navlist">

ik kan de cache wel 100 keer leegmaken, maar dat blijf ik zien
wat gaat er fout?

john99

[john99]

we komen steeds een stapje verder; in naam menutemplate stond een hoofdletter, in sjabloon aangeroepen zonder hoofdletters; dat werkt niet

nog wat kleine dingetjes die het niet doen, zoals letterkleur bij visited en linker margin; ik meldt als het allemaal is gelukt

john99

[john99]

Tim,

bijna alles in het top-menu werkt nu; alleen krijg ik de kleuren voor current en visited niet goed

ik heb de volgende aanwijzing gebruikt:

http://www.quackit.com/css/css_hyperlinks.cfm

Note that the a:hover must be placed after the a:link and a:visited rules, since otherwise the cascading rules will hide the effect of the a:hover rule. Similarly, because a:active is placed after a:hover, the active color (red) will apply when the user both activates and hovers over the 'anchor' element.

[timdebuurman]

john,

de visited werkt wel zo te zien.

De menutemplate maakt voor current de class "menuactive"

dus moet zoiets in je stylesheet:

#navlist li a.menuactive {

(a:active is om aan te geven hoe het eruit ziet tijdens het aanklikken, dus zolang de muisknop ingedrukt is, die heeft er dus niet mee te maken welke pagina de huidige is)


En inderdaad is de goede volgorde link, visited, hover, active

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

Ik voeg e eerste 2 en laatste 2 meestal samen, omdat ik vaak geen speciale opmaak hoef voor visited en active, dan wordt tie:

a:link, a:visited {
}

a:hover, a:active {
}

gr Tim

[john99]

hallo Tim,

kost wat moeite, maar dan heb je ook wat; bedankt!

menuactive werkt nu, #navlist li a.menuactive {color=red;} voor current menu-item

ik zag pas later (na proberen verschillende notaties) DAT het werkt; ondanks dat ik de cache regelmatig schoonmaak (zowel van IE als Firefox) zie ik sommige wijzigingen pas (veel) later actief worden in browser(s)

wat niet werkt is #navlist li a:link { }. De kleur aanpassen heeft geen effect. Haal ik deze div weg, dan lopen de kleuren fout. Als ik het goed heb betekent dit dat de div onmisbaar is, maar dat er een conflikt is (blijft) door een css-declaratie elders

hetzelfde geldt voor #navlist li a:visited { }. Die werkt helemaal niet, dus hier blijft ook conflikt is met een css-declaratie elders, waar kan ik niet vinden

[timdebuurman]

Ik bekeek m nu in meerdere browsers, maar werkt prima hoor.

[Rolf]

#navlist li a.menuactive {color=red;}

color:red;