Website wil niet in IE en FF
Inmiddels heb ik het eindelijk voor elkaar om de slider degelijk in de website te zetten (zie ook mijn vorige vraag) maar nu gaat het niet goed in IE en FF wanneer ik de website verklein. Alles is namelijk responsive.
Zouden jullie even willen kijken? Inmiddels zoveel geprobeerd, zie door de bomen het bos niet meer: De website
Verklein de website en je ziet vanzelf wat er fout gaat.
Alvast, hartelijk dank!
Edit: de foto gaat nu onder de bovenste. Hoe je dat moet oplossen weet ik niet. Want in totaal gebruik je 3 foto's?
Media queries lijken mij hier niet de oplossing, gezien het in Chrome "gewoon werkt".
Het zit als volgt in elkaar:
div.logo -> houten achtergrond
- div.slider-wrapper
-- div#header-line
--- img -> golf met hout aan de bovenkant, onderkant is transparant
-- div.nivoSlider
--- img -> de slider afbeeldingen
Ofwel:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div class="logo">
<div class="slider-wrapper">
<div id="header-line">
<img src="golf.jpg" alt="">
</div>
<div id="slider" class="nivoSlider">
<img src="slide1.jpg" alt="">
<img src="slide2.jpg" alt="">
<img src="slide3.jpg" alt="">
</div>
</div>
</div>
<div class="slider-wrapper">
<div id="header-line">
<img src="golf.jpg" alt="">
</div>
<div id="slider" class="nivoSlider">
<img src="slide1.jpg" alt="">
<img src="slide2.jpg" alt="">
<img src="slide3.jpg" alt="">
</div>
</div>
</div>
Met de CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.logo {
background: url(hout.jpg) center;
}
.slider-wrapper {
max-width: 1200px;
margin: auto;
}
#header-line {
position: absolute;
z-index: 999;
}
#header-line img {
max-height: 249px;
}
.nivoSlider img {
position: absolute;
display: none;
}
background: url(hout.jpg) center;
}
.slider-wrapper {
max-width: 1200px;
margin: auto;
}
#header-line {
position: absolute;
z-index: 999;
}
#header-line img {
max-height: 249px;
}
.nivoSlider img {
position: absolute;
display: none;
}
Het gaat dus fout met "#header-line img" waar ik een max-height opgeef. Chrome snapt dat deze dus verkleind moet worden wanneer het venster kleiner wordt, de andere browsers helaas niet.
Ik kan natuurlijk wat gaan "hacken" met JS maar lijkt me dat dit enkel met CSS te regelen is?
Gewijzigd op 18/04/2013 18:52:08 door Roy -
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#header-line {
position:absolute;
z-index:999;
background:url("/wordpress/wp-content/themes/roots/assets/img/header-line.png") no-repeat fixed center top transparent;
width:100%;
}
position:absolute;
z-index:999;
background:url("/wordpress/wp-content/themes/roots/assets/img/header-line.png") no-repeat fixed center top transparent;
width:100%;
}
Dan heb je wel het probleem dat '{title}' te groot wordt op kleine schermen. Dit is waarschijlijk ook niet de beste oplossing maar ik ben dan ook geen CSS guru.
Wel nog even aan de hand van je code gespeeld door de afbeelding (div#header-line img) als achtergrond in te stellen i.p.v. in een img tag. Helaas mocht dit ook niet baten.
Zou je de bedrijfsnaam willen verwijderen uit je bericht? Wat betreft de grootte daarvan, dit heb ik al afgevangen middels media queries zodat deze niet zichtbaar is bij kleinere schermformaten.
Code (php)
1
2
3
2
3
<div id="header-line">
<img src="transparant" alt="Hier een beschrijving?" />
</div>
<img src="transparant" alt="Hier een beschrijving?" />
</div>
Dan moet je wel nog background met fixed gebruiken zoals daarnet al beschreven. Dit is geen mooie oplossing, maar wel de enige zonder javascript. Natuurlijk kan ik verkeerd zijn en zijn er misschien mooiere oplossing zonder javascript.
Wat nu zegt heb ik toch al?
Code (php)
1
2
3
2
3
<div id="header-line">
<img src="golf.jpg" alt="">
</div>
<img src="golf.jpg" alt="">
</div>
Waarbij golf.jpg deze afbeelding is.
Wat je in je eerdere reactie aangeeft is dus die afbeelding als achtergrond bij "div#header-line" instellen i.p.v. "div#header-line img". Wat ik zojuist geprobeerd heb maar hetzelfde doet.
Maar nogmaals, of dit de beste oplossing is weet ik niet. Anders moet je even denken aan $(window).resize(function() { }); aangezien jQuery al nodig is voor de slider.
Code (php)
1
2
3
2
3
display: block !important;
position: relative !important;
width: 100% !important;
position: relative !important;
width: 100% !important;
Daar even mee gespeeld met als simpel resultaat:
Code (php)
1
2
3
4
2
3
4
#header-line img {
max-height: 249px;
width: 100% !important;
}
max-height: 249px;
width: 100% !important;
}
En het lijkt te werken! Mocht iemand nog in een aantal verschillende browsers willen testen, graag!
Gewijzigd op 19/04/2013 13:50:03 door Roy -