3 kolommen

[CMS-er]

Beste,

Ik wil graag een sjabloon met 3 en 4 kolommen erbij maken.
Ik heb dat als volgt gedaan:

Sjabloon:

      {* Start Content Area *}
     
        {* print showbutton=true script=true *}
        {title}
        {content}

      {* Start Sidebar *}
     
        {content block='Sidebar2'}
     
      {* End Sidebar *}

      {* Start Sidebar *}
     
        {content block='Sidebar1'}
     
      {* End Sidebar *}


Stylesheet:

div#main {
  min-height: 475px;
  margin-left: 25%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
  margin-right: 25%; /* and some air on the right */
  margin-top: 2%;
}


div#sidebar1 {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 25%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-top: 1em;
  margin-left: 0;
  margin-right: 1em;
}

div#sidebar2 {
  float: right;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 25%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-top: 1em;
  margin-left: 0;
  margin-right: 1em;
}

Maar het resultaat is dat alles naar het midden verschuift, maar niet naast elkaar komt te staan, maar juist onder elkaar.
Ik ben hier al weken mee aan het stoeien, omdat ik vind dat het iets heel simpels moet zijn, maar ik krijg het niet voor elkaar, kan iemand me helpen?

[Rolf]

Hallo CMS-er

Een link bij dit soort vraagstukken is altijd wel gemakkelijk...

Wat me zo even snel opvalt is dat het sjabloon heeft en de stylesheet: div#sidebar2

Daarnaast zou ik de sidebar buiten de main div doen, in de pagewrapper.
En de sidebar eerst aanroepen en dan de main div...

Maar met een link kunnen we meer want dan kunnen je zien wat er gebeurt, nu is het toch maar een beetje raden 

Grtz. Rolf

[CMS-er]

Rolf,

Dank voor je antwoord. Een link hierbij: www.blokhuisbraakman.nl
Het is de testpagina die onderaan in het menu staat.

[Rolf]

Genoemde punten moet je even aanpassen,
en hier ook al wat aandachtspunten:
http://validator.w3.org/check?verbose=1 ... age%3Dtest

Rolf

ps.
moet waarschijnlijk zijn
Sidebars moeten zeker uit de main-div, want deze laatste heb je de margin links en rechts op 25 % gezet.  De sidebar kan daar dus nooit komen...

[janvl]

Hallo,

ik pak dat altijd anders aan, de linker en rechter sidebars geef ik een vaste pixelwaarde en laat alleen het midden varieeren in breedte.
Het principe is simpel, dat margins rechts en links zo breed maken dat de sidebars er in passen.
In de stylesheet die je stuurde mis ik de afsluit div voor content.

Jan

[CMS-er]

Rolf,

Ik heb gedaan wat je zei namelijk:

1. veranderd in
2. de Sidebars buiten de main-div gezet in de pagewrapper
3. sidebar veranderd in sidebar2.

Maar nu staat er 1 boven de main content en 1 onder de main content.
Hoe krijg ik dat nu als drie kolommen?

[CMS-er]

Iemand enig idee?

[RonnyK]

Zou je de template kunnen posten zoals je die nu gebruikt, en daarnaast het stuk CSS waarin de aansturing staat.

Ronny

[RonnyK]

Ik heb hier een keer gepost hoe ik de structuur heb aangepast.

http://forum.cmsmadesimple.org/index.ph ... #msg129055

Ronny

[janvl]

Hallo,

heb de site net bekeken en zie geen probleem.
Als je meer wilt weten over een multikolom-layout kun je eens naar "Yaml"
kijken daar is het principe goed beschreven, CMSMS werkt naar het zelfde
principe.
De site ziet er goed uit, mijn vrouw is fotograaf en vond de foto's erg goed!

Groet,
Jan

[CMS-er]

RonnyK en janvl, bedankt voor jullie reacties.
Jan, ook bedankt voor je complimenten.

RonnyK, ik heb gedaan wat je zei, en ook je link gevolgd en de aanpassingen gedaan.
Het zit er nu als volgt uit:

div#leftsidebar {
  float: left;
  margin-left: 0px;
  margin-right: 450px;
  width: 150px; 
  padding:  0px 2px;
}

div#rightsidebar {
  float: right;
  margin-left: 1650px;
  margin-right: 50px;
  width: 150px; 
  padding:  0px 2px;
}

div#main {
  margin-left: 155px;
  margin-right: 155px;
  padding: 0px;
}

     
     
      {content block='Sidebarleft'}
     
     

   
   
      {content block='Sidebarright'}
   
   

     
     
        {title}
        {content}

     
     
     

 
 

Maar het resultaat is als volgt:

http://www.blokhuisbraakman.nl/index.php?page=test

Wie kan me verder helpen?

[Acorna078]

Ik zal er ff naar kijken...

[Acorna078]

Ik heb de CSS code aangepast om het gewenste effect van 3 kolommen te maken:

Code: Select all

<!-- Start Content (Navigation and Content columns) -->
<div id="content" style="clear:both; font-size: 1.2em;">
	<!-- Start Left Sidebar -->
	<div id="left" style="position: relative; float: left; overflow: hidden; width: 20%; margin: 0px; padding:0px; border: 1px solid red; ">
		   <h2>left</h2>		   <p>tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p><br/>
		   <ul>
		   		<li>Lorem ipsum</li>
				<li>Lorem ipsum</li>
				<li>Lorem ipsum</li>
		   </ul>
	</div>
	<!-- End Left Sidebar -->
	<!-- Start Content Area -->
	<div id="maincontent" style="position: relative; float: left; overflow: hidden; width: 60%; margin: 0px; padding: 0px; border: 1px solid blue;">
		<h2>test</h2>
		<p>main tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
		<p><img src="uploads/images/1 De Brink.jpg" alt="" width="220" height="165" />
		<img src="uploads/images/2 Westerdorpsstraat.jpg" alt="" width="220" height="165" />
		<img src="uploads/images/3 Westerdorpsstraat 2.jpg" alt="" width="220" height="165" /></p>
		<br />
		<hr class="accessibility" />
	</div>
	<!-- End Content Area -->
	<!-- Start Right Sidebar  -->
	<div id="right" style="position: relative; overflow: hidden; float: right; width: 18%; margin: 0px; padding: 0px; border: 1px solid green;">
		   <h3>right</h3>		   <p>tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p><br/>
		   <ul>
		   		<li>Lorem ipsum</li>
				<li>Lorem ipsum</li>
				<li>Lorem ipsum</li>
		   </ul>
	</div>
	<!-- End Right Sidebar  -->
</div>
<!-- End Content -->

Bekijk hier het resultaat: http://test.zoeken-en-vinden.nl/blokhuis.html. De gekleurde randen zijn bedoeld om de 3 kolommen te markeren. Deze borders kan je dus uit de code verwijderen.

Is dit wat je bedoelde?

[CMS-er]

Acorna078, dat is zeker wat ik bedoelde, maar ik krijg het met jouw gegevens alsnog niet voor elkaar. De kolommen blijven over elkaar heen lopen. Dus er is geen eind aan de kolom.
Alleen nu heb ik het voor elkaar dat de bovenste en de linkse, maar de rechtse zit geen eind aan.

[Acorna078]

De kolommen blijven over elkaar heen lopen. Dus er is geen eind aan de kolom.
Alleen nu heb ik het voor elkaar dat de bovenste en de linkse, maar de rechtse zit geen eind aan.

Wat bedoel je precies?