hoe scrollbars installeren?

Status
Niet open voor verdere reacties.
mutley

mutley

Gebruiker
Lid geworden
4 okt 2006
Berichten
24
Ik ben bezig met de opbouw van een site in tabelvorm en wil op drie plaatsen een scrollbar installeren. Dit lukt me eigenlijk niet en de informatie die ik op t net vind helpt me niet direkt vooruit. Hoe moet dit gebeuren, met een CLASS of een gewone CSS?

Ik heb een basislay-out bijgevoegd om mijn vraag wat te verduidelijken. De tabelvakken in rood moeten een (vertikale) scrollbar krijgen zodat de inhoud tevoorschijn kan komen. De tabelvakken errond zijn bedoeld om statisch te blijven, bovenaan heb je header en navigatie tabelvak.

Iemand die me van antwoord kan dienen?
 

Bijlagen

  • Vet1.jpg
    Vet1.jpg
    45 KB · Weergaven: 30
Als de inhoud van de betreffende pagina groot genoeg is, verschijnen er vanzelf scrollbalken lijkt mij...
 
helaas, helaas, driewerf helaas, dat was ook mijn idee maar als ik er data in plaats, past de browser zelf de grootte aan. Wat de lay-out nefast beïnvloed.
 
Met welke tag heb je die drie velden gemaakt?
Zijn dat gewone cellen van de tabel?

Greetz : Jer:cool:en.
 
Ja gewone tabelvelden. Moeten deze soms een andere tag krijgen?
 
Je kan binnen die cellen div-tags gebruiken die je een style (css) meegeeft :

Code: 
style="overflow:auto"  of style="overflow:scroll"

Kan ook in je css :

Code: 
div {
overflow:auto;
}

of

div {
overflow:scroll;
}

Greetz : Jer:cool:en.



[Mod-edit] Code-tags geplaatst. [/edit]
 
Laatst bewerkt door een moderator:
Hey Jeroen,

Bedankt voor je reactie maar kun je me even tonen hoe dit inhet volgende voorbeeld geplaatst wordt? Mijn html basis is namelijk heel beperkt.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
  <tr> 
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
    <td height="500" align="center" bgcolor="#666633">
<h1><strong>Hier moet een vertikale scrollbalk komen</strong>indien dit nodig zou blijken.</h1></td>
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
  </tr>
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
</table>
</body>
</html>


Zo zullen ze toch min of meer opgebouwd worden in het eindresultaat.

Thx Mutley
 
De rode delen zijn bijgekomen :

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[color=red]<style type="text/css">
div {
overflow: scroll;
}
</style>[/color]
</head>

<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
  <tr> 
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
    <td height="500" align="center" bgcolor="#666633">
[color=red]<div id="geefhiereennaam">[/color]
<h1><strong>Hier moet een vertikale scrollbalk komen</strong>indien dit nodig zou blijken.</h1>
[color=red]</div>[/color]
</td>
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
  </tr>
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
</table>
</body>
</html>

of

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
  <tr> 
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
    <td height="500" align="center" bgcolor="#666633">
[color=red]<div id="geefhiereennaam" style="overflow:scroll">[/color]
<h1><strong>Hier moet een vertikale scrollbalk komen</strong>indien dit nodig zou blijken.</h1>
[color=red]</div>[/color]
</td>
    <td width="100" height="500" bgcolor="#333300">&nbsp;</td>
  </tr>
  <tr bgcolor="#333300"> 
    <td height="150" colspan="3">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Hier is een voorbeeld met de eerste mogelijkheid met een kleine verandering omdat ik de hooghte en breedte ook gedefinieerd heb zodat het voorbeeld duidelijk overkomt. Het resultaat met de tweede mogelijkheid is hetzelfde. Je moet dan wel iedere "<div>" apart zijn style meegeven binnen de tags.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
hey JeroenE,

bedankt voor de verduidelijking. Zoals veel oplossingen, krijgen we ook bij deze bijkomende vragen. Ik probeer 3 verschillende box formaten in te voegen maar krijg enkel het laatste formaat voor de 3 boxen. Hieronder zie je hoe ik dit gedaan heb. Wat is er verkeerd? Wat ontbreekt of moet verwijdert worden? Of moet er overal "DIV" aan toegevoegd worden en hoe dan?

Code: 
<style type="text/css">
div {
#box {
width:426px;
height:592px;
overflow:scroll;

#boxmembers {
width:278px;
height:361px;
overflow:scroll;

#boxlinks {
width:278px;
height:162px;
overflow:scroll;
}
</style>

en in de body staat dan in de resp. tabelcel:


Code: 
<td background="Img/afbeeldingen/BGR.gif"><div id="boxmembers">&nbsp;</td>


Alvast bedankt
Mutley
 
Laatst bewerkt:
oja, nog iets.

Is er een mogelijkheid om de horizontale scrollbalk NIET te tonen maar enkel de vertikale?
 
Dit :
mutley zei:
Code: 
<style type="text/css">
div {
#box {
width:426px;
height:592px;
overflow:scroll;

#boxmembers {
width:278px;
height:361px;
overflow:scroll;

#boxlinks {
width:278px;
height:162px;
overflow:scroll;
}
</style>
Klik om te vergroten...
wordt :
Code: 
<style type="text/css">
#box {
width:426px;
height:592px;
overflow:scroll;
[color=red]}[/color]
#boxmembers {
width:278px;
height:361px;
overflow:scroll;
[color=red]}[/color]
#boxlinks {
width:278px;
height:162px;
overflow:scroll;
}
</style>
of
Code: 
<style type="text/css">
[color=red]div .box[/color] {
width:426px;
height:592px;
overflow:scroll;
}
[color=red]div .boxmembers[/color] {
width:278px;
height:361px;
overflow:scroll;
}
[color=red]div .boxlinks[/color] {
width:278px;
height:162px;
overflow:scroll;
}
</style>
en dit :
mutley zei:
Code: 
<td background="Img/afbeeldingen/BGR.gif"><div id="boxmembers">&nbsp;</td>
Klik om te vergroten...
wordt :
Code: 
<td background="Img/afbeeldingen/BGR.gif"><div id="boxmembers">&nbsp;[color=red]</div>[/color]</td>

Om alleen de vertikale scrollbar te zien, verander je de "scroll" in "auto", maar dan zie je die alleen als de inhoud groter is dan de div zelf, dus als je inhoud kleiner (minder hoog) is, dan is die scrollbar ook niet zichtbaar.

Greetz : Jer:cool:en.
 
JeroenE you are a BLISS....:D

words can not express my graditude.

Mutley
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan