Mijn Header werkt niet op IE

Door Dennis van DUin op 21-07-2015 19:05

1.684 views

Beste mensen,

Allereerst nogmaals mijn complimenten over dit behulpzame forum!

Ik heb op mijn website een header gemaakt en deze werkt op Google Chrome eigenlijk perfect. Maar nu probeer ik mijn site ook te testen op Internet Explorer en daar werkt het niet op. De Header wordt op de volgende manier weergegeven:

CSS:

#topsection{
content: url("../img/design/header3.png") no-repeat top center;
background: #FFF;
max-width:100%;
padding-left: 0px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
}

En dan bij de site:

	<div id="topsection">
     </div>

De link naar de website is: www.dennisvanduin.nl en ik hoop dat iemand mij kan helpen.

Groetjes,
Dennis

- SanThe -

21-07-2015 19:19

Firefox laat hem ook niet zien.
Maak er eens dit van:
content: url("img/design/header3.png") no-repeat top center;

Dennis van DUin

21-07-2015 19:21

Dan werkt Google chrome ook niet meer... Dus dat heb ik weer terug veranderd.

- SanThe -

21-07-2015 19:23

Staat dat plaatje dan buiten de webroot?

Eddy E

21-07-2015 19:56

Waarom content gebruiken en niet gewoon background? Je toont toch maar een plaatje...

#topsection{
background: #fff url("../img/design/header3.png") no-repeat top center;
max-width:100%;
padding: 0;
padding-right: 10px;
}

Daan Slagter

21-07-2015 21:18

Er klopt ook iets niet in de opbouw van je pagina, zet de <title> en de stylsheets in de <head> en niet in de <body>

Verder moet je van #topsection het volgende maken je pad klopt namenlijk niet naar je afbeelding:

background: url("../../img/design/header3.png") no-repeat top center #fff;
max-width: 100%;
padding-left: 0px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
height: 387px;

Dennis van DUin

21-07-2015 23:33 gewijzigd op 21-07-2015 23:37

Heey ik krijg inderdaad nu een plaatje en op internet werkt het perfect! Alleen als ik het nu op mobiel bekijk dan is de header veel te lang omdat max-width werkt op de background denk ik...

Dit is de code die bij het mobiele gedeeldte van CSS staat: (Hij verkleint hem nu niet naar goed formaat

#topsection{
background: url("../../img/design/header3.png") no-repeat top center #fff;
max-width:100%;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

Ik probeer het met: background-size:100%; dan wordt de breedte wel goed maar de hoogte wordt een deel wit... hij houd de oorsronkelijke hoogte aan in mijn CSS voor de volgende column

Daan Slagter

27-07-2015 21:53

Je kunt beter de Afbeelding niet als achtergrond maar gewoon als image in de div toevoegen.

Reageren

Inloggen om te reageren