Userbase

Ik heb momenteel een pagina welke 3 frames bevat welke elk hun eigen stylesheet hebben (niet echt ideaal I know), en wil deze nu omvormen naar één enkele pagina (geen frames meer dus).

Ik had nu het idee van de stylesheets toe te passen op een DIV tag (zou dan drie DIV's hebben), maar kan niet meteen vinden hoe ik het style attribuut van de DIV tag laat verwijzen naar een externe stylesheet (zoals je dat anders met LINK globaal doet).

Ik vrees dat een div laten verwijzen naar een css-file zelf niet mogelijk is.
Hetgene mij aan te raden lijkt, is om mooi alles te mergen en de juiste classes en id's gebruiken om de layout te verzorgen.

Afhankelijk van de grootte van de css-files en van het aantal gebruikte tags kan dat wel een serieus werkje worden.

wem schreef:Ik vrees dat een div laten verwijzen naar een css-file zelf niet mogelijk is. Hetgene mij aan te raden lijkt, is om mooi alles te mergen en de juiste classes en id's gebruiken om de layout te verzorgen.

Vreesde er al voor, maar langs de andere kant is het dan ook netjes.

wem schreef:Afhankelijk van de grootte van de css-files en van het aantal gebruikte tags kan dat wel een serieus werkje worden.

De omvang valt wel mee... het is eerder dat ik niet zo'n CSS kenner ben.

volgens mij kan je 3 div tags maken de css gewoon importeren en als volgt werken

Code: Selecteer alles

<div id="style1"></div>
<div id="style2"></div>
<div id="style3"></div>

in css bv

Code: Selecteer alles

div#style1 a:hover {}

in plaats van

Code: Selecteer alles

a:hover {}

PS: kan zijn dat "div#style1 a:hover" als volgt moet schrijven "div#style1>a:hover" moet je maar eens uit testten in ieder geval op deze manier moet het wel mogelijk zijn.

http://www.w3schools.com/css/css_syntax.asp

ID's zijn uniek, dus in jouw voorbeeld zou je enkel

Code: Selecteer alles

#style1 {
  width: 100px;
  height: 200px;
}

moeten doen, en niet specifiek zeggen dat het bij het div-element hoort.

Je kan dus dit doen (cascades maken):

Code: Selecteer alles

#style1 td a.speciaal:hover {
  color: #FF0000;
}

Enkel de a-tag met klasse "speciaal" die zich in een cel van een tabel bevindt in het gebied aangeduid met ID style1 zal bij het er over zweven rood worden.

Maar in r2504's probleem zie ik wel een probleem: in CSS bestaat er niet zoiets als "height: 100%" , Iets dat met frames, by design, wél is.

meon schreef:Je kan dus dit doen (cascades maken):

Bedankt voor de tip, alsook Ofloo. (denk dat jullie beide hetzelfde bedoelen). Als ik niet uit het mergen uitgeraak ga ik het alvast eens verder bekijken.

meon schreef:Maar in r2504's probleem zie ik wel een probleem: in CSS bestaat er niet zoiets als "height: 100%" , Iets dat met frames, by design, wél is.

Geen idee welke gevolgen je voorbeeld heeft... wel heb ik al gemerkt dat m'n linker frame vroeger over gans de lengte van de browser z'n background kleur toonde, en nu enkel tot zover er data in staat.

Frames zomaar bannen (werk nu trouwens met tiles) lijkt een hele opgave te zijn

r2504 schreef:Geen idee welke gevolgen je voorbeeld heeft... wel heb ik al gemerkt dat m'n linker frame vroeger over gans de lengte van de browser z'n background kleur toonde, en nu enkel tot zover er data in staat.

Frames zomaar bannen (werk nu trouwens met tiles) lijkt een hele opgave te zijn

Hier is een tut. voor 100% height in je div's te krijgen

http://www.xs4all.nl/~peterned/examples/csslayout1.html

r2504 schreef:Geen idee welke gevolgen je voorbeeld heeft... wel heb ik al gemerkt dat m'n linker frame vroeger over gans de lengte van de browser z'n background kleur toonde, en nu enkel tot zover er data in staat.

Da's precies wat ik bedoelde

ditCh schreef:Hier is een tut. voor 100% height in je div's te krijgen

Ah, handig. Nu los ik het op met een javascript dat fired bij onload en onresize en de height van het middelste element telkens update.
(mijn manier werkt wél in IE6, deze niet volgens mij, min-height kent ie niet meen ik me te herinneren).
Ik heb op middelste element dan ook nog eens een overflow zodat scrollbalken BINNEN dat middelste element ontstaan ipv daar buiten en je footer buiten beeld zou vallen.

Die tut. pagina is toch een voorbeeld daarvan ? Deze ziet er hetzelfde uit in ie6.

Volgens http://www.w3schools.com/css/css_refere ... #dimension niet, maar die lijst is natuurlijk niet zaligmakend. Ik heb geen IE6 om het mee te vergelijken.

Als je naar http://www.xs4all.nl/~peterned/examples/css/layout1.css kijkt zie je de work-arounds.

meon schreef:Ah, handig. Nu los ik het op met een javascript dat fired bij onload en onresize en de height van het middelste element telkens update.
(mijn manier werkt wél in IE6, deze niet volgens mij, min-height kent ie niet meen ik me te herinneren).

Volgens mij staat er in die tut ook een hack voor IE6 ( namelijk gewoon height: 100% ).

Edit: Crapie beat me to it

Userbase

External stylesheet op DIV tag ?

External stylesheet op DIV tag ?