magento css twee columns maken

[Wizzing]

Ik ben bezig met het opzetten van een webshop. Ik maak gebruik van een template voor Magento (Hello Wired). Het lijkt mij praktisch om onder de klantenservice twee columns te maken (het gaat om deze site Klantenservice). Ik moet jullie eerlijk bekennen dat ik geen ervaring met divs en css heb, maar door wat code te bestuderen heb ik toch aardig wat aanpassingen kunnen maken. Deze aanpassing lukt mij echter niet.


Schematische voorstelling van mijn bedoeling

Navigatie links

Inhoud

Binnen magento wordt er gewerkt met een csm met daarbinnen pagina's en statische blokken.
Dit is mijn code voor de klantenservice pagina.

HTML:

<div class="klantenservicehome">
<div class="navigatielinks">{{block type="cms/block" block_id="klantenservice"}}
<div class="rechts">{{block type="cms/block" block_id="service_text"}}</div>
</div>
</div>

De css zit in een losse file. Dit heb ik ervan gemaakt

Cascading Stylesheet:

.klantenservicehome { }

.klantenservicehome .navigatielinks { float: left; width: 200px;  }
.klantenservicehome .rechts { float: right; width: 300px; }

Kan iemand mij vertellen welke aanpassing ik moet maken zodat de twee blokken naast elkaar komen te staan?

[Wiethoofd]

Check eens de CSS voor de 'rechts' div, helemaal met de GoT Highlighter moet de fout zo te spotten zijn. Snel editten

Verder zou je beide divs links kunnen laten floaten, deze 'stapelen' zich dan naast elkaar.

[ Voor 7% gewijzigd door Wiethoofd op 17-11-2010 13:00 ]

[RobIII]

Edit1:

edit:
Stiekem je post fixen

Ik zie heel de .rechts en .navigatielinks niet terug Weet je zeker dat je de juiste CSS hebt aangepast?

Edit2:

Wizzing schreef op woensdag 17 november 2010 @ 12:58:

De css zit in een losse file. Dit heb ik ervan gemaakt

Cascading Stylesheet:

.klantenservicehome { }

.klantenservicehome .navigatielinks { float: left; width: 200px;  }
.klantenservicehome .rechts { float: right; width: 300px; }

Ik zie (nu) anders:

Cascading Stylesheet:

.klantenservice-home { }
position: relative;

.klantenservice-home .navigatielinks
{ 
position: relative;
top:0;
left:0; 
width: 200px;  

}

.klantenservice-home .rechts
{ 
position: relative;
top:0;
right:0; 
width: 500px; 

}

Het helpt als je niet 15x vanalles verandert nadat je post
Sowieso is het nu opeens .klantenservice-home (met een streepje ertussen) terwijl je in de HTML klantenservicehome gebruikt (zonder streepje)....

[ Voor 244% gewijzigd door RobIII op 17-11-2010 13:13 ]

[Wizzing]

Sorry van verwarring, door de volgende aanpassing te maken krijg ik wat ik wil (moet de margins nog wel wat aanpassen). Dit is dus de aanpassing die jij voorstelde RobIII, thnx. Wiethoofd jij ook bedankt, ik zal eens kijken wat jou aanpassing verandert.

HTML:

<div class="klantenservicehome">
<div class="navigatielinks">{{block type="cms/block" block_id="klantenservice"}}</div>
<div class="rechts">{{block type="cms/block" block_id="service_text"}}</div>
</div>

Cascading Stylesheet:

.klantenservicehome { }

.klantenservicehome .navigatielinks { float: left; width: 200px;  } 
.klantenservicehome .rechts { float: right; width: 550px; }

EDIT: werkt nu toch niet Ik verander nu even niets meer aan de code. Wat hierboven zo staat het nu op de server.

[ Voor 19% gewijzigd door Wizzing op 17-11-2010 13:27 ]

[Wiethoofd]

Probeer eens de volgende CSS met de html uit jou post hierboven.

Cascading Stylesheet:

.klantenservicehome { overflow: hidden; }

.klantenservicehome .navigatielinks { float: left; width: 200px; }
.klantenservicehome .rechts ( float: left; width: 550px; }

Als ik je site bekijk die je linkt in je TS dan is de .rechts div met 750px te breed om nog naast de .navigatielinks te passen, die naar 740px en hij past wel.

[Wizzing]

Thnx wiethoofd! Hij staat nu zoals ik het in mijn hoofd had!

Wat betekend dat overflow hidden?

[RobIII]

Wizzing schreef op woensdag 17 november 2010 @ 13:37:
Wat betekend dat overflow hidden?

Doe eens gek.