PDA

Ver la Versión Completa : hojas de estilo .css

gulder
27-02-2007, 20:42:17
hola señores foristas como andan espero que de maravillas,,
bueno mi duda que me ha atormentado toda la mañana es la siguiente ustedes saben que uno puede incluir una hoja de estilo a una pagina bueno bamos bien, hora les pregunto coma hacen aqui en este foro para colocar el codigo de delphi dentro de un cuadro y que incluso resalte su sintaxis, lo que yo quiero hacer es algo parecido tengo una base de datos con unos trucos de html y necesito mostrar el codigo del truco igual como lo muestran en este foro dentro del rectangulo con un borde, color de fondo y que me resalte la sintaxis ojala no sea mucho pedir grasias de antemano gulder :confused: :confused:
roman
27-02-2007, 21:23:36
Lo del cuadro es lo más fácil. Pones todo dentro de etiquetas div:


<div class='truco'>

<!---

Aquí el texto del truco

-->

</div>


En tu hoja de estilo le das "brillo" a tu <div> de clase "truco":


div.truco
{
border: 1px solid green;
background-color: silver;
}


O sea, le pones todos los atributos que desees.

El resaltado es más difícil. El del código delphi se hace con un script php que lee el texto y "envuelve" las palabras reservadas con etiquetas <span>. Por ejemplo, el código original:


procedure MiProc;
begin
...
end;


lo reemplaza con:


<span class='keyword'>procedure</span> MiProc;
<span class='keyword'>begin</span>
...
<span class='keyword'>end</span>;


y en tu hoja de estilo das el formato deseado a span.keyword. Si te interesa, se habló del tema en este hilo (http://www.clubdelphi.com/foros/showthread.php?t=28138).

Además, hay scripts ya hechos, como Geshi (http://qbnz.com/highlighter/) para el resaltado de sintaxis y otras monerías.

// Saludos
gulder
28-02-2007, 01:34:16
grasias roman boy a mirar lo que dises despues comento algo
gulder
28-02-2007, 19:55:55
una duda roman o algun forista lo que pasa es que necesito centrar le cuadro lo intente colocandolo dentro de <center></center> funciono pero el texto que se encontraba dentro del cuador lo alineo al centro les muestro como lo hice


<center>
<div class='truco'>
<pre>
<!---

Aquí meti el texto del truco

-->


</pre>
</div>
</center>


si alguine sabe como central el cuadro sin que afecte el texto le agradeceria:confused: :confused:
roman
28-02-2007, 21:50:30
Actualmente, la etiqueta <center> está en desuso y no se recomienda porque todo el formato debería estar en una hoja de estilo. Lo que buscas puedes hacerlo, por ejemplo, con el estilo:


div.truco
{
width: 60%;
margin-left: auto;
margin-right: auto;
}


Aquí, div.truco tendrá un ancho del 60% de la página con igual margen de ambos lados, y por tanto, centrado.

// Saludos
gulder
28-02-2007, 22:35:57
hola foro, roman como estas mira lo que me dices no me funciono, puesto que sigui sin centrar el cuadro aqui te pongo el ejemplo para ver si me dices que pasa grasias de antemano gulder:confused:
roman
28-02-2007, 22:46:39
Según veo, se debe al tipo de documento:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Yo lo había probado con

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

En tu caso, funciona si omites el width y especificas los porcentajes en los márgenes:


div.truco
{
border: 1px solid green;
background-color: silver;

margin-left: 10%;
margin-right: 10%;
}


// Saludos
gulder
01-03-2007, 04:19:27
grasias roman y disculpa por la demora lo boy :) a mirar gulder
gulder
01-03-2007, 20:31:18
grasis roman sirvio de maravillas a
mamcx
01-03-2007, 21:07:54
Puedes probar esta solucion javascript:

http://www.dreamprojections.com/SyntaxHighlighter/