[CSS] switchen tussen stylesheets

[Verwijderd]

Hallo,

ik moet een site maken voor een softwarehandleiding als taak voor het unief en dit heb ik tot dus ver: http://studwww.ugent.be/~...ievaardigheden/index.html

Ik maak dit met nog iemand, en we dachten ook een opmaakloze versie te maken aangezien sommige gebruikers dit misschien wel willen bij een softwarehandleiding


We hadden al eens een oefening gemaakt waarin we tussen stylesheets wisselen, waarvoor we een java scriptje kregen. Dit was dan de code:

<link rel="stylesheet" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="plain" href="plain.css" />
<script src="http://users.ugent.be/~klbostee/cg/stylesheet.js" type="text/javascript"></script>

Dan stond er in een div:

<div class="item"><a href="javascript:setStylesheet('default',60)">Standaard opmaak</a></div>
<div class="item"><a href="javascript:setStylesheet('plain',60)">Opmaakloos</a></div><br />

Je kon dus tussen stylesheets switchen door op een van de 2 te klikken
Ik heb ff de index hiervan online gezet: http://studwww.ugent.be/~ylens/Communicatievaardigheden/vb/


Maar wat hier dus het probleem mee is, is dat als je eerst de opmaakloze versie kiest en dan naar een andere pagina gaat, deze natuurlijk vanzelf de default.css pakt en niet opnieuw de plain.css.

Deze dacht ik op te lossen door een apart mapje te maken "plain", met daarin alleen de html bestanden die ipv de default.css gebruiken de plain.css gebruiken zonder die javascript te gebruiken.

Maar wat ik nu heb is dat hij mijn plain map als root map neemt. Als er gewoon naar "installatiestarten.html" wordt verwezen, dan neemt hij deze die in de plain map zit, en niet die in Communicatievaardigheden.
Dit kan alleen maar handig zijn dacht ik, nu moet ik geen code veranderen.
Maar om mijn site niet te zwaar en te groot te maken, wil ik niet dat ik de foto's óók in de plain map moet steken.


DUS nu kom ik bij de eigenlijke vraag: hoe doe ik dit? De volledige URL wil ik niet zetten in de verwijzing naar de foto's, aangezien ik deze taak moet indienen op een CD.

Als ik ~/ gebruik, krijg ik de foutmelding:
The requested URL /~ylens/Communicatievaardigheden/plain/~/index.html was not found on this server.
~ dient toch voor naar de root directory te gaan? Maar eigenlijk wil ik alleen 1 directory terug gaan om de foto's te kunnen openen, kan dit?
Hopelijk wel want anders heb ik jullie wat tijd doen verliezen, sorry daarvoor

Alvast bedankt en hopelijk kunnen jullie mij helpen!

[Evilbee]

Om een map hoger te gaan, gebruik je ../
Om terug te gaan naar de root, gebruik je / (waar root dan http://studwww.ugent.be is)

[ Voor 20% gewijzigd door Evilbee op 02-01-2007 15:20 ]

[Rowdy.nl]

Ik heb deze vroeger wel eens gebruikt: http://www.alistapart.com/stories/alternate/

Die slaat de geselecteerde stylesheet op in een cookie, niet helemaal je vraag, maar misschien ook een idee/oplossing...

[Verwijderd]

Ok heerlijk, bedankt voor de antwoorden!

Uiteraard ga ik nu cookies gebruiken, dat is veel mooier en handiger

Wat commentaar geven op de site mag ook natuurlijk Het is nog niet af, maar tips en commentaren zijn zeker welkom!

[Rowdy.nl]

Ik krijg iig bij FF, IE7 en Opera problemen met de opmaak; het kader om je menu links gaat bij mij over de tekst heen... (1024x768 en 1400x1050)

[Verwijderd]

Rowdy.nl schreef op dinsdag 02 januari 2007 @ 16:24:
Ik krijg iig bij FF, IE7 en Opera problemen met de opmaak; het kader om je menu links gaat bij mij over de tekst heen... (1024x768 en 1400x1050)

Ja, nog iemand heeft me dat verteld...Dit vind ik wel raar, want ik heb dit probleem niet bij FF Mss een andere versie. Ik mag er wel van uit gaan dat de gebruiker FF gebruikt, maar toch zou ik natuurlijk willen dat het probleemloos bij IE werkt

Dit zou toch niet mogen? Ik dacht dat ik dat had opgelost door de width procentueel in te stellen; mijn menu staat op 20% en mijn tekst op 75%, en die 5% dient als plaats tussen deze 2.


Btw voor diegenen die het pas lezen: ik heb die plain en vb nu gedelete, en alles vervangen door de styleswitch versie

Edit: maak ik niet best een nieuwe topic met mijn kleine vraagjes?

[ Voor 4% gewijzigd door Verwijderd op 02-01-2007 16:39 ]

[Verwijderd]

Ik zal mijn vragen in dezelfde topic houden.

Kan iemand me helpen met mijn probleem dat mensen andere opmaak hebben dan ik? En waarom IE moeilijk doet met mijn menu?
Normaal moet het menu links van de tekst komen zoals bij mij lukt in FF, maar bij IE lukt dat niet. Het menu doet nog raar op andere manieren...

Kan iemand me hier mee helpen?
Nog eens mijn site: http://studwww.ugent.be/~ylens/Communicatievaardigheden/
En mijn css: http://studwww.ugent.be/~...evaardigheden/default.css

Extra commentaar is zeker welkom!
Alvast bedankt

[Verwijderd]

Ok ik heb het kunnen oplossen, maar nu heb ik een ander probleem:

Nu wil mijn menu niet meer meebewegen naar beneden

Dus ik dacht het hiermee te doen, aangezien ik toch wil dat de site ook op IE geen problemen geeft:
http://annevankesteren.nl...es/ie/position-fixed.html

Ik heb het even hier gezet (alleen de index): http://studwww.ugent.be/~...aardigheden/New%20Folder/
http://studwww.ugent.be/~.../New%20Folder/default.css

Het werkt zowel in FF als IE, maar zoals je kunt zien zijn de 2 menu's door elkaar en het lukt niet ze te scheiden
Er staat sowieso al een <br /> na het eerste menu, maar ook padding-bottom en margin-bottom willen niet werken.

Heeft iemand enig idee hoe dit komt en hoe ik dit kan oplossen?

[Rowdy.nl]

Je positioneerd je #opmaak en je #navigation beide helemaal fixed bovenaan.Als ik twee blaadjes papier allebei in de linkerbovenhoek van mijn bureau leg, dan moet ik ze toch ook op elkaar leggen?

Je kunt een margin-top meegegeven aan je #navigation.

Cascading Stylesheet:

#navigation {
    width: 155px;
    border-right: 1px solid #B8B8B8;
    border-bottom: 1px solid #B8B8B8;
    border-top: 1px solid #B8B8B8;
    position:fixed;
    _position:absolute;
    _top:expression(eval(document.body.scrollTop));
    margin-top:100px;
}

[ Voor 4% gewijzigd door Rowdy.nl op 04-01-2007 11:15 ]

[Verwijderd]

lol jaaaa natuurlijk, waarom ben ik daar niet op gekomen margin-top ipv margin-bttom
typische fout die ik maak

Nog een kleintje: het menu plakt bij IE vanboven tegen de rand, maar bij FF zit hij goed. Margin-top kan ik niet gebruiken, aangezien dit op alle2 de browsers pakt en dan zit FF niet meer goed...Enig idee?

Als er iemand nog commentaar en tips heeft voor de site, je blijft meer dan welkom! Layout, inhoud, ... Misschien maak ik het een beetje kleurrijker, want het is nogal saai nu. Alhoewel, het blijft een softwarehandleiding
Inhoudelijk ben ik niet van plan er nog iets aan te veranderen, behalve die probleembestrijding moet nog aangevuld worden.

Btw: alles zit weer: hier http://studwww.ugent.be/~...ievaardigheden/index.html

[Rowdy.nl]

Weet het niet zeker, maar volgens mij kunt je op een manier in een stylesheet attributen alleen voor IE laten gelden, ik meen dat dat door een sterretje kon... (Maar weet ik niet zeker)

Cascading Stylesheet:

*margin-top:10px;

Ik los alle IE fixes namelijk op door een apart IE stylesheet...

HTML:

<!-- compliance patch for microsoft browsers -->
        <!--[if lt IE 7]>
            <link rel="stylesheet" type="text/css" href="/css/IE_fixes.css" />
            <script src="/scripts/ie7/ie7-standard.js" type="text/javascript"></script>
        <![endif]-->

[rob_erwt]

Met die *-hack moet je wel oppassen... Volgens mij werkt die niet meer in IE7. Daar had ik een tijdje terug ineens last van.

Die tweede manier werkt in ieder geval en is dus misschien beter om te gebruiken. (al blijft ook dat eigenlijk een rare hack...)

[tec]

Het netst is om alle specifieke IE styles binnen conditional comments te zetten en dan je geheel te onthouden van hacks in je standard stylesheet.

[crisp]

rob_erwt schreef op donderdag 04 januari 2007 @ 16:26:
Met die *-hack moet je wel oppassen... Volgens mij werkt die niet meer in IE7. Daar had ik een tijdje terug ineens last van.

Met hacks moet je altijd oppassen, die zijn vaak niet forwards-compatible

Die tweede manier werkt in ieder geval en is dus misschien beter om te gebruiken. (al blijft ook dat eigenlijk een rare hack...)

Conditional comments zijn een beschreven en supported feature van IE en daarmee is het geen hack maar een propriety feature die in andere browsers gewoon genegeerd wordt. Prima te gebruiken dus! (wij gebruiken het hier op het forum ook).

Wel een laatste note: kijk eerst eens of je niet aan symptoombestrijding aan het doen bent, oftewel: probeer eerst de oorzaak van het verschil in rendering te achterhalen. IE6 maar ook IE7 hebben nog veel last van 'hasLayout' gerelateerde bugs die meestal op te lossen zijn door bepaalde elementen expliciet een width en/of height te geven.

[Verwijderd]

Ok die conditional comments lukken mooi, bedankt voor de tip

@crisp, het is me niet gelukt om de fout te vinden, ik heb overal eens width en height gestoken en er veranderde niets...nuja, ik vind die conditional comments wel leuk

Nogmaals, verdere commentaar blijft welkom

[Verwijderd]

Hmmm ok nu zit ik met het probleem dat je door die conditional comments niet in IE naar mijn opmaakloze versie kan gaan...
Ik weet niet echt goed hoe ik dit kan veranderen want ik heb er geen ervaring mee, kan iemand mij helpen?

Btw, hier staat de site: http://studwww.ugent.be/~...nicatievaardigheden/test/

[Verwijderd]

Hmm sorry voor de derde post, maar kan iemand me helpen met mijn probleem?

Volgens mij kan ik het alleen oplossen door mijn javascript te veranderen. Van deze versta ik echter helemaal niets Ik heb ook geen ervaring met javascript
(ik heb het van hier: http://www.alistapart.com/d/alternate/styleswitcher.js)

Enig idee iemand? Alvast bedankt

[Verwijderd]

Ok het is mij gelukt na een beetje logisch redeneren

Ik zou graag nog tips en commentaar krijgen op de site, dus als iemand wilt

http://studwww.ugent.be/~ylens/Communicatievaardigheden/

[ Voor 17% gewijzigd door Verwijderd op 07-01-2007 13:17 ]