[CSS] Absolute position, maar niet zwevend..

[Keess]

Ik heb de mogelijkheid om code tussen [ php] en [ /php] tags te plaatsen, omdat de code vaak breder is dan de layout (440px) wordt de code geplaatst in een 'textarea' met deze CSS code:

code:

.sourceCode{
padding: 0px;
width: 440px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
font-size: 12px;
display: block;
position: relative;
}

Dat geeft dit resultaat:


Nu wil ik, net als dit op GoT mogelijk is, een knop hebben die ervoor zorgt dat het code gedeelte boven de layout komt, zodat niet de layout meeschuift met de breedte van de code, en de gehele code zichtbaar is (de breedte).

Zoals dit:


CSS:

code:

.sourceCodeAll{
padding: 0px;
width: auto;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
font-size: 12px;
display: block;
position: absolute;
}

Nu is de code wel in zijn geheel zichtbaar, alleen de onderliggende teksten verplaatsen zich onder de code.
Hoe is het mogelijk om die code wel in zijn geheel zichtbaar te maken, boven de template te laten 'zweven' maar zonder dat andere teksten er onder komen te liggen, ik heb al geprobeerd om nog een <div> met een relative position om de code heen te plaatsen, maar dit geeft hetzelfde resultaat.

Bij voorbaat dank,

[moozzuzz]

Wordt dit op GoT niet vnl gedaan door de parameters:

JavaScript:

overflow-x: scroll;
overflow-y: scroll;

aan te passen?

[Keess]

Die opties zijn scroll, hidden, visible en auto, de breedte heb ik nu op visible zodat altijd de gehele breedte wordt weergegeven, maar hierdoor komt nog steeds de tekst die er normaal onder staat onder de code te staan doordat ie zegmaar over de rest heen zweeft.
Tot nu toe ben ik nog geen code tegengekomen die dat doet.

Edit:
Zoals dit;

PHP:

<?php
echo "oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
?>

[ Voor 18% gewijzigd door Keess op 11-09-2006 15:55 ]

[moozzuzz]

Hoe doet GoT het?

Of anders (maar enkel een luidopdenken) kan je es dit proberen :

JavaScript:

.codescrolled{
overflow-x: scroll;
overflow-y: scroll;
display: block;
position: relative;
}

.codehelpdiv {
display: none;
position: absolute;
}

"klik"

JavaScript:

.codescrolled{
overflow-x: visible;
overflow-y: visible;
display: block;
position: absolute;
}

.codehelpdiv {
display: block;
position: relative;
}

Pseudo-code-idee ;^)

[Keess]

Nog steeds komt de tekst onder de code (sourceCodeAll) te staan (dat is dus de tekst uit de vorige post/bericht).



Wat had je precies in gedachten met .codehelpdiv ?

Is het mss mogelijk om er een rand of een ander html element omheen te plaatsen zodat tekst word 'tegengehouden'...

[ Voor 30% gewijzigd door Keess op 11-09-2006 16:38 ]

[Rowanov]

Met absolute positionering trek je het ding uit de flow van het document en dat wil je niet. Dan rest je om er relatieve positionering of helemaal geen positionering op toe te passen. Het is mij ook totaal niet duidelijk waarom je iets wil laten zweven, maar dan niet ergens boven, want dat is standaard gedrag van de browser. Ik heb het vermoeden dat je een fundamenteel iets niet begrijpt

Edit:
Ik denk dat ik zie wat je bedoelt; kijk eens naar hoe het hier wordt aangepakt. Je hebt in feite twee blokken: die met de nummertjes en die met de code, waarbij geloof ik alleen het blok met de code een absolute positionering meekrijgt en het andere blok de flow in stand houdt

[ Voor 27% gewijzigd door Rowanov op 11-09-2006 16:45 ]

[Keess]

Rowanov schreef op maandag 11 september 2006 @ 16:41:
Ik denk dat ik zie wat je bedoelt; kijk eens naar hoe het hier wordt aangepakt. Je hebt in feite twee blokken: die met de nummertjes en die met de code, waarbij geloof ik alleen het blok met de code een absolute positionering meekrijgt en het andere blok de flow in stand houdt

Precies.

Ik zou ook gewoon de breedte kunnen aanpassen maar dan schuift de gehele layout mee, vandaar het zweven.

Ik heb al in de bron van GoT gekeken maar ben daar niet veel wijzer van geworden, en bij de CSS bestanden kan ik niet komen css/default.css

[Rowanov]

Ik geef je de oplossing al

Het balkje met de nummertjes is relatief, dan wel niet gepositioneerd, waardoor het netjes in de tekst flow staat. Aangezien dat ding even hoog is als het blok met de daadwerkelijke code, blijft de tekst altijd onder het balkje met de nummertjes.

Het daadwerkelijke code blok kan je dan absolute positioneren, omdat de nummeringsbalk de hoogte in stand houdt.

Wat begrijp je daar niet aan?

[Keess]

Ik denk dat ik zie wat je bedoelt; kijk eens naar hoe het hier wordt aangepakt. Je hebt in feite twee blokken: die met de nummertjes en die met de code, waarbij geloof ik alleen het blok met de code een absolute positionering meekrijgt en het andere blok de flow in stand houdt

Sorry, dat bedoelde ik dus niet de nummertjes en de code worden gegenereert door Geshi (de highlight parser) zelf.

Wat jij dus ongeveer bedoeld is dat er 'iets bij' moet staan dat de code op zijn plek houd, ik zal het eens met een tabel proberen.

[ Voor 14% gewijzigd door Keess op 11-09-2006 17:20 ]

[moozzuzz]

Rowanov schreef op maandag 11 september 2006 @ 16:41:
Ik denk dat ik zie wat je bedoelt; kijk eens naar hoe het hier wordt aangepakt. Je hebt in feite twee blokken: die met de nummertjes en die met de code, waarbij geloof ik alleen het blok met de code een absolute positionering meekrijgt en het andere blok de flow in stand houdt

Mooi!

Ik heb al in de bron van GoT gekeken maar ben daar niet veel wijzer van geworden, en bij de CSS bestanden kan ik niet komen css/default.css

Goed verstopt indeed ;^) hint base hint

Wat had je precies in gedachten met .codehelpdiv ?

Is het mss mogelijk om er een rand of een ander html element omheen te plaatsen zodat tekst word 'tegengehouden'...

Een div die in de html net volgt achter je code. Indien scrolling code: geen hulpdiv tonen (evt. zelfs niet in de flow nemen of wel relatief houden; uit te testen). Indien geen scrolling code: wel hulpdiv tonen (om onderliggende tekst tegen te houden) en codeblok absoluut maken.

Maar ik denk dat oplossing Rowanov nog mooier is!

[Rowanov]

Hmz, kan je eens hier beschrijven wat je terugkrijgt als je de highlighter functie gebruikt in php? Als je namelijk een array met regels terugkrijgt, of een lange string met scheidingstekens en je hebt de optie om de nummering weg te laten, dan is het misschien een optie om die nummering zelf te maken. Je kan dan gewoon kijken hoeveel regels er zijn met een count() op de array. Fatsoenlijke highlighters zullen die optie wel hebben denk ik

[Keess]

Ja de nummering kan ik weg laten... ik ga kijken wat hij meer returnt.
--

PHP:

<?
    // Call GeSHi.
    $geshi = new GeSHi($parseCode, 'PHP');
    
    // Set code style.
    $geshi->code_style = "font-size:12px;";

    // Enable line numbers.
    $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS); 
    
    // Parse the code.
    $phpcode = $geshi->parse_code();

    // Replace the content, display below.
    $postContent = str_replace($matches[0][$i], "<div id='phpcode' class='sourceCode'>" . $phpcode . "</div>", $postContent);
?>

Wat ie returnt is de gehele (geparsde) tekst met line-nummers (als dat 1 is), verder een array $parts die 2 gegevens bevat die niet belangrijk zijn.

[ Voor 162% gewijzigd door Keess op 11-09-2006 17:52 ]

[Rowanov]

Ok, je krijgt dus geen array terug. Misschien is het handig om het eens zonder line-numbers te proberen en dan kijken of je hem kan splitten naar een array, op nieuwe regels.

[Keess]

Ga ik proberen, vanavond ben ik waarschijnlijk afwezig, dus mss morgen pas een reply.