Scrolbare tabel in dreamweaver

[Ludo3]

Hallo allemaal,

Ik gebruik dreamweaver voor het maken van enkele simpele websites. Nu heb ik een pagina gemaakt die gecentreerd staat in het midden, en het is een pagina van 800x600 met verschillende info op dezelfde formaat pagina. Ik wil alles binnen die kaders houden en nu moet ik op één van de paginas teveel tekst in een tabel weergeven dus wil ik een scrolbare tabel maken.
Op een of andere manier lukt het me niet, als ik een laag aanmaak kan ik hem scrolbaar krijgen maar dan blijft hij niet op de goede plaats binnen het 800x600 veld, omdat de laag gecentreerd staat met de x-y coordinaten, alle opties geprobeerd maar het lukt niet. Nu werd me verteld dat ik een css style kon maken voor een tabel zodat ik gewoon een tabel toe kon voegen in de site maar wat ik ook probeer, het lukt me niet, ik heb het boek dreamweaver voor dummies maar kan hier geen oplossing in vinden. Ik voel me echt een dummie...
Hoe kan ik een laag invoegen van 640x475 in een bestaande gecentreerde laag van 800x600 die op z`n plaats blijft en scrolbaar is? Voor alle ander pagina`s heb ik de tekst en fotos in een laag staan, maar die pagina`s bevatten niet zoveel tekst dus dat past allemaal wel.

Ik hoop dat iemand hier een oplossing voor heeft.

Groeten,

Ludo

 

[csshunter]

Hoi Ludo,

<div style="margin-left: 100px; width: 400px; height: 200px; overflow: auto;">
<h1>Scrollbare div</h1>
<p>O wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt o wonder wonder wonder het werkt o
wonder wonder wonder het werkt</p>
<h2>Prachtig toch?</h2>
</div>

Wat gebeurt er als je zoiets erin plakt?

Meer: http://www.handleidinghtml.nl/css/css-oud/position.htm#overflow

Groetjes,
CSS-Hunter

 

[Ludo3]

Dat werkt!

Is het mogelijk om deze code in CSS op te slaan?

Thanks!

 

[csshunter]

opslaan in css

Jazeker!
Dan geef je de <div> een persoonlijk ID:

<div id="scrollingbox">
   <h1>Scrollbare div</h1>
   <p>O wonder wonder wonder ... enz.</p>
</div>

En in je stylesheet zet je:

#scrollingbox {
   width: 400px; 
   height: 200px; 
   margin-left: 100px;
   overflow: auto;
   }

Succes!
CSS-hunter

 

[Ludo3]

Jazeker!
Dan geef je de <div> een persoonlijk ID:

<div id="scrollingbox">
   <h1>Scrollbare div</h1>
   <p>O wonder wonder wonder ... enz.</p>
</div>

En in je stylesheet zet je:

#scrollingbox {
   width: 400px; 
   height: 200px; 
   margin-left: 100px;
   overflow: auto;
   }

Succes!
CSS-hunter

Thanks!

Heb ik nog een klein probleem, ik heb de pagina getest in verschillende browsers, nu gaat ie in Google Chrome en IE goed, maar in FireFox krijg ik een grote fout in de pagina.

Check de sitepagina http://www.gommersgrondwerken.nl/historie.htm

In Firefox is er geen scroll en de bovenste helft van de pagina is leeg (?)

 

[csshunter]

Hoi Ludo,
Heb je eerst met de HTML-validator en met de CSS-validator getest?

• Er zitten 36 html-fouten in (er ontbreken o.a. wat </div>'jes),
• en 1 css-fout.

Firefox reageert hier nogal spontaan op: geen correcte code, geen correcte pagina!
Wat gebeurt er na reparatie?

Gegroet,
CSS-hunter

 

[Ludo3]

Hoi Ludo,
Heb je eerst met de HTML-validator en met de CSS-validator getest?

• Er zitten 36 html-fouten in (er ontbreken o.a. wat </div>'jes),
• en 1 css-fout.

Firefox reageert hier nogal spontaan op: geen correcte code, geen correcte pagina!
Wat gebeurt er na reparatie?

Gegroet,
CSS-hunter

Ik heb geen idee hoe ik de code kan testen en repareren met Dreamweaver, tot nu toe werkte alles. Ik heb meer sites, misschien zitten daar dan ook fouten in, alleen zou ik niet weten hoe ik daar iets aan kan doen

 

[csshunter]

Hoi Ludo,
Tja, het is regelmatig nattigheid met de zg. What-You-See-Is-What-You-Get editors als Dreamweaver, Frontpage enz. (om van CoolPage of MS Publisher maar te zwijgen). Ze doen een aantal dingen vanzelf (soms ook waar je niet om gevraagd hebt), en ze doen ook een aantal dingen niet (waar je juist wel behoefte aan hebt).
Ik werk daarom op z'n Spartaans: rechtstreeks in de html-code; vandaar is het Kladblok mijn beste vriend. - Voordeel is dat je alles volstrekt zelf in de hand hebt (ook je fouten!). Nadeel is dat je op een of andere manier een jaar of wat aan "Spartaanse training" moet doen, voor dat je het begint te beheersen.

Terug naar af!
Als het goed is, kan je in Dreamweaver óók rechtstreeks in de code werken ("onder water kijken" zeiden we in de tijd van WordPerfect, toen Word er nog niet was). Ergens in het menu of in de knoppenbalken moet een optie "Broncode" of "Code View" zitten.
Als je daar binnen bent, zie je op een gegeven moment staan:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
  <div align="left">
  <h1 class="header"><p align="left" class="verdana">
  <div style="margin-left: 0px; width: 640px; height: 400px; overflow: auto;">
  </h1>
          <h1 class="header">&nbsp;</h1>
          <h1 class="header">Bedrijfshistorie</h1>
... enz.

Dat moet worden:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
   <div style="margin-left: 0px; height: 400px; overflow: auto;">
     <h1 class="header">&nbsp;</h1>
     <h1 class="header">Bedrijfshistorie</h1>
... enz.

Aan het eind van de historie staat:

... tot een geheel worden gevoegd. </p>

   </div>&nbsp;</p>
   <div align="left">
<!-- #EndEditable -->

Dat kan je veranderen in:

... tot een geheel worden gevoegd. </p>

   </div>
<!-- #EndEditable -->

Wat gebeurt er als je 'm zo opslaat en upload? Bij mij swingt ie er zo ook in Firefox prettig in. Prettige bijkomstigheid: ook Internet Explorer blijft het doen.

• Edit: was dat maar waar! IE heeft toch een text-align:left nodig, anders zet die (ten onrechte) alle teksten gecentreerd, dus wordt het:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
   <div style="margin-left: 0px; height: 400px; overflow: auto; text-align: left;">
     <h1 class="header">&nbsp;</h1>
     <h1 class="header">Bedrijfshistorie</h1>
... enz.

De andere foutjes zijn minder essentieel: die laten we maar rustig zitten, stel ik voor.

O ja, in de css bij .layerscroll moet je even komma's tussen de auto's van de clip zetten, dan is dat ook meteen verholpen (ook in codeview). *)

Succes,
CSS-hunter

*) Dat lijkt er wel eentje voor een quiz:
VRAAG: "In welke branche zegt men: je moet even komma's tussen de auto's van de clip zetten?"
ANTWOORD:

1. In een video-montage studio.
2. In een garage.
3. In de webdesign wereld.

 

[Ludo3]

Hoi Ludo,
Tja, het is regelmatig nattigheid met de zg. What-You-See-Is-What-You-Get editors als Dreamweaver, Frontpage enz. (om van CoolPage of MS Publisher maar te zwijgen). Ze doen een aantal dingen vanzelf (soms ook waar je niet om gevraagd hebt), en ze doen ook een aantal dingen niet (waar je juist wel behoefte aan hebt).
Ik werk daarom op z'n Spartaans: rechtstreeks in de html-code; vandaar is het Kladblok mijn beste vriend. - Voordeel is dat je alles volstrekt zelf in de hand hebt (ook je fouten!). Nadeel is dat je op een of andere manier een jaar of wat aan "Spartaanse training" moet doen, voor dat je het begint te beheersen.

Terug naar af!
Als het goed is, kan je in Dreamweaver óók rechtstreeks in de code werken ("onder water kijken" zeiden we in de tijd van WordPerfect, toen Word er nog niet was). Ergens in het menu of in de knoppenbalken moet een optie "Broncode" of "Code View" zitten.
Als je daar binnen bent, zie je op een gegeven moment staan:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
  <div align="left">
  <h1 class="header"><p align="left" class="verdana">
  <div style="margin-left: 0px; width: 640px; height: 400px; overflow: auto;">
  </h1>
          <h1 class="header">&nbsp;</h1>
          <h1 class="header">Bedrijfshistorie</h1>
... enz.

Dat moet worden:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
   <div style="margin-left: 0px; height: 400px; overflow: auto;">
     <h1 class="header">&nbsp;</h1>
     <h1 class="header">Bedrijfshistorie</h1>
... enz.

Aan het eind van de historie staat:

... tot een geheel worden gevoegd. </p>

   </div>&nbsp;</p>
   <div align="left">
<!-- #EndEditable -->

Dat kan je veranderen in:

... tot een geheel worden gevoegd. </p>

   </div>
<!-- #EndEditable -->

Wat gebeurt er als je 'm zo opslaat en upload? Bij mij swingt ie er zo ook in Firefox prettig in. Prettige bijkomstigheid: ook Internet Explorer blijft het doen.

• Edit: was dat maar waar! IE heeft toch een text-align:left nodig, anders zet die (ten onrechte) alle teksten gecentreerd, dus wordt het:

<td width="619"><!-- #BeginEditable "EditRegion1" -->
   <div style="margin-left: 0px; height: 400px; overflow: auto; text-align: left;">
     <h1 class="header">&nbsp;</h1>
     <h1 class="header">Bedrijfshistorie</h1>
... enz.

De andere foutjes zijn minder essentieel: die laten we maar rustig zitten, stel ik voor.

O ja, in de css bij .layerscroll moet je even komma's tussen de auto's van de clip zetten, dan is dat ook meteen verholpen (ook in codeview). *)

Succes,
CSS-hunter

*) Dat lijkt er wel eentje voor een quiz:
VRAAG: "In welke branche zegt men: je moet even komma's tussen de auto's van de clip zetten?"
ANTWOORD:

1. In een video-montage studio.
2. In een garage.
3. In de webdesign wereld.

Bedankt voor je reactie nogmaals, ik dacht wel dat het in de code zou zitten. Helaas is dat abra cadabra voor mij. Ik heb ook geen idee hoe ik die fouten kan herstellen. Ik zou voor antwoord 2 kunnen kiezen.

Het probleem is dat ik niets van code weet en in dreamweaver heb leren werken omdat ik dat wel kan plaatsen.
Ik heb nog een andere site voor mezelf, en die is nogal wat complexer, er staan ook videos op en allerlei links voor affiliate programs. Alle codes voor video en pop ups krijg ik werkend door ze te kopieren uit sitepagina`s van andere websites die dezelfde functie bieden. Met handleidingen lukt het me nooit om iets überhaupt werkend te krijgen.
Ik heb al eens eerder gekeken met die validator tools, maar ik heb zoveel fouten in m`n site dat ik het maar laat rusten. De site ziet er goed uit in alle browsers incl MAC browsers. Als voorbeeld, ik heb de code genomen van een oude site waar ik deze site op gebaseerd heb. Daar stond geen HTML aanduiding boven in de eerste regel en de validator geeft dat ook aan, alleen als ik dat aanpas in mijn site, heb ik ineens 1000 (!) meer fouten op 1 pagina.
Verder geeft de validator dingen aan in codes en links, ook in codes die ik gebruik van affiliate programs. Als ik deze codes aanpas, werken ze niet meer correct. Ik heb meerdere malen getest en kom geen stap verder.
Kortom, ik kan er niets mee, ik zie soortgelijke sites en als ik die met validtors bekijk, kloppen die wel, ik heb geen idee waarom bij mij niet.
Zijn hier advies topics voor of zelf programma`s of functies binnen dreamweaver die ik kan gebruiken om de site foutloos te krijgen? Misschien scheelt dit ook in de zoekpositie in google?

 

[csshunter]

bespiegelingen ...

Hoi Ludo,
Om te beginnen vind ik de site gommersgrondwerken.nl heel behoorlijk voor iemand die geen verstand heeft van codes en daarom Dreamweaver niet kan controleren/corrigeren. Mooi werk, toch?!

@Dreamweaver
Die moet inderdaad af en toe een corrigerend code-tikje krijgen, want levert niet alles mooi af. Kan jij niets aan doen.

@HTML-errors
Het gros van de Errors van de html-editor zit 'm in ontbrekende alt="" attributen bij de image of area elementen. Die moeten er officieel (volgens de W3C HTML voorschriften) in staan, maar Dreamweaver doet dat kennelijk niet automatisch. Daar zit je dan!
Betekenis: als iemand geen plaatjes kan zien (bv. een blinde die de site laat voorlezen door een speciale tekst-voorleesbrowser), moet er kort omschreven worden wat er op dat plaatje staat. Vooral als het essentiele plaatjes zijn zoals een menu-knop waar je op moet kunnen klikken. Dan kan een alt-tekst zijn: alt="bedrijfshistorie", alt="activiteiten", enz. Dat het een link is, wordt al opgemerkt en aangegeven door het voorleesapparaat; en zo weet je ook waar die link naar toe gaat.
Waarschijnlijk zit er in Dreamweaver bij het plaatsen van een image wel ergens een optie om de alt-tekst in te voeten; maar dat moet je maar weten.
Voor plaatjes met alleen maar een versierende functie hoef je niet persé een alt-tekst op te geven, maar de regelen der html-kunst schrijven voor dat je dan wel een "leeg" alt-attribuut moet gebruiken: alt="". Ontbreekt dat, dan is het een "fout", maar voor de bezoeker maakt het niets uit.

@HTML aanduiding boven in de eerste regel
Dat is de omschrijving van het DOC-type, en nogal belangrijk voor de interpretatie door browsers van alles wat erna komt! Bij het inplakken van de verkeerde komen er soms inderdaad opeens honderden fouten bij. Bv. als je "gewone html" in je doc-type hebt staan, moet de verwijzing naar een image zijn:

<img src="images/plaatje.gif" width="250" height="150" alt="foto grondwerk">

Maar als het doc-type een zogenaamde "xhtml" benadering voorschrijft, dan moet er een slash op het eind staan:

<img src="images/plaatje.gif" width="250" height="150" alt="foto grondwerk" />

Zo zijn er nog wat verschillen die invloed hebben op het validatie-resultaat.
Maar de in omloop zijnde browsers beginnen meer en meer dezelfde interpretatie aan te houden bij een ontbrekend doc-type, en als de site er in verschillende browsers goed uitziet, ach, dan moet het maar.
En als je de kans krijgt bij een nieuwe pagina: kies dan altijd voor de "strict" variant, die levert de meeste unanimiteit in de browser-resultaten op.

@codes van ingebouwde affiliate programs
Ja, die zijn van buitenaf niet te beinvloeden, daar kan je bij html- of andere errors weinig aan doen. Ik betrap soms Google ervan dat die ook ongeldige codes aflevert. Zolang de pagina van jou doet wat je verwacht: niets van aantrekken.

@soortgelijke sites valideren wel
Ja, die zijn waarschijnlijk niet met Dreamweaver gemaakt, en/of naderhand goed handmatig gecorrigeerd.

@programma's of functies binnen dreamweaver die ik kan gebruiken om de site foutloos te krijgen.
Ik ken Dreamweaver niet goed genoeg om dat te kunnen zeggen. Misschien iemand anders?
Wat bijvoorbeeld wel kan, is om de add-on HTML-validator (HTML Tidy) voor Firefox te donloaden. Als je dan in Firefox op Bestand > Paginabron klikt, krijg je een foutenoverzicht en wat uitleg erbij. Het vergt wel wat studie om te weten te komen hoe de html code er precies uit moet zien volgens de voorschriften! (bv. deze html4.01 regels).
Dan zou je in Dreamweaver naar codeview moeten gaan, en daar de verbeteringen aanbrengen.
Of, misschien wel zo makkelijk, iemand zoeken die al wel de html-taal goed beheerst, en het in een handomdraai voor jou kan doen.

@Misschien scheelt dit ook in de zoekpositie in google
Jazeker: hoe beter de code, hoe hoger in Google. Bv. een goede pagina-structuur volgens de koppen en subkoppen h1, h2, enz. scheelt ook weer iets (als je de sleutelwoorden ook in je koppen hebt zitten). Van dat soort dingen! Zie ook de Google webmastertips.

Samengevat: websites maken met valid code vergt behoorlijk wat lees- en leerwerk. Bv. de Handleiding HTML helemaal doornemen en regelmatig erop na slaan (incl. het CSS-deel). Mijn ervaring: je moet er tijd voor over hebben, maar het wordt wel hoe langer hoe leuker!

Met vriendelijke groet,
CSS-hunter

 

[Ludo3]

Ok in dat geval zal ik me moeten gaan verdiepen in de fouten, ik heb meer traffic nodig voor m`n site, al staat ie al wel in google met veel pagina`s.

Bedankt voor de hulp.

Als de html aanduidingsregel ontbreekt bovenaan, kan er dan niets meer aan gedaan worden of moet ik gewoon een andere type inzetten om meerdere fouten te voorkomen?

 

[csshunter]

DOC-type wisselen

Aan de DOC-type regeltjes is ook achteraf nog wat te doen (weer in codeview).
Het makkelijkst is om de html-validator het werk voor je te laten doen.
Voorbeeld: we nemen deze forum-pagina.

• De html-validator zegt hier: 158 Errors, 5 warning(s)

Nu gaan we in de validator rapportage-pagina naar het Doctype in de 8e regel van boven. Gedetecteerd is: "XHTML 1.0 Transitional", zegt ie.
Het uitrolvakje erachter staat op "(detect automatically)". Daar maak je nu bv. van: "HTML4.01 Transitional".
In het optievak eronder vink je even "Show Source" aan, en dan klik je de knop "Revalidate".

• De html-validator zegt nu blij: 47 Errors, 283 warning(s).

Dat is al een heel stuk beter!
Kennelijk was het helemaal geen XHTML, maar gewone HTML. Dan hoeven in elk geval veel minder echte fouten weggewerkt te worden.
De fouten zijn eronder aangegeven met een rood bolletje met wit kruisje, de waarschuwingen als een uitroepteken-verkeersbordje.
Bij elke fout/waarschuwing staat een aanklikbaar regelnummer: Line 2, enz. Klik je op het nummer, dan kom je meteen in de coderegel terecht waar die fout staat.
In dit geval zijn er (o toeval!) veel fouten door de weglating van het alt="" attribuut bij de images. Maar dat kunnen we slim geautomatiseerd oplossen!

• Alle images beginnen met <img ... en dan de rest.
• We pakken in codeview de functie Zoek & Vervang:
  Zoek: <img(spatie)
  Vervang door: <img alt=""(spatie)
  Klik! Klaar!

Zo kan je vaak ook andere herhaalfouten makkelijk corrigeren, in dit geval bv.:

• Zoek: <br /> (dat is de geldige xhtml-notatie)
  Vervang door: <br> (dat is de geldige html-notatie)
  Klik, en roetsj!

Als je de bulk van deze dingen hebt gecorrigeerd, valt het opeens weer mee!

Zoiets, dus.
Met groeten
CSS-hunter

 

[meerweten]

re:

je kunt ook een iframe gebruiken

voor moest je het niet weten een iframe laad andere pagina's op je eigen pagina

voorbeeldje

<iframe scrolling="yes" name="iframe" SRC="http://users.telenet.be/ruw/proef" WIDTH="1000px" HEIGHT="700">

 

[csshunter]

je kunt ook een iframe gebruiken

Dat kan inderdaad ook.
Maar waarom zou je een iframe gebruiken (d.w.z. twee html pagina's maken voor de content van 1 pagina), met alle nadelen van iframes erbij, terwijl het met een simpele {overflow: auto;} opgelost kan worden? Snap ik niet!

Met vriendelijke groet,
CSS-hunter