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

    Bijdrager
    iSpons

    CSS problemen in camino en IE

    Ik heb een site gemaakt met css (de css pagina extern) om afbeeldingen te positioneren
    in safari werkt alles perfect maar in Internet Explorer en camino
    werkt het niet, komt alles gewoon onder elkaar te staan
    als ik de css direct in de html pagina plak werkt het wel
    weet iemand hoe ik toch een extern css document kan maken en laten werken in ie en camino?


    Bijdrager
    WebJ

    Kun je misschien een voorbeeld geven? Laad je het CSS bestand in vanuit een map, dus als je het inlaad heb je dan bijvoorbeeld styles/style.css
    Dan kan het met de Cache en het pad naar het plaatje te maken hebben.


    Bijdrager
    iSpons

    De style.css staat in dezelfde map als de html pagina
    de images staan in een aparte map /images
    de images worden wel geladen maar ze komen onder elkaar te staan ipv over elkaar

    dan in de html pagina
    in de <head>

    [code:1:1a7e2484d9]<link type="text/css" href="Style.css">[/code:1:1a7e2484d9]

    maar ik heb de achtergrond + menuknoppen in fireworks gemaakt
    als ik css gebruik worden de knoppen niet meer actief :?


    Bijdrager
    tennapel

    zou je een link naar een testpagina kunnen posten?


    Bijdrager
    tourist

    Eigenlijk moet je zo
    [code:1:0e99b0c07e]<link rel="stylesheet" type="text/css" href="style.css" /> [/code:1:0e99b0c07e]
    naar een externe stylesheet linken (met een xhtml strict doctype, anders afsluiten als in jouw voorbeeld, dacht ik). Ik weet niet of dat het probleem is, maar zou goed kunnen. Eventueel kan je nog title/media attributen gebruiken.


    Bijdrager
    iSpons

    met [code:1:c9a7e720b5]<link rel="stylesheet" media="all" type="text/css" href="style.css"  />[/code:1:c9a7e720b5]
    werkt het nu in explorer en camino
    maar ik heb een deel in fireworks gedaan en dan een paar afbeeldingen en tekst erbij gezet met dreamweaver
    maar nu worden de knoppen niet meer actief

    ben aan het prutsen met z-index, maar dat haalt niet veel uit

    zou je een link naar een testpagina kunnen posten?

    aangezien ik m’n persoonlijker webserver niet opgestart krijg, nee :sealed:


    Bijdrager
    tennapel

    Lycos? Geocities? een andere gratis provider om even een pagina neer te zetten?

    Het is heel erg moeilijk om raad te geven als ik de code niet kan zien.


    Bijdrager
    iSpons

    http://www.geocities.com/fonsdespons77/index.html
    eum hier staat het ongeveer :s
    tekst komt ook gewoon eronder :?
    ontbreken volgens mij ook paar images :?


    Bijdrager
    tennapel

    mijn hemel! Ik kan door de javascript heen de code niet meer lezen.

    Ik denk ik ongeveer begrijp wat je wilt: als je op de contact link hovered, dan moet die afbeelding boven het menu veranderen, toch?

    Ik zou het volgende artikel eens lezen: http://www.alistapart.com/articles/sprites/


    Bijdrager
    iSpons

    niet echt
    ik zou gewoon op elke pagina, vb apple, dan zo’n image maken ivm apple, bij documenten een image ivm documenten enz
    en dan gewoon dat in de html pagina zetten en met css positioneren

    ik hoop dat het wat duidelijker is :?


    Bijdrager
    tennapel

    ok,

    Dan zou ik met z-index gaan werken. Je moet de afbeelding in drie stukken knippen.

    – Allereerst de grijze ondergrond, zonder de knoppen
    – Vervolgens de image zoals voor “contact”
    – Als derde de rij met knoppen (en dan wel even het artikel lezen)

    In je code doe je dan zoiets als dit:

    HTML:
    [code:1:803b0e70c1]<div id="container">
    <div id="menu"> — code met de knoppenbalk — </div>
    <div id="achtergrond"></div>
    <div id="contact"></div>
    </div>[/code:1:803b0e70c1]

    CSS:
    [code:1:803b0e70c1]#container {
    position : relative;
    width : 400px;
    height : 400px;
    }

    #achtergrond {
    position : absolute;
    width : 300 px;
    height : 200px;
    top : 100px;
    left : 0px;
    background : url(images/achtergrond.gif) no-repeat;
    z-index : 1;
    }

    #contact {
    position : absolute;
    width : 300 px;
    height : 300px;
    top : 0px;
    left : 0px;
    background : url(images/contact.jpg) no-repeat;
    z-index : 2;
    }

    #menu {
    position : absolute;
    width : 200px;
    height : 20px;
    top : 120px;
    left : 140px;
    z-index : 3;
    }[/code:1:803b0e70c1]

    Je snapt dat ik alle afmetingen in pixels uit mijn duim gezogen heb, die zalje zelf goed moeten invullen.

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.