productpagina webshop
In een pagina waarin diverse produkten getoond worden staan de producten in kolommen
van 3 naast elkaar met een border van 1px eromheen. Het is echter nog knap lastig om al die hokjes gelijke afmetingen te geven zodat het symmetrisch oogt. Zoals je kunt zien wijkt het hokje linksboven af van de rest.
Dit is de URL:
http://beterbyte.nl/eminent.html
Wie kan mij helpen?
Gewijzigd op 12/06/2012 09:29:40 door Dennis Fei
Toevoeging op 12/06/2012 11:39:56:
ik heb net nog even gekeken Albert maar daar ligt het niet aan. Er zijn meerdere van die hokje onsymmetrisch en niet alleen de eerste.
Toevoeging op 12/06/2012 11:59:15:
Ik kan je ook wel uitleggen.
In de eerste rij, de laatste 2, de een heeft een 1line titel en de andere heeft 2 lines aan titel. Dat breid dus automatisch uit. En waarom de eerste er zo bij ligt kan ik alleen maar verklaren doordat die een andere class heeft.
Je moet je classes trouwens niet zomaar spaties geven maar gewoon bij underscores houden.
Toevoeging op 12/06/2012 12:01:44:
ah ha
Gewijzigd op 12/06/2012 11:59:52 door Dennis Fei
Code (php)
1
2
3
4
5
2
3
4
5
div.yagendoo_vm_browse_border {
border-top: 1px dotted
#AAA;
padding-top: 10px;
}
border-top: 1px dotted
#AAA;
padding-top: 10px;
}
of om specifieker te zijn. de 2 bloks worden naar beneden geduwd door die lijn die erboven zit als je die over de hele breedte laat gaan dan zijn ze ook gelijk. :)
Gewijzigd op 12/06/2012 12:05:03 door Reshad F
Dennis Fei op 12/06/2012 11:59:34:
ik begrijp hier uit dat dit is dat dieper zit en ik niet even tussen neus en lippen op kan lossen Albert
Toevoeging op 12/06/2012 12:01:44:
ah ha
Toevoeging op 12/06/2012 12:01:44:
ah ha
Als ik jou/u was zou ik zo'n box de class 'thumbnail' geven.
Per productenpagina voor de class de Titel van de pagina zetten
Dan krijg je automatisch dus
class='webcam_thumbnail'
class='software_thumbnail'
class='virtuemart_thumbnail'
Als je daarmee in een style.css gaat werken is alles prachtig overzichtelijk en kun je de style enorm makkelijk veranderen zonder eerst in je html documenten te zitten knutselen. Ik hoop dat dit helpt. Succes ermee! ;)
waarom niet gewoon 1 class thumbnail en dan een class left / right er nog bij voor de float?
dus dan krijg je zoiets
Code (php)
1
2
3
2
3
class="thumbnail right"
class="thumbnail left"
class="thumbnail"
class="thumbnail left"
class="thumbnail"
tip: die lijn zou ik bovenin helemaal weghalen. en alleen in het midden laten staan.
.classwaardelijninzit:nth-child(1)
{
border:none;
}
Gewijzigd op 12/06/2012 12:15:03 door Reshad F
Ga het nu verwerken. Bedankt voor jullie reacties!