Logo maakt website onklikbaar

Hoi,

Opeens kan ik nergens meer op klikken op livetrein (localhost):
En opeens heb ik scroll bars?
Als ik het logo weg haal dat doet ie het opeens wel dus hier de codes van het logo:
HTML:

Codeblok (voorbeeld.php):

1

CSS:

Codeblok (voorbeeld.php):

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

@media all and (min-width:1230px) {
.logo {
background: url(/img/logo_full.jpg);
position:absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
}

@media all and (max-width:1232px) {
.logo {
background: url(/img/logo_mid.jpg);
position:absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
}

@media all and (max-width:915px) {
.logo {
display:none;
}
}

Ik heb geen idee waar het aan ligt ik kan er ook nergens iets vinden wat fout is?

Je kan ook de scrollbars weghalen met CSS.

Stefvdwel schreef:

Je kan ook de scrollbars weghalen met CSS.

Als ik weghaal is zijn de scrollbars ook weg.

Ik heb ook wel eens gehad dat mijn logo te groot was. Toen heb ik hem verkleind, en nu doet ie t weer

Het is al fixed; hoe? idk?

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9

.logo {
position:absolute;
background: url(/img/logo_full.jpg);
width:100%;
height:100%;
max-width:392px;
max-height:70px;
background-repeat:no-repeat;
}

Dylanh schreef:

Het is al fixed; hoe? idk?

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9

.logo {
position:absolute;
background: url(/img/logo_full.jpg);
width:100%;
height:100%;
max-width:392px;
max-height:70px;
background-repeat:no-repeat;
}

Waarschijnlijk omdat bij een 100% het logo over je hele scherm heen gaat en door de position absolute het als hoofd object gezien wordt.

Fijn, weer een bug:nu is alleen het logo klikbaarnu opeens de hele header is klikbaar (en linkt naar livetrein.nl als je op zoeken drukt)

Codeblok (voorbeeld.php):

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

@media all and (min-width:1233px) {
.logo {
position:absolute;
background: url(/img/logo_full.jpg);
width:100%;
height:100%;
max-width:392px;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:1233px) {
.logo {
position:absolute;
background: url(/img/logo_mid.jpg);
width:100%;
height:100%;
max-width:295x;
max-height:70px;
background-repeat:no-repeat;
}
.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:1024px) {
.logo {
position:absolute;
background: url(/img/logo_small.jpg);
width:100%;
height:100%;
max-width:220x;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:870px) {
.logo {
position:absolute;
background: url(/img/logo_smaller.jpg);
width:100%;
height:100%;
max-width:160x;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:646px) {
.logo {
display:none;
}
}

Codeblok (voorbeeld.php):

1

Heb al overal width:100% en height: 100% weg gehaald maar dat werkte niet.

Waarom nog onClick elementen als ik vragen mag?
Als je toch met jQuery bezig bent ......

Aarclay schreef:

Waarom nog onClick elementen als ik vragen mag?
Als je toch met jQuery bezig bent ......

Omdat onclick en .click het zelfde doet lijkt mij?

toevoeging op 25 oktober 2013, 19:55:43:
Anndd. fixed:

Codeblok (voorbeeld.php):

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

@media all and (min-width: 780px) {
.search {
width:360px;
height:100%;
margin:auto;
}

.inputter {
width:309px;
}

}

@media all and (min-width:1233px) {
.logo {
position:absolute;
background: url(/img/logo_full.jpg);
width:100%;
height:100%;
max-width:392px;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:1233px) {
.logo {
position:absolute;
background: url(/img/logo_mid.jpg);
width:295px;
height:100%;
max-width:295x;
max-height:70px;
background-repeat:no-repeat;
}
.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:1024px) {
.logo {
position:absolute;
background: url(/img/logo_small.jpg);
width:220px;
height:100%;
max-width:220x;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

@media all and (max-width:870px) {
.logo {
position:absolute;
background: url(/img/logo_smaller.jpg);
width:160px;
height:100%;
max-width:160x;
max-height:70px;
background-repeat:no-repeat;
}

.logo:hover {
cursor:pointer;
}
}

Dylanh schreef:

Eerdere citaten tonen

Aarclay schreef:

Waarom nog onClick elementen als ik vragen mag?

Als je toch met jQuery bezig bent ......

Omdat onclick en .click het zelfde doet lijkt mij?

Klopt, waarom beiden gebruiken? Zelf vermeid ik zo veel mogelijk de HTML-events, en gebruik jQuery.

Aarclay schreef:

Eerdere citaten tonen

Dylanh schreef:

Eerdere citaten tonen

Aarclay schreef:

Waarom nog onClick elementen als ik vragen mag?

Als je toch met jQuery bezig bent ......

Omdat onclick en .click het zelfde doet lijkt mij?

Klopt, waarom beiden gebruiken? Zelf vermeid ik zo veel mogelijk de HTML-events.

Ik gebruik ze ook niet beide, ik gebruik onclick.

Ooit ga ik het hele js bestand opnieuw doen.

Waarom niet meteen goed doen?

Aarclay schreef:

Waarom niet meteen goed doen?

Omdat:

Aarclay schreef:

Even naar de site gekeken...
- setsearch() is een leuke functie, maar als je jQuery gebruikt, kan je ook hiermee eigen functies aanroepen a.d.h.v. events zoals .click(). In de rel-parameter van je a-tag kan je extra data kwijt, zoals de aanduiding hoe je moet zoeken (code, full, all etc..). Met jQuery kan je deze dan ophalen op dezelfde manier hoe je ook met jQuery de waardes van je form ophaalt, maar dan met rel. Dat houdt je code overzichtelijker en makkelijker onderhoudbaar.
Verder heb ik niks meer te zeggen en ga ik nu slapen

Dus heb nu andere ideeen om het anders en beter te doen. Vandaar.

Een rewrite dus....

Aarclay schreef:

Een rewrite dus....

Juist.
De versie die online staat werkt zonder php class, die ik nu op me localhost heb werkt met php classes, zo word het elke update wat beter. Kwa client side als server side.