11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:
    Bijdrager
    onfire

    goed werkend css script

    Heeft iemand een goed werkend css script voor me… ik word simpel van het gepiel.

    ik heb een site gemaakt http://www.mytri.nl maar daar zit een bug in wanneer ik in safari het bekijk.
    Ik heb een mouse over menu erin zitten. wanneer ik in explorer kijk dan worden de lichten de teksten wit op met daaronder een oranje balk… helemaal geweldig. Maar wanneer ik in safari kijk dan licht het complete menu gedeelte op… zucht

    Heeft iemand een werkend css liggen of weet iemand waar ik een goed werkend css vandaan kan rippen…. of wat er mis is met mijn eigen css

    http://www.mytri.nl/style-sheets.css

    Thnax

    Bijdrager
    freshface

    kleine tip: je moet niet altijd je font-family declareren.
    Alleen in de body is genoeg.

    En bij speciale uitvoeringen krijg ik een horizonate scrollbar.
    En zou je mss een screenshot van de bug kunnen posten?
    Of hoe het wel zou moeten zijn.

    Bijdrager
    onfire

    als je de site in explorer bekijkt werkt de navigatie (links onderelkaar) goed, de tekst is eerst zwart en wanneer je erover gaat komt er een oranje balk onder. Bekijk je hem in safari dan licht de hele navigatie in een keer op… dus alle buttons zijn dan ineens oranje met witte tekst…

    Bijdrager
    Joost

    onfire,

    Ik denk dat ik begrijp wat je bedoelt. Op mijn site kun je denk ik zien wat je bedoelt in het interface: http://www.studiotennekes.nl.

    De code in de css voor deze links is:

    .interface {
    font-family: “Trebuchet MS”, Arial, Verdana;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: normal;
    }
    .interface a:link {
    color: #000000;
    text-decoration: none;
    }
    .interface a:visited {
    color: #000000;
    text-decoration: none;
    }
    .interface a:hover {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #FF0000;
    }
    .interface .selected {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #FF0000;
    }

    Ik hoop dat je hier iets verder mee komt want dit werkt dus, ook in safari!

    Bijdrager
    XXX

    de div waarin de links staan heb je dezelfde class meegegeven als de links zelf, dus zodra je over de div gaat met je muis, vertoont de div hetzelfde gedrag als je links !

    Bijdrager
    onfire

    De elende is alleen dat ik in exploren de oranje balk geheel laat doorlopen alleen wanneer ik dit nu in safari bekijk dan is de hele balk niet meer te zien. Ik werk in golive en daar kun je bij de a:hover aangeven in het css menu bij listitem dat je display>block wilt hebben en dit gaat goed in explorer alleen in safari vertikt hij nu de on over….

    arg

    Bijdrager
    Harryk

    Sorry geen direct antwoord, maar wel ‘heel erg waar’

    Ik heb de mijzelf opgelegde vuurdoop met css net gehad, en ben door de eerste frustraties heengekomen. Dan een paar van die ‘waarheden’:

    • Absoluut zorgen dat je de bekende rits browsers aan boord hebt om in te testen:
    Mac: Explorer 5 os9 Explorer 5.5 osX, Netscape 7 (evt nog 6) Opera 8 (evt ook eerdere), Safari
    Win: (Virtual PC) Explorer 6 en liefst ook nog Explorer 5 ernaast.

    De laatste is voor css van groot belang om ‘on the fly’ aanwezig te hebben, mijn ervaring is dat juist Win Explorer 6 wel eens net iets cruciaal anders doet wat dan opgelost moet. Nooit ervanuitgaan dat het wel zal werken daar.

    • De tijd ervoor nemen. Een echt boek heeft mij ook geholpen, Modern Redesign van Peter Kassenaar. Gewoon ‘studeren’… Zo’n boek brengt je ook op het spoor van de diverse browser quirks t.a.v. css, en het pakt ‘beter’ om iets echt te lezen dan alleen het scherm.

    • Op het web zoeken, daar staan talloze voorbeelden van alles wat je wilt. Alleen wel altijd testen in alle browsers.

    • Geduld geduld geduld

    Bijdrager
    tennapel
    ”onfire”

    De elende is alleen dat ik in exploren de oranje balk geheel laat doorlopen alleen wanneer ik dit nu in safari bekijk dan is de hele balk niet meer te zien. Ik werk in golive en daar kun je bij de a:hover aangeven in het css menu bij listitem dat je display>block wilt hebben en dit gaat goed in explorer alleen in safari vertikt hij nu de on over….

    arg

    Je hoeft helemaal niet display:block bij de a:hover te declareren; als je de display:block op de a-tag zet ben je er:

    [code:1:044dc49335]
    <ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    </ul>
    [/code:1:044dc49335]

    en de bijbehorende CSS:
    [code:1:044dc49335]
    #nav {
    margin : 0;
    padding : 0;
    list-style : none;
    }

    #nav li {
    float : left;
    margin : 0;
    padding : 0;
    }

    #nav a {
    padding : 3px;
    display : block;
    background : grey;
    }

    /* IE5/Mac specific filter, ignored by other browsers *//*/
    float : left;
    /**/

    #nav a:hover {
    background : #ff9900;
    }
    [/code:1:044dc49335]

    Bijdrager
    onfire

    Dit zit er goed uit maar plak ik deze code in mijn css?

    Thanx eric

    Bijdrager
    tennapel

    Je HTML moet een <ul>-lijst zijn en de code plak je in je CSS.

    Kopieer het maar eens, maak en nieuw document aan en probeer maar of je het aan de praat krijgt, de beste manier om te begrijpen wat er gebeurt.

    Bijdrager
    Harryk

    Nog een keer, (sorry voor de eerdere goede raad, verkeerd ingeschat, schoolmeester kwam bovendrijven)

    Ik heb van alles geprobeerd een display:block aan de praat te krijgen in Safari maar dat lukt niet. Tenminste niet in jouw opzet. Dat moet toch iets van een bug in safari zijn, dat het toegepast op het element span, div of p, en daarbinnen <a> niet lukt. En in alle andere browsers inderdaad zoals je zegt wel, ik heb e.e.a. geprobeerd.
    Op lijst-elementen lukt het wel in Safari, dat weet ik uit ervaring. Het werkt bovendien mooier omdat dan het gehele gedefinieerde blok als link werkt. Het heeft mij overigens uren gekost om dat in alle browsers goed te krijgen.

    Wil je een compromis binnen jouw opzet dat je van dat grotere oranje blok afkomt (vreemd, safari pakt de display:block dus wel op, maar past het verkeerd toe), en dat er in safari niks gebeurt (alleen de pijl wordt een handje) maar andere browsers wel ok zijn:

    jouw css iets aangepast, let op de width=100% declaratie. Jouw code bevat veel overbodigs maar dat is nu het onderwerp niet…

    .Text { color: #000; font: 10px/12px Arial, Helvetica, Sans-Serif; text-decoration: none; font-color: #000000 }

    .Text a:link { color: #000; font: 10px/12px Arial, Helvetica, Sans-Serif; text-decoration: none; font-color: #000000 }

    .Text a:hover { color: #fff; font: 10px/12px Arial, Helvetica, Sans-Serif;display:block; background-color: #f90; margin: 0; width: 100%; font-color: #000000}

    en je html: (die classes ertussen eruit)
    <span class=”Text”>
    <p><a href=”../introductie.html” target=”onder”>- Introductie<br>
    </a><a href=”../routebesch.html” target=”onder”>- Waar kunt u ons vinden?<br>
    </a><a href=”mailto:info@mytri.nl”>- Contact<br>
    </a><a href=”../bedrijfsgegevens.html” target=”onder”>- Bedrijfsgegevens</a></p>
    </span>

    Wil je gaan studeren op navigatielijsten met css kun je eens op

    EPTA Nederland


    kijken, waar het me goed gelukt is (topmenu). Alleen zijn dat absoluut gepositioneerde blokken en dat moet je in jouw opzet niet hebben.

    Laatste ding: Het kan heel goed wezen dat de nieuwe Safari die bij Tiger hoort wél keurig in jouw aangedragen voorbeeldsite de links in een oranje achtergrondje laat zien. Wie zich geroepen voelt dit te proberen… zou het bewijs zijn dat Safari 1.2.3 een bug heeft.

11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.