Toon posts:

Wordpress CSS bestand werkt niet

Pagina: 1
Acties:

zondag 23 april 2017 14:09

Acties:
  • 0 Henk 'm!
  • Christiaan99jl
  • Registratie: April 2014
  • Laatst online: 18-06 13:33

Christiaan99jl

Topicstarter
Goedemiddag,

Ik heb een opdracht voor school waar ik een thema moet gaan invoeren in Wordpress, maar ik heb alles volgens de opdracht gevolgd en het CSS bestand werkt niet.

Zo ziet de website er nu uit: http://www.u521988.gluweb.nl/eindopdrachtcms1/
en moet er zo komen uit te zien: http://patrickvanderhoek.nl/showcase/html_design/ (heb een zip bestand van deze website en die lijkt er niet helemaal op maar wel deze richting)

Ik hoop dat een van jullie mij even kan helpen hiermee want het moet voor vandaag ingeleverd worden

[ Voor 9% gewijzigd door Christiaan99jl op 23-04-2017 14:10 ]

zondag 23 april 2017 14:11

Acties:
  • 0 Henk 'm!
  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online

b2vjfvj75gjx7

code:
1
2
3
4
5

http://www.u521988.gluweb.nl/eindopdrachtcms1/wp-content/themes/Wildvechtcss/ Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/logo.png Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/header_img.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/tents.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/wp-content/themes/Wildvechtcss/ Failed to load resource: the server responded with a status of 404 (Not Found)


...die bestanden / paden worden dus wel aangeroepen, maar bestaan niet.

Overigens als je deze code in de "head" plakt, ziet het er al een stuk beter uit;

Afbeeldingslocatie: https://s23.postimg.org/ingvqgs57/Clipboard-1.png

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

<style>

@font-face
{
font-family: myriadpro;
src: url('http://patrickvanderhoek.nl/showcase/html_design/font_family/MyriadPro-Regular.ttf'),
}

body {
    background-color: #e3e5d5;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/achtergrond.jpg);
    background-repeat: repeat-x;
    font-size: 10px;
    font-family: myriadpro;
}

#container {
    width: 1049px;
    height: 1399px;
    border: 1px solid #caceb3;
    margin: 40px auto;
    background-color: white;
}

#logo {
    height: 141px;
    width: 1049px;
}

.logo {
    margin: -19px 0 0 40px;
}

h1 {
    font-size: 14px;
    font-family: myriad pro;
    color: #48540a;
    margin-left: 318px;
    margin-top: -28px;
}

#header {
    height: 235px;
    width: 1049px;
    background-color: white;
}

.banner {
    margin-left: 9px;
}

#menu {
    height: 44px;
    margin-top: 7px;
    width: 1049px;
}

#content {
    height: 970px;
    width: 668px;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
}

#content_left {
    height: 960px;
    width: 312px;
    float: left;
    background-color: #d5dac4;
}

#foto {
    height: 178px;
    width: 235px;
    border: 1px solid #3f4b00;
    margin-left: 39px;
    margin-top: 24px;
}

h2 {
    font-size: 14px;
    color: #3f4b00;
    margin-left: 39px;
    margin-top: 55px;
}

h3 {
    font-size: 14px;
    color: #3f4b00;
    margin-left: 39px;
    margin-top: 55px;
}

h4 {
    font-size: 20px;
    color: #3f4b00;
    margin-top: 55px;   
}

h5 {
    font-size: 10px;
    color: #3f4b00;
    margin-top: 30px;
    margin-bottom: 5px; 
    text-decoration: bold;
}

.foto {
    margin-top: 2px;
    margin-left: 2px;
}

.background {
    margin-top: 85px;
}

p {
    font-size: 10px;
    color: black;
    font-family: arial;
    margin-left: 39px;
}

ul {
    height: 44px;
    width: 1031px;
    padding-left: 9px;
    
}

li a {
    text-decoration: none;
    color: white;
    line-height: 40px;
}

#menu_1 {
    width: 108px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_2 {
    width: 173px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_3 {
    width: 121px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_4 {
    width: 209px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_5 {
    width: 105px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_6 {
    width: 310px;
    height: 44px;
    float: left;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_1:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_2:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_3:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_4:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_5:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

p1 {
    margin-left: 305px;
}

.fb {
    margin-top: 25px;
    margin-left:40px;
}

#footer {
    margin-top: -30px;
    margin-left: 190px;
}


</style>


Verder is het trouwens geen WordPress site - het is gewoon statisch HTML (wel zo handig als je de basis van web-design wil leren) en die paden die aangeroepen worden zijn niet eens nodig;

Je mist puur de "styling" (CSS) in je pagina... als test heb ik het geïnjecteerd en verwezen naar de "assets" (bronnen) op je voorbeeld-site; dan kom je al een heel eind in de goede richting.

[ Voor 78% gewijzigd door b2vjfvj75gjx7 op 23-04-2017 14:21 ]

zondag 23 april 2017 15:04

Acties:
  • 0 Henk 'm!
  • Christiaan99jl
  • Registratie: April 2014
  • Laatst online: 18-06 13:33

Christiaan99jl

Topicstarter
b2vjfvj75gjx7 schreef op zondag 23 april 2017 @ 14:11:
code:
1
2
3
4
5

http://www.u521988.gluweb.nl/eindopdrachtcms1/wp-content/themes/Wildvechtcss/ Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/logo.png Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/header_img.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/imgs/tents.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.u521988.gluweb.nl/eindopdrachtcms1/wp-content/themes/Wildvechtcss/ Failed to load resource: the server responded with a status of 404 (Not Found)


...die bestanden / paden worden dus wel aangeroepen, maar bestaan niet.

Overigens als je deze code in de "head" plakt, ziet het er al een stuk beter uit;

[afbeelding]

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

<style>

@font-face
{
font-family: myriadpro;
src: url('http://patrickvanderhoek.nl/showcase/html_design/font_family/MyriadPro-Regular.ttf'),
}

body {
    background-color: #e3e5d5;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/achtergrond.jpg);
    background-repeat: repeat-x;
    font-size: 10px;
    font-family: myriadpro;
}

#container {
    width: 1049px;
    height: 1399px;
    border: 1px solid #caceb3;
    margin: 40px auto;
    background-color: white;
}

#logo {
    height: 141px;
    width: 1049px;
}

.logo {
    margin: -19px 0 0 40px;
}

h1 {
    font-size: 14px;
    font-family: myriad pro;
    color: #48540a;
    margin-left: 318px;
    margin-top: -28px;
}

#header {
    height: 235px;
    width: 1049px;
    background-color: white;
}

.banner {
    margin-left: 9px;
}

#menu {
    height: 44px;
    margin-top: 7px;
    width: 1049px;
}

#content {
    height: 970px;
    width: 668px;
    float: left;
    padding-left: 30px;
    padding-right: 30px;
}

#content_left {
    height: 960px;
    width: 312px;
    float: left;
    background-color: #d5dac4;
}

#foto {
    height: 178px;
    width: 235px;
    border: 1px solid #3f4b00;
    margin-left: 39px;
    margin-top: 24px;
}

h2 {
    font-size: 14px;
    color: #3f4b00;
    margin-left: 39px;
    margin-top: 55px;
}

h3 {
    font-size: 14px;
    color: #3f4b00;
    margin-left: 39px;
    margin-top: 55px;
}

h4 {
    font-size: 20px;
    color: #3f4b00;
    margin-top: 55px;   
}

h5 {
    font-size: 10px;
    color: #3f4b00;
    margin-top: 30px;
    margin-bottom: 5px; 
    text-decoration: bold;
}

.foto {
    margin-top: 2px;
    margin-left: 2px;
}

.background {
    margin-top: 85px;
}

p {
    font-size: 10px;
    color: black;
    font-family: arial;
    margin-left: 39px;
}

ul {
    height: 44px;
    width: 1031px;
    padding-left: 9px;
    
}

li a {
    text-decoration: none;
    color: white;
    line-height: 40px;
}

#menu_1 {
    width: 108px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_2 {
    width: 173px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_3 {
    width: 121px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_4 {
    width: 209px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_5 {
    width: 105px;
    height: 44px;
    float: left;
    text-align: center;
    border-right: 1px solid black;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_6 {
    width: 310px;
    height: 44px;
    float: left;
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu.jpg);
}

#menu_1:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_2:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_3:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_4:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

#menu_5:hover {
    background-image: url(http://patrickvanderhoek.nl/showcase/html_design/img/menu_back.jpg);
}

p1 {
    margin-left: 305px;
}

.fb {
    margin-top: 25px;
    margin-left:40px;
}

#footer {
    margin-top: -30px;
    margin-left: 190px;
}


</style>


Verder is het trouwens geen WordPress site - het is gewoon statisch HTML (wel zo handig als je de basis van web-design wil leren) en die paden die aangeroepen worden zijn niet eens nodig;

Je mist puur de "styling" (CSS) in je pagina... als test heb ik het geïnjecteerd en verwezen naar de "assets" (bronnen) op je voorbeeld-site; dan kom je al een heel eind in de goede richting.
Klopt die eerste rij met linkjes zijn de foto's van de website. Ik had deze nog niet in het mapje gezet aangezien het CSS bestand niet werkt.

Dus u heeft de bovenstaande "stylesheet" bestand in de "head" van het HTMl bestand geplakt?

Voor de opdracht moesten we het HTML bestand opsplitsen in PHP en HTML.
Opdracht: https://elo.glu.nl/lessen...eriode-3/cms/eindopdracht

Ik ben nog een groentje in programmeren dus doe mijn best

zondag 23 april 2017 15:12

Acties:
  • 0 Henk 'm!
  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online

b2vjfvj75gjx7

Christiaan99jl schreef op zondag 23 april 2017 @ 15:04:
[...]


Klopt die eerste rij met linkjes zijn de foto's van de website. Ik had deze nog niet in het mapje gezet aangezien het CSS bestand niet werkt.

Dus u heeft de bovenstaande "stylesheet" bestand in de "head" van het HTMl bestand geplakt?

Voor de opdracht moesten we het HTML bestand opsplitsen in PHP en HTML.
Opdracht: https://elo.glu.nl/lessen...eriode-3/cms/eindopdracht

Ik ben nog een groentje in programmeren dus doe mijn best
In de voorbeeld-site is geen sprake van een los CSS bestand - hooguit wordt deze via PHP 'geparsed' in de HTML, maar dat is vanaf de client-side niet zichtbaar...

Dus je kan die code gewoon plakken in de <head> van je site en dan werkt het al een stuk beter...

Overigens kan je dit beter plaatsen in het forum van "webdesign" - dan maak je meer kans op hulp (even vragen aan Tweakers of het onderwerp verplaatst kan worden...).

[ Voor 9% gewijzigd door b2vjfvj75gjx7 op 23-04-2017 15:16 ]

zondag 23 april 2017 15:28

Acties:
  • 0 Henk 'm!
  • Christiaan99jl
  • Registratie: April 2014
  • Laatst online: 18-06 13:33

Christiaan99jl

Topicstarter
b2vjfvj75gjx7 schreef op zondag 23 april 2017 @ 15:12:
[...]


In de voorbeeld-site is geen sprake van een los CSS bestand - hooguit wordt deze via PHP 'geparsed' in de HTML, maar dat is vanaf de client-side niet zichtbaar...

Dus je kan die code gewoon plakken in de <head> van je site en dan werkt het al een stuk beter...

Overigens kan je dit beter plaatsen in het forum van "webdesign" - dan maak je meer kans op hulp (even vragen aan Tweakers of het onderwerp verplaatst kan worden...).
Top ik heb in ieder geval nou wat kleuren en een layout. Nu nog de foto's als ik die URL linkjes weghaal word de pagina weer bijna blank en mijn eigen foto's koppelen werkt ook niet echt want ze zitten in het mapje imgs/.... maar leest hem dan nog niet of moet ik dan background-image: imgs/... van maken?

zondag 23 april 2017 15:30

Acties:
  • 0 Henk 'm!
  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online

b2vjfvj75gjx7

Christiaan99jl schreef op zondag 23 april 2017 @ 15:28:
[...]


Top ik heb in ieder geval nou wat kleuren en een layout. Nu nog de foto's als ik die URL linkjes weghaal word de pagina weer bijna blank en mijn eigen foto's koppelen werkt ook niet echt want ze zitten in het mapje imgs/.... maar leest hem dan nog niet of moet ik dan background-image: imgs/... van maken?
...je moet verwijzen naar het pad op je server, dus inderdaad met 'imgs' er voor.

Druk anders eens op F12 in je browser; dan zie je de 'console' met alle foutmeldingen...

Of je opent de voorbeeld-pagina, drukt op CTRL+S en upload die naar je server :p

zondag 23 april 2017 15:35

Acties:
  • 0 Henk 'm!
  • Raymond P
  • Registratie: September 2006
  • Laatst online: 08:19

Raymond P

Dan heeft hij php en html niet gescheiden.
Een betere optie zou zijn om curl of file_get_contents te gebruiken.

- knip -

zondag 23 april 2017 15:49

Acties:
  • 0 Henk 'm!
  • Yariva
  • Registratie: November 2012
  • Nu online

Yariva

Moderator Internet & Netwerken

Power to the people!

Kan dit een schopje krijgen naar het juiste topic? Of doorgaan in de post die je al goed heb aangemaakt?

Css bestand werkt niet in Wordspress

Mensen zijn gelijk, maar sommige zijn gelijker dan andere | Humans need not apply

zondag 23 april 2017 15:59

Acties:
  • 0 Henk 'm!
  • b2vjfvj75gjx7
  • Registratie: Maart 2009
  • Niet online

b2vjfvj75gjx7

Raymond P schreef op zondag 23 april 2017 @ 15:35:
Dan heeft hij php en html niet gescheiden.
Een betere optie zou zijn om curl of file_get_contents te gebruiken.
Dat lijkt me net iets too much, qua kennis-level (no pun intended, overigens).

Probleem is 'gewoon' dat er aanvankelijk geen CSS in de code stond, en later wel - maar dan zonder de juiste server-paden.
Yariva schreef op zondag 23 april 2017 @ 15:49:
Kan dit een schopje krijgen naar het juiste topic? Of doorgaan in de post die je al goed heb aangemaakt?

Css bestand werkt niet in Wordspress
Die is inmiddels al weer gesloten...

zondag 23 april 2017 16:01

Acties:
  • 0 Henk 'm!
  • Christiaan99jl
  • Registratie: April 2014
  • Laatst online: 18-06 13:33

Christiaan99jl

Topicstarter
Ik heb het al verholpen door wat dingen aan te passen toch bedankt voor jullie hulp!
Pagina: 1
Reageer

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq