[css] plaatjes positioneren

[trekker22]

Ik heb een website laten slicen (zelf weinig verstand van) en wil nu nog iets aanpassen maar krijg geen contact meer met persoon die het heeft gesliced.

Gaat om deze website:

http://www.deduckenburg.nl

Het plaatje onderaan is in 1 plaatje gesliced terwijl het 3 losse plaatjes moeten worden (wil ze middels lightbox klikbaar maken).
De code hiervoor is nu:

code:

        <div class="footerRight"> 
            <img src="images/home.jpg" width="492" height="65" alt="restaurant" />
        </div>
en de css:
.footerRight {
    width:492px;
    float:left;
    padding:0px;
    margin:0px;
    overflow:hidden;
    min-height:65px;
}
.footerRight img {
    padding:0px;
    margin:0px;
    display:block;
}

Nu dacht ik dit heel eenvoudig te doen door:

code:

        <div class="footerRight"> 
            <img src="images/home.jpg" width="164" height="65" alt="restaurant" />
            <img src="images/home.jpg" width="164" height="65" alt="restaurant" />
            <img src="images/home.jpg" width="164" height="65" alt="restaurant" />
        </div>

Echter worden de 3 plaatjes onder elkaar gezet, en ik wil ze mooi langs elkaar.

Ik heb geprobeerd display:block; om te zetten in display:inline; dan past die er 2 plaatjes langs elkaar en eentje er onder. Dit komt omdat die allemaal margins naast de plaatjes zet. Terwijl die wel op 0 staan...

Zit dan wel op de goede weg. Als ik dan margin op -1px zet van .footerRight img { dan komen de 3 plaatjes wel netjes naast elkaar... Echter krijg ik aan de onderkant 1 pixel lege regel...

hoe los ik dit op?

Zoals de site nu te zien is heb ik de margin op -1px gezet en block op inline. Dan krijg je die rare 1 pixel wit.

[ Voor 3% gewijzigd door trekker22 op 08-01-2010 12:49 ]

[Mr.Qips]

Kan je met photoshop oid niet gewoon het plaatje zelf in drieen knippen? Da's zo gebeurd.

[Juup]

margin terug op 0 en spaties tussen de plaatjes weghalen?

[Mr_Groovy]

je kan de plaatjes laten floaten in css.

Ik zou dit wel doen in een div.

zo iets als

Cascading Stylesheet:

div.cell{float:left;}
div.clear{clear:both;}

HTML:

<div class="container">
  <div class="cell"> img 1 </div>
  <div class="cell"> img 2 </div>
  <div class="cell"> img 3 </div>
  <div class="clear"></div>
</div>

Ps zou <br> vervangen door <br/>.

[ Voor 5% gewijzigd door Mr_Groovy op 08-01-2010 12:58 ]

[trekker22]

Mr.Qips schreef op vrijdag 08 januari 2010 @ 12:50:
Kan je met photoshop oid niet gewoon het plaatje zelf in drieen knippen? Da's zo gebeurd.

ik heb ook losse plaatjes. maar als ik die juist los gebruik gaat die rare dingen doen!

[trekker22]

Juup schreef op vrijdag 08 januari 2010 @ 12:51:
margin terug op 0 en spaties tussen de plaatjes weghalen?

Dat was de truuk!! Top!