Eigen website

Tabellen-scrolbar+

Gestart door duiver op 01 nov 2007, 11:17 14 berichten 12.214 keer gelezen Reageer
duiver Startte dit onderwerp 01 nov 2007, 11:17 wijnegem 9 berichten
Ik zou mijn website willen wijzigen en een pagina met tabellen willen indelen .
VB : tabel met 1 rij en 3 kolommen .
- in de eerste kolom een grote foto.
- tweede kolom niks (scheiding ruimte)
- derde kolom kleine foto's .
nu is mijn vraag kan er een scroll bar in de derde kolom geplaatst worden ????? :oops: :roll:
    Citeer
    Gast 01 nov 2007, 15:08
    duiver schreef:[...]
    - derde kolom kleine foto's .
    nu is mijn vraag kan er een scroll bar in de derde kolom geplaatst worden ????? :oops: :roll:
    Plaats in die derde kolom een iFrame met een vaste hoogtemaat, een border="0" en met de optie scrolling="auto". Dan komt er beslist een schuifbalk... (Naast Engelse tekst wordt dat vervolgens vanzelf een scroll bar ;-) )
     

    Laatst gewijzigd door Gast op 17 nov 2007, 12:49, 1 keer totaal gewijzigd.

      Citeer
      coderunner 01 nov 2007, 17:13 Aubauke - Aentwaerepe 1.828 berichten
      Beste duiver,

      Even uitleggen wat Kobbe schrijft aan de hand van een voorbeeld
      Maak een tabel dmv. onderstaande code en plaats die op je pagina waar je die wil tonen

      Code: Selecteer alles

      <table style="width:700px; cellspacing=0; cellpadding=0;">
	<tr>
		<td style="width:300px; height:255px">
		<img src="foto_bestandsnaam.jpg" width="300" height="225" alt="foto omschrijving" border="0"></td>
		<td style="width:100px; height:225px">&nbsp;</td>
		<td style="width:300px; height:225px">
		<iframe title="photobox" frameborder="0" SRC="fotos.html" scrolling="auto" style=" width:330px; height:255px;">
		</iframe>
		</td>
	</tr>
</table>
      a-De waarden width en height moet je zelf aanpassen aan de width (breedte) en height (hoogte) van je foto.
      b-Ook de juiste benaming en omschrijving van de foto ingeven
      c-Bewaar deze pagina.

      Maak vervolgens een nieuwe pagina aan (fotos.html) waar je de foto's plaatst die in de derde kolom in het iframe moeten getoond worden.
      Een uitgewerkt voorbeeld zie je hieronder

      Code: Selecteer alles

      ...
<body>
		<img src="foto_bestandsnaam.jpg" width="300" height="225" alt="foto omschrijving" border="0">
		<br>
		<img src="foto_bestandsnaam.jpg"  width="300" height="225" alt="foto omschrijving" border="0">
</body>
...
      a-Ook hier weer zelf de nodige aanpassingen doen in width en height en foto bestandsnaam
      b-Achtergrondkleur ed. kan je ook hier opnemen;
      c-Bewaar de pagina als fotos.html
      d-Je kan natuurlijk zoveel foto's plaatsen als je zelf wil

      Beide html pagina's en foto's opladen naar je host server.
      Behoud de structuur op de host server die je op je harde schijf hebt toegepast.

      Succes

      mvg,
      Coderunner
        Citeer
        duiver Startte dit onderwerp 02 nov 2007, 17:54 wijnegem 9 berichten
        KOBBE & CODERUNNER

        bedankt voor de info zal het eens proberen om jullie voorbeeld uit te werken.
        Mijn website http://www.foli.be is aangemaakt met Draemwaever en de pagina die ik wou veranderen is Reisverhalen.
        laat nog wel iets weten wanneer het gelukt is of niet ??????

        bedankt voor de hulp.
          Citeer
          duiver Startte dit onderwerp 05 nov 2007, 17:04 wijnegem 9 berichten
          Kobbe & coderunner

          heb het enkele malen uitgeprobeerd, zelfs de code gekopieerd naar dreamweaver en telkens komt de schuifbalk naast de derde kolom zodat de volledige bladzijde scroll
          het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.

          bedankt voor info
            Citeer
            coderunner 05 nov 2007, 19:20 Aubauke - Aentwaerepe 1.828 berichten
            duiver schreef:heb het enkele malen uitgeprobeerd, zelfs de code gekopieerd naar dreamweaver en telkens komt de schuifbalk naast de derde kolom zodat de volledige bladzijde scroll
            het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.
            Beste duiver,

            Plaats de link (url) naar de pagina met de fout hier eens, dan kan ik zien wat er fout gaat.
            Want als ik nu naar je site ga en in menu "reisverhalen" aanklik, krijg ik een grotere foto in het midden met daarrond thumbnails.

            mvg,
            Coderunner
              Citeer
              Gast 06 nov 2007, 12:00
              Duiver schreef:[...] het gedeelte dat moet scrollen zou in de derde kolom van de tabel moeten komen.
              Je moet in de testversie van je vernieuwde pagina wel voldoende afbeeldingen opnemen in het html-bestand waarmee je het iFrame van de derde kolom vult!
              Scrolling="auto" levert alleen een schuifbalk op als het nodig is. Is de totale hoogte van de derde kolom (nog) niet gevuld, dan verschijnt er ook geen schuifbalk.

              Laatst gewijzigd door Gast op 17 nov 2007, 12:50, 1 keer totaal gewijzigd.

                Citeer
                duiver Startte dit onderwerp 06 nov 2007, 16:49 wijnegem 9 berichten
                KOBBE & CODERUNNER

                hier de code van mijn doel stelling maar heb het nog eens geprobeerd maar krijg geen frame in de derde kolom geplaatst via Dreamweaver.
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>testen foli</title>
                <style type="text/css">
                <!--
                body,td,th {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 10px;
                color: #FFFFFF;
                }
                body {
                background-color: #999999;
                }
                .style1 {font-size: 24px}
                .style2 {font-size: 18px}
                .style3 {font-size: 16px}
                -->
                </style></head>

                <body>
                <table width="710" border="2" cellpadding="0">
                <tr>
                <td width="100" bgcolor="#666666"><div align="center">Frankrijk</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Duitsland</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Nederland</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Tsjechi&euml;</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Portugal</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Italie</div></td>
                <td width="100" bgcolor="#666666"><div align="center">Uitstappen</div></td>
                </tr>
                </table>
                <p>&nbsp;</p>
                <table width="800" height="400" border="2" cellpadding="0">
                <tr>
                <td width="520" ><div align="center">
                <table width="510" height="350" border="2" cellpadding="0">
                <tr>
                <td><div align="center" class="style1">Grote foto </div>
                <p><br />
                </p>
                <p><span class="style2">naast kleine foto's zou ik graag een scrolbar hebben </span></p>
                <p class="style3">de afmetingen van de hoofd tabel is groter geworden </p></td>
                </tr>
                </table>
                </div></td>
                <td width="13" >&nbsp;</td>
                <td width="230" ><table width="219" border="2" align="left" cellpadding="0">
                <tr>
                <td width="90" height="75">&nbsp;</td>
                <td width="115">&nbsp;</td>
                </tr>
                <tr>
                <td height="10"><div align="center">Col d' Aubisque </div></td>
                <td><div align="center">Dun dePilar </div></td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10"><div align="center">Woud van Iraty </div></td>
                <td><div align="center">Oradour du Glane </div></td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="75">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>
                <tr>
                <td height="10">&nbsp;</td>
                <td>&nbsp;</td>
                </tr>

                </table></td>
                </tr>
                </table>
                <p class="style2">&nbsp;</p>
                </body>
                </html>
                wat doe ik nu verkeerd??????

                bedankt voor de info .
                  Citeer
                  coderunner 06 nov 2007, 17:57 Aubauke - Aentwaerepe 1.828 berichten
                  Beste duiver,

                  Is het de bedoeling dat alle kleine foto's naar boven of beneden kunnen worden gescrolled ?

                  Code: Selecteer alles

                  <html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>testen foli</title> 
<style type="text/css"> 
<!-- 
body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #FFFFFF; 
} 
body { 
background-color: #999999; 
} 
.style1 {font-size: 24px} 
.style2 {font-size: 18px} 
.style3 {font-size: 16px} 
--> 
</style></head> 

<body> 
<table width="710" border="2" cellpadding="0"> 
<tr> 
<td width="100" bgcolor="#666666"><div align="center">Frankrijk</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Duitsland</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Nederland</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Tsjechië</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Portugal</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Italie</div></td> 
<td width="100" bgcolor="#666666"><div align="center">Uitstappen</div></td> 
</tr> 
</table> 
<p>&nbsp;</p> 
<table width="800" height="400" border="2" cellpadding="0"> 
<tr> 
<td width="520" ><div align="center"> 
<table width="510" height="350" border="2" cellpadding="0"> 
<tr> 
<td><div align="center" class="style1">Grote foto </div> 
<p><br /> 
</p> 
<p><span class="style2">naast kleine foto's zou ik graag een scrolbar hebben </span></p> 
<p class="style3">de afmetingen van de hoofd tabel is groter geworden </p></td> 
</tr> 
</table> 
</div></td> 
<td width="13" >&nbsp;</td> 
<td width="230" >
<iframe style="width: 252px; height: 359px" src="foto.html">title="photobox" frameborder="0" SRC="foto.html" scrolling="auto" style=" width:230px; height:350px;" name="foto"</iframe>
</td>
</tr> 
</table> 
<p class="style2">&nbsp;</p> 
</body> 
</html>
                  a-De waarden width en height moet je zelf aanpassen aan de width (breedte) en height (hoogte) van je foto.
                  b-Ook de juiste benaming en omschrijving van de foto ingeven
                  c-Bewaar deze pagina.

                  Maak vervolgens een nieuwe pagina aan (fotos.html) waar je de foto's plaatst die in het iframe moeten getoond worden.
                  Een uitgewerkt voorbeeld zie je hieronder

                  Code: Selecteer alles

                  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foto's</title>
</head>
<body>
<table style="align=center">
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 1</td>
		<td>tekst 2</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 3</td>
		<td>tekst 4</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 5</td>
		<td>tekst 6</td>
	</tr>
	<tr>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
		<td><img src="foto_bestandsnaam.jpg" width="100" height="75" alt="foto omschrijving" border="0"></td>
	</tr>
	<tr>
		<td>tekst 7</td>
		<td>tekst 8</td>
	</tr>
</table>
</body> 
</html>
                  a-Ook hier weer zelf de nodige aanpassingen doen in width en height en foto bestandsnaam
                  b-Achtergrondkleur ed. kan je ook hier opnemen;
                  c-Bewaar de pagina als fotos.html
                  d-Je kan natuurlijk zoveel foto's plaatsen als je zelf wil

                  Beide html pagina's en foto's opladen naar je host server.
                  Behoud de structuur op de host server die je op je harde schijf hebt toegepast.

                  Is het dit wat je bedoelt ?

                  mvg,
                  Coderunner
                    Citeer
                    Gast 06 nov 2007, 18:33
                    Duiver schreef:[...] wat doe ik nu verkeerd??????
                    Tja... Als je in die derde kolom een tabel plaatst gevuld met de nodige <td>'s, dan wordt die tabel steeds hoger.
                    Die tabel in de laatste kolom zou eigenlijk een iFrame moeten zijn met een vaste hoogte.

                    Ik ken Dreamweaver niet, maar ik meende dat de meeste html-opmaakprogramma's toestaan om rechtstreekt in de html-code in te grijpen?
                    Dan moet er op die manier toch een iFrame in te voegen zijn, lijkt me!?

                    Laatst gewijzigd door Gast op 17 nov 2007, 12:51, 1 keer totaal gewijzigd.

                      Citeer
                      duiver Startte dit onderwerp 08 nov 2007, 12:41 wijnegem 9 berichten
                      coderunner & Kobbe

                      Met de spontane hulp van jullie is het gelukt om de pagina klaar te krijgen zoals gevraagd was. Heb het uitgetest in een proef opstelling en werkt uitstekend. Maar heb nu een andere vraag.
                      Had de bedoeling zoals op mijn website pagina Reisverhalen de kleine foto's bij het overgaan van de muis deze te laten verschijnen waar de grote foto staat. Heb dit gedaan via Dreamweaver - Behaviors -Onmouseover-onmouseout nu lukt het niet via deze weg omdat ik nu met 2 pagina's moet werken.
                      De bedoeling van deze opstelling is dat de pagina steeds kan blijven bestaan en regelmatig foto's kan bijvoegen.
                      Hebben jullie soms een oplossing via HTML of andere oplossing voor dit probleem.
                      Nogmaals bedankt voor de goede hulp en nuttige info.
                      websit : http://www.foli.be
                      groetjes
                      duiver
                        Citeer
                        coderunner 09 nov 2007, 06:25 Aubauke - Aentwaerepe 1.828 berichten
                        duiver schreef:De bedoeling van deze opstelling is dat de pagina steeds kan blijven bestaan en regelmatig foto's kan bijvoegen.
                        Hebben jullie soms een oplossing via HTML of andere oplossing voor dit probleem.
                        Beste duiver,

                        Ga naar de site van CSS Play - A Scrolling Photograph Gallery en bekijk de broncode. Daar staat een voorbeeld van hetgeen jij wil maken. Alleen staan de thumbnails niet rechts maar onder de vergrootte foto. Maakt geen gebruik van de tag <iframe> en alles is met CSS style sheet opgemaakt. Misschien kan je daar al mee verder.

                        mvg,
                        Coderunner
                          Citeer
                          duiver Startte dit onderwerp 11 nov 2007, 15:04 wijnegem 9 berichten
                          coderunner

                          Bedankt voor je info heb het eens bekeken en uitgetest maar resultaat is niet wat ik in gedachten had. Zal het verlopig wel bij het oude houden, tot er misschien iets anders komt, om uit te werken.

                          in ieder geval bedankt voor de tijd dat je hier aan verspilt hebt.
                          Door zulke mensen kunnen vele mensen geholpen worden om hen hobby verder te kunnen uitwerken .
                          nogmaals bedankt en hoop in de toekomst nog op je hulp te kunnen rekenen.
                          groetjes duiver
                            Citeer
                            coderunner 12 nov 2007, 14:41 Aubauke - Aentwaerepe 1.828 berichten
                            duiver schreef:in ieder geval bedankt voor de tijd dat je hier aan verspilt hebt.
                            Beste duiver,

                            Dat was graag gedaan en bedankt om dit hier te melden.

                            mvg,
                            Coderunner
                              Citeer

                              Schrijf gerust een antwoord

                              Om te antwoorden heb je een gratis account nodig. Heb je al een account, klik dan op "Aanmelden". Via "Gratis account maken" maak je er eenvoudig een in enkele minuten.

                              Aanmelden Gratis account maken