Hoi allemaal,

Ik heb een probleem bij een website van een klant van mij. Deze website heeft een CMS (met TinyMCE editor), waardoor ze tekst en plaatjes kan toevoegen op haar website. Helaas is er een probleem bij het centreren van plaatjes. Dit gaat namelijk totaal niet. Centreren van de tekst gaat daarintegen wel. Er gek.

Een pagina waarop te zien dat hij het niet doet is: www.demoodesjoo.be/collecties/mac .Maar ook tevens alle andere merken-pagina's uit de collectie.

Voor de volledigheid is dit de CSS file: www.demoodesjoo.be/style.css

Ik heb wel wat gelezen dat tegenwoordig het centreren van een plaatje niet zo makkelijk gaat, mogelijk helpt dit bij een eventuele oplossing: www.netmechanic.com/news/vol7/html_no10.htm

Ik weet me echt geen raad wat ik hier nu aan kan doen, om te zorgen dat de logo's van de merken nu in het midden komen te staan. Hopelijk kunnen jullie mij hiermee helpen.

Alvast heel erg bedankt.

Vriendelijke groet,
Niki JasperS

de logo's moeten in het midden van de text div komen te staan ? leg ff duidelijk uit aub
ik zie je gebruikt text align center om de plaatjes te centreren, dit wil niet in alle browsers,
bekijk je site maar eens met IE en FF. IE centreerd alles ook de plaatjes maar firefox alleen de tekst. wellicht is hier je probleem?

Heel erg bedankt voor je reactie.

Het moet inderdaad gecentreerd worden in de text div, namelijk deze:

<!-- / CONTENT CONTAINER \ -->
<div id="contentCntr">

<!-- / HOME BOX \ -->
<div class="homeBox">

<div class="left">

Ik begreep al dat >> align="center" << niet werkt in alle browsers. Vandaar ook mijn vraag of er een goede oplossing voor is. Zodat de plaatjes wel automatisch gecentreerd worden.

in de div dit neer zetten (css)

div van het plaatje {
margin: 0 auto;
}

probeer volgende eens op het plaatje, tekst mag gewoon blijven staan

<img style="display: block; margin: 0 auto; " border="0" src="....

hiermee zou hij in alle browsers gecentreerd in het divje moeten staan

Origineel gepost door Ronnie Koestering

in de div dit neer zetten (css)

div van het plaatje {
margin: 0 auto;
}

Dit werkt helaas niet.... Ik heb hem in de CSS bijgezet bij de DIV. Of moet hij op een andere plaats gezet worden? Alvast bedankt.
Aanvullend bericht:

Origineel gepost door rens s

probeer volgende eens op het plaatje, tekst mag gewoon blijven staan

<img style="display: block; margin: 0 auto; " border="0" src="....

hiermee zou hij in alle browsers gecentreerd in het divje moeten staan

Kijk dit is de oplossing, zie: http://www.demoodesjoo.be/collecties/comma

Maar nu wil ik dat hij automatisch gecentreerd staat. Want ik wil mijn klant niet opzadelen met het feit dat hij altijd de style van de plaatjes moet aanpassen. Dus hopelijk is het mogelijk om dit via de CSS stylesheet te kunnen automatiseren.

Alvast bedankt.

Misschien in je CSS zetten (in de div v/h plaatje):

margin-left: auto;
margin-right: auto;

Hoop dat dat helpt!

Niki, bij de oplossing die ik gaf hoef je de style niet meer aan te raken, alleen de src van het plaatje moet verandert worden, ook de hoogte en breedte van het plaatje hoef je als je hem direkt in de html paste niet aan te geven; zorg er gewoon voor dat de dimensies van het plaatje zo zijn als je ze wilt hebben.
als je het in je css wilt hebben hoef je alleen de style die nu in je html staat in een divje om te zetten (dan wel hoogte en breedte aangeven bij plaatje) en het plaatje als background te zetten, thats it. het gaat er alleen om dat je voor images niet text-align center gebruikt maar margin: 0 auto;
waarbij de auto staat voor centreren links en rechts

Origineel gepost door rens s

Niki, bij de oplossing die ik gaf hoef je de style niet meer aan te raken, alleen de src van het plaatje moet verandert worden.
als je het in je css wilt hebben hoef je alleen de style die nu in je html staat in een divje om te zetten, thats it. het gaat er alleen om dat je voor images niet text-align center gebruikt maar margin: 0 auto;
waarbij de auto staat voor centreren links en rechts

Het vervelende in dit geval is, dat de klant in de tekst een plaatje voegt dmv het CMS systeem. Dus bij elk plaatje wat hij upload en toevoegt, zou hij de style weer moeten ingeven, aangezien in bovenstaande oplossing de style hard-coded is toegevoegd. Het zou mooi zijn dat ik in de CSS iets kan neerzetten voor dat centreren, zodat wanneer er een plaatje wordt geupload en toegevoegd, dat hij dan automatisch die style bij het plaatje zet. Ik heb al geprobeerd om >> display: block; margin: 0 auto; << bij de juiste div te zetten in de CSS file, maar die pakt hij helaas niet op dan. Heb jij mogelijk een oplossing hiervoor dan?

Alsvast heel erg bedankt voor het helpen, je hebt me al super op weg geholpen.

Edit: ik zie dat je al een oplossing heb gegegeven voor de CSS file, maar ik ben totaal geen XHTML/CSS expert, dus zou helaas niet weten hoe ik dat voor elkaar moet boksen.
Aanvullend bericht:
Edit2: Ik heb op TBforum de oplossing voor het hele verhaal. Erg simpel eigenlijk haha. Zie: http://www.tbforum.com/thread/144474.html#800421

Ik moest bij de img {....} namelijk display: block; weghalen. En dat heeft de klus geklaard.

Heel erg bedankt iedereen (vooral Rens). Ben erg blij dat het is opgelost.

Niki je kunt ook gewoon een divje maken die je een padding van 0 auto geeft om je plaatje te centreren, zo bijvoorbeeld

je css

.plaatjediv {
width: 100%;
padding: 0 auto;
margin: 0 auto;
text-align: center;
}

dit divje zet je dan gewoon in je andere div met het plaatje erin zonder verdere style atributes,
het is altijd gecentreerd en je hoeft geen styles aan te geven of veranderen alleen de src van de img

voor de html heb je dan alleen dit nodig

<div class="plaatjediv"><img src="plaatje.png"></div>

zo zet je alle styles in je css maar je hoeft niet de harde hoogte en breedte maten aan te geven omdat je img direkt in de html staat. hij word gecentreerd in dit divje met de padding 0 auto; je plaatst dus gewoon een divje in je al bestaande divje en daar weer je img in

Misschien zo?

HTML:
<div id="JOUWDIV">
<img scr="plaatje.jpg" />
</div>

CSS:
#JOUWDIV .img {
margin: 0 auto;
}

@ Ronnie: Volgens mij is het probleem al opgelost. Jouw oplossing werkt sowieso niet, omdat je een class met de naam 'img' aanmaakt en deze vervolgens niet aanroept in de html. Margin: 0 auto; werkt alleen als er een vaste breedte is meegegeven aan de div of class.

Bovendien vergeet je de id met een " af te sluiten en sluit je de img verkeerd af (> i.p.v />).

Zoals ik in mijn vorige post al gemeld heb, is het opgelost. Daarbij staat ook de oplossing.

Maar jullie verdere oplossing kunnen mogelijk ook juist zijn. Ben al blij dat het opgelost is, en de klant is ook tevreden en daar gaat het om.

In ieder geval nog heel erg bedankt voor het helpen.

ja, dat is um maar hij is er al uit dacht ik

een class kan wel, want de img bestaad standaard.. dan worden alle images in die div zo aangepast.. maar in andere divjes niet
Aanvullend bericht:

Origineel gepost door J. de Boer

@ Ronnie: Volgens mij is het probleem al opgelost. Jouw oplossing werkt sowieso niet, omdat je een class met de naam 'img' aanmaakt en deze vervolgens niet aanroept in de html. Margin: 0 auto; werkt alleen als er een vaste breedte is meegegeven aan de div of class.

Bovendien vergeet je de id met een " af te sluiten en sluit je de img verkeerd af (> i.p.v />).

Haha sorry, zat er niet bij, heb heft gefixed maar het kan wel ik heb ook alleen aangegeven wat het voor het plaatje moet zijn, uiteraard moet de div een breede hebben, maar dat heeft hij al ik heb alleen neergezet wat hij moest toevoegen

anders ben ik ook de alt in het plaatje vergeten ;)