css script werkt niet.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 3 volgende »

Cees vdL

Cees vdL

14/09/2020 17:04:26
Quote Anchor link
Beste members, met het studie boek HTML&CSS probeer ik het CSS script onder de knie te krijgen.
Het wil maar niet lukken om dat werkend te krijgen.
Ik heb als eerste oefening een heel simpel script overgenomen voor het gebruik van extern CSS.
Het hele CSS script blijft na de uitvoering als tekst verschijnen, dus iets is er fout.
Ik zal het hele voorbeeld volgens het boekwerk hieronder laten zien, de tekst is natuurlijk niet relevant.

Ook begrijp ik niet de <link> tag, die zou de browser moeten vertellen waar het bestand te vinden is.
Misschien kan mij iemand daar mee helpen?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<DOCTYPE html>

<html>
    <head>
        <title>Externe CSS gebruiken 1</title>
        <link href="css/styles.css" type="text/css"
        rel="stylesheet"/>    
    </head>
    <body>
        <h1>aardappelen</h1>
        <p>veel verschillende</p>
</body>
</html>

body {
    font-family: arial;
    background-color: rgb(185,179,175);}
h1 {
    color: rgb (255,255,255);}


Heb ik een syntax foutje gemaakt of is de plaats van het CSS script verkeerd?
Alvast dank.
Cees
Gewijzigd op 14/09/2020 17:05:56 door - Ariën -
 
PHP hulp

PHP hulp

03/11/2024 14:37:12
 
- Ariën  -
Beheerder

- Ariën -

14/09/2020 17:07:40
Quote Anchor link
Heb je de CSS-styling wel in css/styles.css geplaatst? Daar verwijs je immers ook naar.
En zet die } eens netjes op een volgende regel zodat ze boven elkaar staan?
Gewijzigd op 14/09/2020 17:09:25 door - Ariën -
 
Ozzie PHP

Ozzie PHP

14/09/2020 18:10:26
Quote Anchor link
<DOCTYPE html> moet zijn <!DOCTYPE html>

Staat die code allemaal in 1 bestand? Dat is namelijk niet de bedoeling.

Je css moet in een apart bestand genaamd "styles.css" en dat bestand plaats je dan in een mapje "css".

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
body {
  font-family: arial;
  background-color: rgb(185,179,175);
}

h1 {
  color: rgb (255,255,255);
}
 
Cees vdL

Cees vdL

14/09/2020 22:04:23
Quote Anchor link
Ja, eigenlijk wel.In het boek wordt over mappen configuratie wordt met geen woord gerept.
Ik begrijp nu ook de betekenis van link href commando.

Ariel: De accolade staat nu netjes overzichtelijk op zijn plaats.

bedankt beiden voor de informatie.

Cees.
 

15/09/2020 09:29:45
Quote Anchor link
Geinig detail: een HTML5 bdoctype is kastongevoelig, en mag meer dan 1 spatie bevatten. Het mag ook zo:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<!doCtYpE      htML        >

Zie: https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
Gewijzigd op 15/09/2020 09:30:53 door
 
Cees vdL

Cees vdL

16/09/2020 20:32:39
Quote Anchor link
Ik heb het nog steeds niet voor elkaar. zo ziet HTML deel er nu uit:

<!DOCTYPE html>

<html>
<head>
<title>Externe CSS gebruiken 1</title>
<link href="css/styles.css" type="text/css"
rel="stylesheet"/>
</head>
<body>




</body>
</html>


De code, styles.css,staat nu in een aparte map, met de naam: css.

De hoofdmap ik ik: les genoemd
Map structuur van mij is: les/css.
Ook geprobeerd les/www/css

Het lijkt erop dat de CSS code in de: <link href="css/styles.css" type="text/css" niet wordt gevonden,
want het resultaat is, dat de tekst er wel staat maar de kleuren ontbreken.

hier het styles.css code in de css map:

body {
font-family: arial;
background-color: rgb(185,179,175);
}

h1 {
color: rgb (255,255,255);
}
 
Ozzie PHP

Ozzie PHP

16/09/2020 20:36:06
Quote Anchor link
In hetzelfde bestand waarin index.html staat, maak je een map "css". Daarin plaats je het bestand "styles.css".

In je index.html zet je:

<link href="/css/styles.css" type="text/css" rel="stylesheet"/>

(er staat een extra slash voor css)
 
Cees vdL

Cees vdL

16/09/2020 21:27:01
Quote Anchor link
Negatief resultaat.
Ik activeer het index.html bestand en zie in de browser het volgende adres: file:///G:/html/index.html.
Doe ik daar iets verkeerd? De bestanden staan op mijn G-schijf in de map HTML.

Werkt het misschien dan pas als ik de bestanden met FTP naar mijn website stuur, zou dat het zijn?
 
Ozzie PHP

Ozzie PHP

16/09/2020 21:41:18
Quote Anchor link
Wat zie je dan in beeld staan?
 
- Ariën  -
Beheerder

- Ariën -

16/09/2020 22:39:25
Quote Anchor link
Ik raad altijd aan om het uploaden naar een hosting, of gebruik te maken van een lokale webserver zoals XAMPP.
 
Cees vdL

Cees vdL

16/09/2020 22:43:52
Quote Anchor link
Ozzie: alleen de tekst.

Toevoeging op 16/09/2020 23:21:08:

Ik heb het geheel met FTP naar mijn website url overgezet, en ook dan zie ook alleen de tekst verschijnen.
 
- Ariën  -
Beheerder

- Ariën -

16/09/2020 23:30:31
Quote Anchor link
Hoe open je het dan in je browser?
Ik gok sterk dat je het lokaal via file: in de browser aanroept, en dat is geen hosting.
 
Cees vdL

Cees vdL

16/09/2020 23:41:07
Quote Anchor link
Is wel degelijk gehost.
kijk maar op www.pa3cvi.nl
 
- Ariën  -
Beheerder

- Ariën -

16/09/2020 23:44:31
Quote Anchor link
Ik dat lokale file:// pad nergens staan.
Wel zie ik dat http://www.pa3cvi.nl/css/styles.css niet bestaat.

Edit: nu wel
Gewijzigd op 16/09/2020 23:45:24 door - Ariën -
 
Cees vdL

Cees vdL

17/09/2020 00:01:20
Quote Anchor link
Om onverklaarbare reden had het css bestand de extensie css.css mee gekregen.
Heb dat gecorrigeerd en nu werkt het wel.
Toch jammer dat je alleen via je eigen website kunt kijken of de code werkt. Binnen de editor kan ik dat niet zien.
XAMPP, lijkt me wel wat complex om deze te gebruiken, zou wel ideaal zijn.
Nou tot zover erg bedankt voor allen die mij geholpen hebben.

Cees
 
- Ariën  -
Beheerder

- Ariën -

17/09/2020 00:05:56
Quote Anchor link
XAMPP is niet complex hoor.
Een kwestie van installeren, Apache in het Control Panel aanzetten en via http://localhost kan je jouw pagina's en PHP-scripts uitvoeren. Deze plaats je in /htdocs.
 
Thomas van den Heuvel

Thomas van den Heuvel

17/09/2020 00:18:19
Quote Anchor link
Platte HTML-pagina's kun je prima direct in je browser openen, maar wanneer dingen complexer worden of wanneer je extra toeters en bellen wilt in de vorm van een server-side scriptingtaal (bijvoorbeeld PHP) en/of een database in de achtergrond dan is een lokaal webservertje toch handiger. Ook zorgt dit waarschijnlijk voor een betere "simulatie" voor wanneer je dingen live zet.

Idealiter lijkt jouw (lokale) ontwikkelwebserver zoveel mogelijk op de live webserver zodat je niet voor de onaangename verrassing komt te staan dat je alles lokaal succesvol hebt getest, en dan blijkt nadat je alles live hebt gezet dat er een heleboel dingen niet kloppen.
 
Cees vdL

Cees vdL

18/09/2020 12:15:04
Quote Anchor link
Ik heb toch nog een vraag aan Arian.
Zou jij wat gedetailleerder kunnen beschrijven hoe ik de local webserver aan de praat krijg. Ik zie het Controle Panel inmiddels voor mij, met de diverse modules als opties. Hoe nu verder?
 
- Ariën  -
Beheerder

- Ariën -

18/09/2020 12:54:43
Quote Anchor link
De vinkjes voor minimaal Apache en MySQL aanzetten....

- Ariën - op 17/09/2020 00:05:56:
...en via http://localhost kan je jouw pagina's en PHP-scripts uitvoeren. Deze plaats je in /htdocs.
Gewijzigd op 18/09/2020 12:56:09 door - Ariën -
 
Ozzie PHP

Ozzie PHP

18/09/2020 13:47:28
Quote Anchor link
Cees vdL op 14/09/2020 22:04:23:
Ariel: De accolade staat nu netjes overzichtelijk op zijn plaats.


Cees vdL op 18/09/2020 12:15:04:
Ik heb toch nog een vraag aan Arian.

Hij heet Ariën.
 
Cees vdL

Cees vdL

18/09/2020 13:50:43
Quote Anchor link
Sorry Ariën, maar voor jou vanzelf sprekend, de twee modules staan geactiveerd, maar de stap naar: "via http://localhost"; begrijp ik niet. Lijkt een beetje op : "een domme meer kan vragen dan tien wijzen kunnen beantwoorden", grapje.
 

Pagina: 1 2 3 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.