Align buttons

Goedemorgen allemaal,

Ik ben nu enige tijd met veel plezier bezig om mijn webshop in elkaar te zetten. Met alle informatie die hier beschikbaar is maakt dat tot een echte uitdaging. Echter loop ik nu tegen een frustrerend probleem aan die ik niet opgelost krijg.

Ik zou graag de "bestellen" buttons aligned willen hebben! Ze verspringen nu op alle pages. Heb 2 plaatjes toegevoegd die hopelijk het probleem duidelijker maken dan duizend woorden..

Alvast heel erg bedankt!

Heb t voor elkaar.

Toch bedankt ;-)

Hoe?

Hoi i2Paq,

Ga m'n best doen om zo uitgebreid mogelijk antwoord te geven. Hopelijk vergeet ik niets..

In een andere post had ik een stukje CSS gevonden en die heb ik aangepast in catalog/view/theme/default/

Onderaan de CSS heb ik dit toegevoegd (dit is reeds fors door mij bewerkt!):

/* box-product all */
.box-product > div { text-align:center; }
.box-product > div > div.name > a { width: 100%; height: 25px; text-align:center; }


/* box-product column */
#column-left .box-product > div, #column-right .box-product > div { width:100%; margin-right:0; display:block; text-align:left; overflow:hidden; }
#column-left .box-product .image, #column-right .box-product .image { float:left; margin-right:1px; }
#column-right .box-product > div > div.name > a { width: 100%; height: 45px; text-align:center; }


/* button */
#column-left .box-product .price, #column-right .box-product .price { display:inline; }
#column-left .box-product .cart, #column-right .box-product .cart { display:inline; margin-left:5px; }
#column-left .box-product a.button, #column-right .box-product a.button { width:100%; height:100%; }
#column-left .box-product a.button span, #column-right .box-product a.button span { display:none; visibility:none; }


Ben nog flink aan het knutselen. Een plaatje van het voorlopige resultaat. (ps ik heb er voor gekozen om de bestel buttons weg te halen omdat ik het niet mooi vind.)

Hopelijk heeft iemand hier iets aan. (Tip, als je hiermee aan de slag gaat. Zoek deze zaken in de CSS en speel er een beetje mee om het voor jou gewenste resultaat te bereiken:)

.box-product .name a
.box-product .image img
Voor de marges voor de producten in je linker en rechter kolom. Die heb ik iets breder moeten maken door het grotere tekstvak én de border erom heen!

#column-left {
float: left;
width: 180px;
}
#column-right {
float: right;
width: 180px;

HOi leuke code alleen nu heb ik het zo dat op me homepage wel alle synchroom loopt:

http://blijevoetjesshop.nl/


maar niet op

http://blijevoetjesshop.nl/index.php?ro ... path=20_27

weet je wat ik dan nog moet veranderen?

Hoi,
Zeer interessante post. Ik ben nl opzoek naar mogelijheid om de prijzen op gelijke hoogte te krijgen. Dit mbt stylesheet: .product-grid .price

Maar hoe kan ik jouw code hiervoor toepassen. Ik eea geprobeerd maar krijg het niet voor elkaar om de prijzen in de kolommen op dezelfde hoogte te krijgen.

Alvast bedankt voor advies.

remcofaasse wrote:Hoi,
Zeer interessante post. Ik ben nl opzoek naar mogelijheid om de prijzen op gelijke hoogte te krijgen. Dit mbt stylesheet: .product-grid .price

Maar hoe kan ik jouw code hiervoor toepassen. Ik eea geprobeerd maar krijg het niet voor elkaar om de prijzen in de kolommen op dezelfde hoogte te krijgen.

Alvast bedankt voor advies.

Kun je me een link geven? mag via PM als je dat prettiger vind

cocochinel wrote:HOi leuke code alleen nu heb ik het zo dat op me homepage wel alle synchroom loopt:

http://blijevoetjesshop.nl/


maar niet op

http://blijevoetjesshop.nl/index.php?ro ... path=20_27

weet je wat ik dan nog moet veranderen?

Ben zelf ook nog aan het leren, maar kun je dit eens toevoegen aan je CSS file: (ergens helemaal onderaan)


edit: (vorige was niet goed )

Probeer dit is toe te voegen:

.product-grid > div { text-align:center; }
.product-grid > div > div.name > a { width: 100%; height: 25px; text-align: center; }