content in table

[iStevo]

Hallo allemaal,

Ik wil nogmaals een poging wagen in CMS MS.
Mijn vader heeft een kleine website die ik graag in CMS MS wil omzetten (http://www.kunstspotting.be/site)
maar ik ervaar mijn eerste probleem.

Hoe moet ik de content tabel in css maken?

Code: Select all

<table width="800" cellspacing="0" cellpadding="0">
			<tr><td colspan="3" background="image/tabel_boven.jpg"> </td></tr>
			<tr><td background="image/tabel_links.jpg" width="20"> </td><td bgcolor="#B89160">
			<center><br>

<table>
<tr><td>
<table width="750" border="0">
<tr><td class="tablecontent">
<br><br>



<table>
    <tbody>
        <tr>
            <td><img alt="" src="http://www.kunstspotting.be/site/image/Hartung1_1.jpg" /></td>
            <td>
            <p align="center"><font face="Comic Sans MS" size="2">Op weg <strong>met de auto,per fiets </strong>of <strong>te voet, </strong>steeds komt men iets tegen. En dat iets kan wel eens een <strong>kunstwerk</strong> zijn. Even stoppen, indien mogelijk, het werk langs alle kanten bekijken, gegevens noteren (als deze bij het werk staan), een aantal foto´s nemen en daarna het resultaat vastzetten op deze site.<br />

            Dit kan je bekijken in het <strong>eerste</strong> album <strong><em>KUNST langs de WEG</em>.<br />
            <br />
            </strong></font><font face="Comic Sans MS" size="2">In een <strong>tweede</strong> album verzamel ik alle <strong><em>WaterTorens </em></strong>die ik op mijn weg tegenkom. Het zijn bewonderenswaardige staaltjes van architecturale kunst, door mensenhanden vakkundig neergepoot. <br />

            <strong>WaterTorens </strong>zijn voor mij een symbool van leven, van kracht, van vakmanschap. Meer dan de moeite om er eens bij stil te staan!<br />
            <br />
            Het <strong>derde</strong> album bevat foto´s van kunstwerken die te zien waren op <strong><em>TenToon</em></strong>stellingen in musea, ingericht op straat, pleinen en parken en die ik heb bezocht. Uiteraard komen hier niet alle kunstwerken in dit album. Enkel deze werken die mij aanspraken, die indruk op mij hebben gemaakt zal ik in dit album plaatsen.</font><font face="Comic Sans MS" size="2"><br />

            </font><strong><font face="Comic Sans MS" size="3"><u><br />
            </u></font></strong></p>
            <p align="center"><font face="Comic Sans MS" size="2">En dit allemaal ... </font></p>
            <p align="center"><font face="Comic Sans MS" size="2">om het <strong>op weg</strong> zijn nog boeiender te maken</font><font face="Comic Sans MS" size="2"><u><br />
            </u></font></p>
            </td>

        </tr>
    </tbody>
</table>
<br><br>
</td></tr></table>            


</td></tr>            
</table>

<br></center>
			</td><td background="image/tabel_rechts.jpg" width="20"></td></tr>
			<tr><td colspan="3" height="20" background="image/tabel_onder.jpg"> </td></tr>
			</table>

[Jos]

Hoe moet ik de content tabel in css maken?

Ik neem aan dat CMSms in plaats van css bedoelt? De css kun je simpel kopiëren en plakken in een CMSms-stylesheet

Het sjabloon (of template) kun je als volgt inrichten:

Code: Select all

<table width="800" cellspacing="0" cellpadding="0">
			<tr><td colspan="3" background="image/tabel_boven.jpg"> </td></tr>
			<tr><td background="image/tabel_links.jpg" width="20"> </td><td bgcolor="#B89160">
			<center><br>

<table>
<tr><td>
<table width="750" border="0">
<tr><td class="tablecontent">
<br><br>



<table>
    <tbody>
        <tr>
            <td>{content_image block='kantlijnplaatje' alt= '' dir='images'}</td>
            <td>
{title}
{content}
            </td>

        </tr>
    </tbody>
</table>
<br><br>
</td></tr></table>            


</td></tr>            
</table>

<br></center>
			</td><td background="image/tabel_rechts.jpg" width="20"></td></tr>
			<tr><td colspan="3" height="20" background="image/tabel_onder.jpg"> </td></tr>
			</table>

Hierin wordt de tag "content_image" gebruikt voor de foto in de kantlijn. Door deze tag in de template op te nemen, komt er in de back-end automatisch een veld bij waar je de foto kan kiezen. Nu verwijst de tag naar de upload/images directory, maar dat kun je naar eigen inzicht veranderen.

De paden van de in de template gebruikte tabel-plaatjes moet je natuurlijk ook nog wijzigen.

Je zult misschien al wel eens meer gehoord hebben dat tabellen voor de opmaak van je site niet zo geschikt zijn, en dat je beter divs kunt gebruiken. Maar je ziet dat CMSms er geen enkele moeite mee heeft om er toch mee om te gaan.

Succes.

[Jos]

Ik bedenk net dat pagina's standaard ook al een veld hebben waar je een plaatje kunt kiezen. Die kun je dus ook gebruiken in plaats van de {content_image} tag.

De aanroep van dat plaatje in je template doe je in dat geval zo:

Code: Select all

<img src="uploads/images/{page_image}" alt="" />

[Jos]

Oke dus toch css 

Misschien is dit onderstaande een goed uitgangspunt voor het geraamte voor je site.
http://blog.html.it/layoutgala/

Je html-template in CMSms komt er dan bijvoorbeeld zo uit te zien:

Code: Select all

<div id="container">
  <div id="header">{menu}</div>
  <div id="wrapper">
    <div id="content">
      {title}
      {content}
    </div>
  </div>
  <div id="navigation"><img src="uploads/images/{page_image}" alt="" /></div>
  <div id="footer">{global_content name='footer'}</div>
</div>

Voor de ronde hoeken zul je een div moeten toevoegen om de content-div heen. Kijk maar eens hoe ze het doen bij:
http://www.gigadesign.be/2005/06/css-met-ronde-hoeken-alweer/
Omdat jij een vaste breedte hebt, kun je in plaats van 4 divs dus volstaan met 2 (boven en onder). De truc is dat de beide plaatjes met de ronde hoeken als achtergrondplaatje door de stylesheet worden aangeroepen.

Hopelijk helpt dit je voldoende op weg