[css] class wordt niet meegenomen - Softwareontwikkeling

donderdag 4 december 2003 10:39

Acties:

Topicstarter

ik heb volgens de standaard van W3C het volgende goed gedaan :

code:

Body    {
    background-image: url(../gfx/logo-rechts.gif);
    background-color: #66cccc;
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: fixed;
    margin:0;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#336666;
    scrollbar-shadow-color:#F3F3F3;
    scrollbar-face-color:#336666;
    scrollbar-highlight-color:#F3F3F3;
    scrollbar-dark-shadow-color:#FFFFFF;
    scrollbar-3d-light-color:#336666;
}
#menu   {
    background-color: #66cccc;
    fixed;
    margin:0;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-base-color:#336666;
    scrollbar-shadow-color:#F3F3F3;
    scrollbar-face-color:#336666;
    scrollbar-highlight-color:#F3F3F3;
    scrollbar-dark-shadow-color:#FFFFFF;
    scrollbar-3d-light-color:#336666;
}

Het volgende gaat mis :

ik heb een frameset met 2 pagina's : menu en content
de content pagina's moeten allemaal een bg-image krijgen, en het menu niet. Nu heb ik in de menu-pagina het volgende gedaan :

code:

1	<body id="menu">

waarom krijgt mijn menu gewoon de bg-image gezien die in de body van de css is ingesteld

deze mag gesloten worden.. ik heb de normale body (van de content-pagina's) allemaal een classe gegeven, ik denk dat de body{} invloed heeft op elke body inclusief de classes (dus is de class vaak een uitbreiding op het object)

[ Voor 17% gewijzigd door crisp op 04-12-2003 23:43 . Reden: anti-layout vern**king ]

| www.everythingisspiritual.com | www.mosaic.org |

donderdag 4 december 2003 10:40

Acties:

samo

yo/wassup

probeer eens ipv #menu .menu

Bekend van cmns.nl | ArneCoomans.nl | Het kindertehuis van mijn pa in Ghana

donderdag 4 december 2003 10:44

Acties:

OkkE

CSS influencer :+

Klopt,

code:

1	body { bla ]

heeft effect op alle <body> tags waar die css aan gekoppeld zit. Of deze nu wel of geen extra class of id heeft.

[ Voor 22% gewijzigd door OkkE op 04-12-2003 10:44 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 4 december 2003 10:46

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

een beackground-image overrulled altijd de background-color,

CSS betekent cascading stylesheets, wat impliceert dat de styles overlappend zijn, een nieuwe gedefinieerde style 'erft de style-instellingen van andere style-verklaringen die ook kloppen voor het element (ofwel classes, tagdefinities oid) en dus heeft ook een BODY met ID="menu" gewoon de background-image van de BODY-style.

wat je kunt doen is om

code:

1	#menu { background-image: url();}

of misschien hem als null te definieren, of anders een leeg gifje als afbeelding te definieren

eventueel kan de !important rule ook handig zijn om misschien bepaalde definities verplicht te overrullen

[ Voor 6% gewijzigd door RM-rf op 04-12-2003 10:47 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 4 december 2003 10:51

Acties:

SgtStrider

Fractal Switchover!

Neen, de background van de tabel is standaard doorzichtig, en NIET de background-image. Wat je inderdaad moet doen is het # vervangen door .

donderdag 4 december 2003 10:53

Acties:

drm

f0pc0dert

RM-rf:
wat je kunt doen is om
code:
1
#menu { background-image: url();}
of misschien hem als null te definieren, of anders een leeg gifje als afbeelding te definieren

Cascading Stylesheet:

1	#menu { background-image: none; }

is ook prima CSS hoor

Overigens is het (imo) een goede gewoonte om de elementnaam ook in de selector op te nemen. Ik kwam er laatst namelijk achter dat dat invloed kan hebben op de volgorde waarop de styles toegepast worden. Hoe dit precies zit ben ik nog niet helemaal achter.

Cascading Stylesheet:

1
2
3

body#menu {
   background-image: none;
}

Verder vind ik dat ook een tikje leesbaarder / overzichtelijker.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 4 december 2003 13:15

Acties:

Verwijderd

drm schreef op 04 december 2003 @ 10:53:
Overigens is het (imo) een goede gewoonte om de elementnaam ook in de selector op te nemen. Ik kwam er laatst namelijk achter dat dat invloed kan hebben op de volgorde waarop de styles toegepast worden. Hoe dit precies zit ben ik nog niet helemaal achter.

Het heeft niet zozeer te maken met de volgorde als wel het gewicht van een regel. Hoe 'belangrijk' die regel is. Er is een formulie die het aantal selectors ('#', '.', 'TAGNAME', ' ', '>', etc.) telt in een regel en daar het gewicht uit berekend. Globaal gezegd: hoe specifieker een regel, hoe belangrijker. 'body#test' is specifieker dan '#test', dus die heeft voorrang. De volgorde waarmee het in het CSS staat is ook nog eens van belang (bij regels die even specifiek zijn).

http://www.w3.org/TR/CSS21/cascade.html#specificity

donderdag 4 december 2003 13:21

Acties:

drm

f0pc0dert

Blues:
Het heeft niet zozeer te maken met de volgorde als wel het gewicht van een regel.

Dat is iets beter verwoord idd, dat bedoelde ik ook. Welke rule override de ander

Hoe 'belangrijk' die regel is. Er is een formulie die het aantal selectors ('#', '.', 'TAGNAME', ' ', '>', etc.) telt in een regel en daar het gewicht uit berekend. Globaal gezegd: hoe specifieker een regel, hoe belangrijker. 'body#test' is specifieker dan '#test', dus die heeft voorrang. De volgorde waarmee het in het CSS staat is ook nog eens van belang (bij regels die even specifiek zijn).

http://www.w3.org/TR/CSS21/cascade.html#specificity

* drm had nog niet de moeite genomen het eens op te zoeken in de TR

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 4 december 2003 13:33

Acties:

whitehouse

Topicstarter

code:

A {font-family: Arial, Arial, Helvetica, sans-serif; font-size: 13px;
      font-style: normal; line-height: normal; font-weight: bolder; font-variant:
      normal; text-transform: none; color: #000000}
A:active   {   font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style:
       normal; line-height: normal; font-weight: bolder; font-variant: normal;
       text-transform: none; color: #000000; text-decoration: none;}
A:visited {font-family: Arial, Helvetica, sans-serif; font-size: 13px; 
        font-style: normal; line-height: normal; font-weight: bolder; 
        font-variant: normal; text-transform: none; color: #000000; 
        text-decoration: none;}
A:hover  {font-family: Arial, Helvetica, sans-serif; font-size: 13px; 
         font-style: normal; line-height: normal; font-weight: bolder; 
         font-variant: normal; text-transform: none; color: #FFFFFF; 
         text-decoration: none;}
A:link {    font-family: Arial, Helvetica, sans-serif; font-size: 13px; 
         font-style: normal; line-height: normal; font-weight: bolder; 
         font-variant: normal; text-transform: none; color: #000000;
         text-decoration: none; } 
Body.normal{ background-image: url(../gfx/logo-rechts.gif); 
         background-color: #66cccc; background-repeat: no-repeat;
         background-position: right; background-attachment: fixed; 
         margin:0;  scrollbar-arrow-color:#FFFFFF;  scrollbar-base-color:#336666; 
         scrollbar-shadow-color:#F3F3F3;  scrollbar-face-color:#336666; 
         scrollbar-highlight-color:#F3F3F3;  scrollbar-dark-shadow-color:#FFFFFF; 
         scrollbar-3d-light-color:#336666;} 
Body.menu    { background-color: #66cccc; fixed; margin:0;  
         scrollbar-arrow-color:#FFFFFF;  scrollbar-base-color:#336666;  
         scrollbar-shadow-color:#F3F3F3;  scrollbar-face-color:#336666;  
         scrollbar-highlight-color:#F3F3F3;  scrollbar-dark-shadow-color:#FFFFFF; 
         scrollbar-3d-light-color:#336666;}
P{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; 
         font-style: normal; line-height: normal; font-weight: normal; 
         font-variant: normal; text-transform: none; color: #000000}

waarom werken de links wel juist in Explorer en niet in andere browsers ?? mijn netscape geeft niet bij alle lniks een mouseover (maakt de onmouseover dus niet wit) hoort r bij netscape dus weer een andere volgorde ?

--edit .. thanx..zo beter ??

[ Voor 7% gewijzigd door whitehouse op 04-12-2003 13:41 ]

| www.everythingisspiritual.com | www.mosaic.org |

donderdag 4 december 2003 13:34

Acties:

drm

f0pc0dert

Darn, kan je niet een beetje beter je best doen het voor ons een beetje leesbaar te maken

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

donderdag 4 december 2003 14:06

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Maak daar nu eens minstens van:

code:

A {
   font-family: Arial, Arial, Helvetica, sans-serif; 
   font-weight: bolder; 
   color: #000000;
   text-decoration: none;
}
A:hover  {
   #FFFFFF; 
   text-decoration: none;
}
BODY {
   background-color: #66cccc; 
   background-repeat: no-repeat;
   background-position: right; 
   background-attachment: fixed; 
   margin:0px;  
   scrollbar-arrow-color:#FFFFFF;  
   scrollbar-base-color:#336666; 
   scrollbar-shadow-color:#F3F3F3;  
   scrollbar-face-color:#336666; 
   scrollbar-highlight-color:#F3F3F3;  
   scrollbar-dark-shadow-color:#FFFFFF; 
   scrollbar-3d-light-color:#336666;
}
BODY.normal{ 
   background-image: url(../gfx/logo-rechts.gif); 
} 
BODY.menu    { 
   background-color: #66cccc; 
}
P {
   font-family: Verdana, sans-serif; 
}

mogelijk werkt dit al, er stonden wat fouten in, om verder te debuggen is het essentieel dat ook de omliggende code te zien is, is het een external stylesheet en hoe wordt dit opgeroepen, klopt het mime-type (text/css) etc.

overigens kan je ook dit nog optimaliseren door gebruik te maken van shorthands font: en background:

[ Voor 12% gewijzigd door RM-rf op 04-12-2003 14:08 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 4 december 2003 14:31

Acties:

kleautviool

Cascading Stylesheet:

BODY {
   background-color: #66cccc; 
   background-repeat: no-repeat;
   background-position: right; 
   background-attachment: fixed;

kan toch veel korter?

Cascading Stylesheet:

1
2
3

body {
  background: #6cc no-repeat right fixed;
}

donderdag 4 december 2003 23:15

Acties:

Verwijderd

moz en ns zijn casesensitive mbt stylesheets, dus zorg dat je dat ook goed hebt allemaal