hojas de estilo .css

gulder · #1 27/02/2007

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

roman · #2 27/02/2007

Lo del cuadro es lo más fácil. Pones todo dentro de etiquetas div:

Code:

<div class='truco'>

<!---

Aquí el texto del truco

-->

</div>

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

Code:

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:

Code:

procedure MiProc;
begin
...
end;

lo reemplaza con:

Code:

<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.

Además, hay scripts ya hechos, como Geshi para el resaltado de sintaxis y otras monerías.

// Saludos

gulder · #3 28/02/2007

grasias roman boy a mirar lo que dises despues comento algo

gulder · #4 28/02/2007

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

Code:

<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

roman · #5 28/02/2007

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:

Code:

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 · #6 28/02/2007

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

roman · #7 28/02/2007

Según veo, se debe al tipo de documento:

Code:

<!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:

Code:

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

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

// Saludos

gulder · #8 01/03/2007

grasias roman y disculpa por la demora lo boy

a mirar gulder

gulder · #9 01/03/2007

grasis roman sirvio de maravillas a

mamcx · #10 01/03/2007

Puedes probar esta solucion javascript:

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Columnas y hojas de estilo	roman	HTML, Javascript y otros	4	26/04/2006 23:37
Hojas de estilo en PHP	roman	PHP	3	12/04/2005 16:07
Reporte de 2 hojas	Carlex	Impresión	5	07/05/2004 02:04
Reporte de 2 hojas	jsanchez	Impresión	5	28/01/2004 18:52
Excel con varias hojas	Ricardo Alfredo	Varios	0	22/01/2004 15:07