Toon posts:

css: verschil inline style en externe stylesheet

Pagina: 1
Acties:

Verwijderd

Topicstarter
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
css
#Navigate {
   position: absolute; top: 65px; left:0; height: 24px; width: 1000px; margin-top: 1px;
}

#Navigate #Home a {
   width: 53px; height: 18px; background-image: url("buttons/h1.gif"); background-repeat: no-repeat;
}
#Navigate #Home a:hover {
   width: 53px; height: 18px; background-image: url("buttons/h2.gif"); background-repeat: no-repeat;
}


html
<div id="Navigate">
   <ul>
      <li id="Home"><a href="index.html"></a></li>
   </ul>
</div>


Wanneer ik de style inline gebruik gaat het goed, wanneer ik hem in een externe stylesheet zet niet. :(
Wat zie ik over het hoofd of wat doe ik verkeer?

Verwijderd

<style> </style> tags eromheen lijkt me een goed begin

  • Folkert
  • Registratie: September 2001
  • Laatst online: 16:51
Wat gaat er niet goed?
Hoe ziet je link eruit naar je externe stylesheet?

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Navigate">
  <ul>
    <li id="Home"><a href="index.html">Test</a></li>
  </ul>
</div>
</body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#Navigate {
    position: absolute;
    top: 65px;
    left:0;
    height: 24px;
    width: 1000px;
    margin-top: 1px;
}

#Navigate #Home a {
   width: 53px; height: 18px; 
   background-image: url("buttons/h1.gif"); 
   background-repeat: no-repeat; color:black;
}
#Navigate #Home a:hover {
   width: 53px; height: 18px; 
   background-image: url("buttons/h2.gif"); 
   background-repeat: no-repeat; color: white;


Bovenstaande code werkt gewoon, je moet overigens wel iets in je a tag zetten anders zie je geen link en zie je dus niks werken

[ Voor 85% gewijzigd door Folkert op 01-06-2004 13:44 ]


Verwijderd

Topicstarter
Het was even een stukje uit de gehele stylesheet dus vandaar geen <style></style>

code:
1
2
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/navigate.css" />


De link naar de stylesheets werken. Gezien de rest uit de externe stylesheets wel goed wordt weergegeven.
De bedoeling is dus een hover background image.

Ben bezig met het restylen van een bestaande site dus een linkje geven is moeilijk.

Voorbeeldtjes

Deze gaat fout
Deze gaat goed

[ Voor 41% gewijzigd door Verwijderd op 01-06-2004 13:54 ]


  • creative8500
  • Registratie: September 2001
  • Laatst online: 03-01 16:54

creative8500

freedom.

ACAB:
<style> </style> tags eromheen lijkt me een goed begin
Dat heeft hij ook heus wel, anders zou de 'interne' versie niet werken... ;)

Johannes.Q: zet s.v.p. een testcase on-line. :)

  • kleautviool
  • Registratie: Mei 2003
  • Laatst online: 21-05 19:24
Maar wát gaat er nu precies fout dan?

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Ik heb ooit eens een topic gelezen over een soortgelijk probleem:

[rml][ html/css] Geen CSS in Mozilla Firefox[/rml]

Heb je niet hetzelfde ?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


Verwijderd

Topicstarter
Heb even 2 linkjes bijgezet. Zowel IE, firefox als opera geeft hetzelfde probleem.

  • Folkert
  • Registratie: September 2001
  • Laatst online: 16:51
Ik kan je pagina's niet bekijken. Maar als je je bg niet kan bekijken in alle browsers lijkt het me dat de link naar de plaatjes niet goed is, verander deze in je stylesheet. Deze is anders dan als je deze inline plaatst...

dus...
Cascading Stylesheet:
1
background-image: url("buttons/h1.gif"); 


wordt dan iets van
Cascading Stylesheet:
1
background-image: url("../buttons/h1.gif"); 

[ Voor 55% gewijzigd door Folkert op 01-06-2004 14:06 ]


Verwijderd

Topicstarter
Folkert heeft helemaal gelijk

Shame on me 8)7
Hoe stom kan een mens zijn.

  • rollebol
  • Registratie: Mei 2000
  • Laatst online: 22-08-2025
Klopt het content-type van je CSS file?

Probeer het ook eens met <style>@import 'test.css';</style>

Edit: Je hebt het al opgelost, maar ach misschien heeft iemand anders er iets aan. :) Ik heb met Netscape 7 af en toe dat het laden van een externe stylesheet niet werkt, terwijl het in Mozilla wel goed gaat. Bovenstaande helpt dan wel eens.

[ Voor 59% gewijzigd door rollebol op 01-06-2004 14:10 ]


  • Folkert
  • Registratie: September 2001
  • Laatst online: 16:51
ach door schade en schande leert men... ;)
Pagina: 1