Tjena
Har gjort en grej där jag presenterar olika kodstycken.
Använder min av divar samt <pre> för att få en snygg formatering av innehållet.
Nu har jag ett litet problem, det är så att höjden på pretaggarna blir automatiskt ~30px, vilket jag inte alls vill, dom får vara MAX 15px.
Förstår inte riktigt hur jag ska lösa det här, har provat att sätta height, line-height, padding, margin mm på pretaggen, men utan resultat.
Det verkar nästintill omöjligt att ändra det här.
Några förslag på hur jag ska fixa det här?
Har kollat runt på det 20-tal trådar som tar upp <pre> taggen, men hittar ingen som tidigare tagit upp mitt problem.
Tack!
Engine^Medlem sedan dec. 20003 887 inlägg Istället för att använda <pre> kan du ta en <span> (eller annan praktisk) och sätta white-space:nowrap på den.
zcorpanMedlem sedan dec. 20042 245 inlägg pre { max-height:15px; margin:0; padding:0; background:lime; }
:q
Engine^ skrev:
Istället för att använda <pre> kan du ta en <span> (eller annan praktisk) och sätta white-space:nowrap på den.
Hmm, det funkar nästan.
Det ser rätt ut, problemet blir att när man markerar allt som visas, kopierar och sen ska klistra in någonstans, så hamnar allt på en lång rad.
Radbrytningarna kommer alltså inte med, hur löser man det?
zcorpanMedlem sedan dec. 20042 245 inlägg
MickeA.com skrev:
Radbrytningarna kommer alltså inte med, hur löser man det?
...med <pre> ;)
Jag förstår inte problemet. :l Du kan ju sätta white-space:nowrap på <pre> lika gärna.
zcorpan skrev:
Jag förstår inte problemet. :l Du kan ju sätta white-space:nowrap på <pre> lika gärna.
Ja visst kan jag det, fast då funkar det inte, "tabbstegen" som ska vara i koden finns inte då.
Response.Write( "<div id=""rad" & intID & "_" & t & """ class=""rad"">" & t + 1 & ":</div>" &_
"<div id=""kod" & intID & "_" & t & """ class=""kodrad"" style=""background-color: " & bgColor1 & ";"">" &_
"<pre style=""white-space: nowrap; padding-left: 5px;"">" & cRow & "</pre>" &_
"</div>")
Somsagt, det blir jättebra om jag endast kör med <pre>, men då blir varje rad ~30px hög, vilket jag inte vill.
Om jag strunar i pretaggen och sätter white-space: pre; på diven så funkar det, men även då blir raderna för höga.
Såg gärna till om ni vill se mer kod.
Kan ju tillägga att detta skrivs ut i en loop från en array.
zcorpanMedlem sedan dec. 20042 245 inlägg Det verkar som du tänkt använda en <pre> per kodrad, vilket är väldigt onödigt. Använd en <pre> för hela kodstycket istället, så får du normal radhöjd. Om du vill ha stilregler för varje rad kan du använda ett annat element för det...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PRE</title>
<style type="text/css">
pre { counter-reset:i; }
pre code.l::before { content:counter(i) ". "; counter-increment:i; }
</style>
</head>
<body>
<p>Lite exempelkod:</p>
<pre><code class="l">function foo(bar) {</code>
<code class="l"> return (bar) ? bar : false;</code>
<code class="l">}</code></pre>
</body>
</html>
:)
Hmm, problemet är att jag har en div / rad eftersom jag har radnumrering, som man sedan ska kunna visa / dölja.
Därför måste jag ha det uppbyggt på det sätt jag har.
Fler förslag?
zcorpanMedlem sedan dec. 20042 245 inlägg Använd span istället för div?
Problemet är att när du lägger en block-box i en annan box som har white-space:pre, så blir det "dubbla" radbrytningar. En radbrytning för white-space:pre och en "radbrytning" för display:block.
zcorpan skrev:
Använd span istället för div?
Hmm, ok, har du lust att modifiera min kod ovan så det blir "rätt", är inte riktigt med i matchen.
Tack!
Engine^Medlem sedan dec. 20003 887 inlägg Det borde väl fungera om du omsluter <code></code> med <span onclick="toggleLine( this );">...</span>
Engine^ skrev:
Det borde väl fungera om du omsluter <code></code> med <span onclick="toggleLine( this );">...</span>
Nu är jag ännu mindre med i matchen.
Vad menar du med det där? "toggleLine();" är väl en funktion? Vad kommer den ifrån och vad gör den?
Engine^Medlem sedan dec. 20003 887 inlägg Jag menade att det är funktionen som döljer/visar den raden.
Jaha, nej, funkar inte så.
Hade tänkt att det ska bli såhär:
1. <html>
2. <head>
3. <title>Test</title>
4. </head>
5. </html>
Sen ska man kunna ta bort radnumreringen, dvs. dölja de divarna, alla eller inga.
Problemet är som sagt endast hur jag ska få till ev. tabbsteg och mellanslag i min utskrft.
zcorpanMedlem sedan dec. 20042 245 inlägg Det är för övrigt exakt mitt kodexempel gör i #7, bortsett från att det inte fungerar i IE. ;)
Anyway, jag har sett det lösas genom att använda en <ol> också:
<ol>
<li><pre><html></pre></li>
<li><pre> <head></pre></li>
<li><pre> <title>Test</title></pre></li>
<li><pre> </head></pre></li>
<li><pre></html></pre></li>
</ol>
ol pre { margin:0; }
:)
Engine^Medlem sedan dec. 20003 887 inlägg Men hur gör man då för att dölja radnumren?
Men det här måste gå att lösa på nått annat sätt.
Tex, Php-Portalen har ju samma princip med radnummer och <pre> och allt och det funkar i alla webläsare så vitt jag vet.
Konstigt?
Nu har jag fått till det halvdant, det funkar nästan som jag vill.
Nu är det bara en sak som återstår, jag använder pasern "colorCode" från Pellesoft för att färglägga aspkoden.
Använder jag mig av den, så blir raderna 30px höga, använder jag den inte blir det rätt.
Alltså måste felet finns i den filen.
Tidigare så lade den till <font color="färgen">sak att färglägga</font> i koden när det fanns något att färglägga.
Men det gillade inte validatorn av någon anledning, så ändrade alla <font> till <span style="">.
Kan det ha med höjdproblemet att göra?
Skicka med filen if. nån vill ta en titt.
Engine^Medlem sedan dec. 20003 887 inlägg Har inget speciellt med funktionen att göra utan det beror på hur din css ser ut.
Har du möjlighet att lägga upp en länk till hur det ser ut nu?
Här är en länk:
http://mickea.gotdns.org/_asp/paste2/default.asp?p=show&pId=295
Ska tillägga att jag inte använder aspparsern i exemplet ovan.
Då ser du att det ser "bra" ut.
Använder jag därimot den, dvs. massa <span></span> läggs till, då blir raderna för höga.
