Zit op mobiel dus wat lastig kijken. Heb je de div met img ook een overflow: auto; meegegeven? Voeg tevens bij de img een extra class toe (of inline style) en zorg dat deze de eigenschap max-width: 100%; krijgt.
Thread starter
matt10
(@matt10)
zojuist toegevoegd. Werkt nog niet helaas. :S
Je image in de header is kleiner dat het formaat van de banner, vandaar dat ie niet netjes aansluit. De image opmaken in een groter formaat zou het probleem oplossen.
Test het zelf maar eens: voeg aan de <img … /> het volgende toe:
<img width="1600" ... />
Je forceert hiermee een breedte van 1600px (hoogte gaat automatisch mee tenzij je die ook met absolute waarde meegeeft) waardoor hij zich tot de maximale beschikbare breedte schaalt.
Thread starter
matt10
(@matt10)
bedankt voor je bericht. Ik heb het toegevoegd maar er lijkt nog meer aan de hand.
Ik zie nu dat het in chrome beter werkt. Maar ik heb de banner geen height meegegeven. Die zou mee moeten schalen met de grootte van de image namelijk.
Er is in firefox ook nog rechts een overflow te zien. Ik heb even een bijlage gemaakt met een afbeelding:
http://netwerksupport.nu/afbeeldingen/ss1.jpg
Zoals je ziet valt de image rechts ook buiten de div. En met de width:1600 is er nog steeds wat ruimte te zien helaas. :S
Enig idee?
Height hoef je ook niet op te geven, alleen max-width: 100% zodat ie ten alle tijden mee schaalt.
Ik denk ook dat je het jezelf erg moeilijk maakt door overtollige div elementen te plaatsen. Naamgeving zou ik ook wat beter hanteren maar dat is maar net wat je voorkeur heeft. Zo heb je bijvoorbeeld:
<div id="divPrimaryTop">
   <img class="img1" src="http://..." style="width:1600px;">
</div>
Maak hier simpel weg het volgende van:
<img class="img1" src="http://..." style="width:1600px;" alt="Beschrijving" />
En je bent klaar. Je kunt de image zelf namelijk ook benaderen als element.
Thread starter
matt10
(@matt10)
ik heb nu de div weer even weggehaald die om de image stond.
Het probleem is er nog steeds helaas. Vooral voor firefox gebruikers.
Kun je verklaren waarom er een spacing zit tussen de image en
#divPrimaryLeft
Hopelijk kunnen we dit probleem tackelen 🙂
Ik heb de situatie nog eens nagebouwd in een lege pagina zonder wordpress. Daar werkte de css zoals verwacht en sloot alles meteen aan. Ik denk dat het iets te maken heeft met het border box model.
Ik ga ondertussen op google zoeken naar alternatieven.
Thread starter
matt10
(@matt10)
Hoi Ruurd,
Ik heb de oplossing gevonden. Door display block aan de image toe te kennen verdween de wit ruimte.
Dat het ook aan de rechter kant uit de div viel bleek een probleem te zijn in de inspector van firefox. Als ik er overheen ging dan licht niet heel de div op.
Daarmee is dit topic resolved.
Tnx.
