Horizontale scrollbalk in div
Het gaat erom dat in het linker plaatje is de scrollbar te breed en lopen de lijnnummers door. In het rechterplaatje zie je dat de scrollbar niet wijd genoeg is, maar daarentegen werken de regelnummers wel weer goed.
Hoe krijg ik beide goed?
# Opmaak voor de regelnummers:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.num {
float: left;
color: gray;
font-size: 13px;
font-family: monospace;
text-align: right;
margin-right: 6pt;
padding-right: 6pt;
border-right: 1px solid gray;}
</style>
.num {
float: left;
color: gray;
font-size: 13px;
font-family: monospace;
text-align: right;
margin-right: 6pt;
padding-right: 6pt;
border-right: 1px solid gray;}
</style>
## Highlightfunctie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function customHighlight($code){
$code = highlight_string(htmlspecialchars_decode(strip_tags($code[1])), true);
$aLines = explode("<br />", $code);
$iLines = count($aLines);
$output = "<br /><table style=\"width: auto;\"><tr><td><b>PHP code</b></td></tr><tr><td class=\"num\">\n";
for($i = 1; $i <= $iLines; $i++){
$output .= $i ."<br />";
}
$output .= "\n</td><td style=\"overflow-x:scroll;display: block;width:80%;\">\n$code\n</td></tr></table>";
return $output;
}
$code = highlight_string(htmlspecialchars_decode(strip_tags($code[1])), true);
$aLines = explode("<br />", $code);
$iLines = count($aLines);
$output = "<br /><table style=\"width: auto;\"><tr><td><b>PHP code</b></td></tr><tr><td class=\"num\">\n";
for($i = 1; $i <= $iLines; $i++){
$output .= $i ."<br />";
}
$output .= "\n</td><td style=\"overflow-x:scroll;display: block;width:80%;\">\n$code\n</td></tr></table>";
return $output;
}
(niet letten op het script, dat heb ik ff als voorbeeld gebruikt :P)
Je kunt het op de volgende afbeelding zien..
![http://img25.imageshack.us/img25/1544/phphulp.th.jpg[/IMG][/URL]](http://img25.imageshack.us/i/phphulp.jpg/)
Gewijzigd op 01/01/1970 01:00:00 door Henk en Annie
Gesponsorde koppelingen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
#test {
display: block;
width: 150px;
border: 1px solid #000000;
overflow: auto;
white-space: nowrap;
}
</style>
</head>
<body>
<table id="test">
<tr>
<td>1<br />2<br />3<br />4</td>
<td>Code lijn1<br />Code lijn2<br />Code lijn 3<br />Code lijn 4. Die uiteraard een beetje te lang moet zijn om het voorbeeld te demonstreren</td>
</tr>
</table>
</body>
</html>
Waarom het allemaal niet werkt, moet je mij niet vragen... Maar het zou kunnen zijn dat je IE gebruikt :P
Ik heb het opgelost met div's.
De width is nu precies goed in te stellen.
Alleen zijn nu de regelnummers nog steeds te ver...
Quote:
Wat bedoel je daarmee? Misschien een voorbeeldje online zetten (geen foto, maar een echt voorbeeld)?Alleen zijn nu de regelnummers nog steeds te ver...
volgens mij komt het omdat de highlight de lange zinnen afsnijdt en de regelnummers wel laat zien.
omdat er een scrollbalk komt kan he tin één zin.
volgens mij komt het hierdoor, maar ik weet niet hoe ik dit oplos.
