login  Naam:   Wachtwoord: 
Registreer je!
 Forum

overfloating image centreren

Offline a01 - 30/04/2009 13:30
Avatar van a01Nieuw lid hoi,

ik heb een banner div met breedte 100%, waar een afbeelding in zit die breed genoeg is voor de meeste schermen (2000px). De div heeft als stijl 'overfloat:hidden'. Nu zou ik graag hebben dat die afbeelding gecentreerd staat, zodat dus aan weerskanten wordt afgesneden naargelang de breedte van het scherm.

Hoe doe ik dat? 'Text-align:center' werkt niet, 'margin:auto' ook niet, ...

Alvast bedankt voor de hulp!

A01

15 antwoorden

Gesponsorde links
Offline NataschaV - 30/04/2009 13:39
Avatar van NataschaV PHP interesse Heb je een voorbeeld, want text-align: center; zou moeten werken
Offline a01 - 30/04/2009 14:21 (laatste wijziging 30/04/2009 14:25)
Avatar van a01 Nieuw lid http://test.seesite.be/a01/

--> misschien niet heel duidelijk maar als je de afbeelding apart bekijkt zie je dat ze links uitgelijnd staat.

grts
Offline NataschaV - 30/04/2009 14:31
Avatar van NataschaV PHP interesse Oke, Heb je misschien ook de code ervan?
Offline a01 - 30/04/2009 14:32
Avatar van a01 Nieuw lid <div style="width:100%;overflow:hidden;text-align:center;">
<img src="wolken.jpg" style="text-align:center;margin:auto;" align="middle"/>
</div>

heb je geen firebug? 
Offline NataschaV - 30/04/2009 14:35 (laatste wijziging 30/04/2009 15:35)
Avatar van NataschaV PHP interesse
Citaat:
heb je geen firebug?

Jawel.

Oke ik kijk even wat ik voor je kan doen.

Edit:
http://www.plaatscode.be/136287/
Hopelijk werkt deze.

Gebruik wel de volgende keer codetags, he
Offline a01 - 30/04/2009 15:18
Avatar van a01 Nieuw lid
Hoi

heel erg bedankt dat je me wil helpen,

maar het resultaat is nu dat ik onderaan een horizontale scrollbar heb (in IE en in FF), en de afbeelding staat nog steeds links uitgelijnd.  
Offline Ontani - 30/04/2009 15:27
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 is dit niet gewoon gemakkelijker:

html code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="height: 217px; background-image: url(wolken.jpg); background-position: center;"></div>
Offline a01 - 30/04/2009 15:35
Avatar van a01 Nieuw lid
Nee, dat gaat niet omdat in de banner een fading-image-plugin komt te staan, die enkel werkt met images en niet met background images...

daarom dat ik het zo moeilijk maak 
Offline Ontani - 30/04/2009 15:37 (laatste wijziging 30/04/2009 15:37)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 <div style="overflow: hidden; height: 217px; width: 100%; position: relative;">
<img src="wolken.jpg" style="position: absolute; top: 0px; left: -1000px;" />
</div>
Offline a01 - 30/04/2009 15:44
Avatar van a01 Nieuw lid hmm

nu zie ik enkel 800px van de afbeelding (de rechterkant).

http://test.seesite.be/a01/

dit is precies toch niet zo eenvoudig als ik dacht...
Offline Ontani - 30/04/2009 16:13
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Zelf je fading images maken en gewoon met een background-image werken dan heb je die zever allemaal niet.
Offline a01 - 30/04/2009 16:30
Avatar van a01 Nieuw lid mijn collega (programmeur) heeft daar geen zin in 
Offline Ontani - 30/04/2009 18:26
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 is het de volledige afbeelding die in en uitgefade wordt of enkel een deel? anders kan je als nog de wolken als background-image gebruiken en een kleiner deel daarbinnen positioneren
Offline a01 - 30/04/2009 18:57
Avatar van a01 Nieuw lid de volledige afbeelding
Offline Ontani - 30/04/2009 19:08
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Dan zet je scripter maar aan het werk...
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.191s