Contenedor de códigos, para publicarlos en tu web «Estilo 1»

 

 

Hola, que tal jimderos!, en ésta ocación les traemos un Contenedor de Códigos, para que ustedes puedan compartir tutoriales en sus respectivas páginas, ésto es muy importante para darle una apariencia profesional a vuestra web.


Demo


.ejemplo { 


width: 100px;
height: 100px;
}

Código para insertar en el Head


El el código Head dejamos una etiqueta para que puedas modificar el ancho de la caja ya que hay diferentes tipos de plantillas.

  • +Código Head

    <link href="http://cirtdesign-host.blogcindario.com/ficheros/codes_box_style_1/style.css" rel="stylesheet" type="text/css" id="CirtDesign_Box1" />

    <style>
    .pre_cd_1 {
    width: 570px !important; /*Ancho*/
    }
    </style>

Código para insertar en un Widget


Te proporcionamos el código que usamos para el Demo, para que se te sea más fácil compartir tus códigos.

  • +Código Widget/HTML

    <pre class="pre_cd_1" titulo="Aqui el titulo">
    .ejemplo { 
    <br />width: 100px;  
    <br />height: 100px;  
    <br />}
    </pre>

Escribir comentario

Comentarios: 8
  • #1

    clanrivn (miércoles, 31 julio 2013 13:29)

    Muy bueno! Me gusto.

  • #2

    CirtDesign, Expertos & hábiles en Jimdo (miércoles, 31 julio 2013 19:19)

    Hola!, @clanrivn Muchas gracias por tu opinión!

  • #3

    Jordi Goyanes Granados (jueves, 01 agosto 2013 09:03)

    ¡Hola, Cirt!

    Buen tutorial. Estupendo.

    Ahí viene una ayuda amistosa:
    En cuentas de tener que medir el ancho del contenido por píxeles para que el contenedor encaje, sería mejor utilizar porcentajes, ¿no crees?
    Por ejemplo, el estado normal debería tener un width del 90% del contenido; y el estado hover, con el 100% completo.
    Así, tú y tus visitantes ahorráis esfuerzo al saber que el contenedor se adapta al contenido gracias a un porcentaje del mismo.
    En tu caso, en tu web, el estado hover del contenedor sobresale del contenido por el padding; quizás es ese tu objetivo; pero en cuentas de poner en declaración a esos 600px de ancho de hover, poner su 100% dará el mismo resultado.
    >{width: 100%}

    Es la forma más fácil. ¡Saludos!

    Jordi.

  • #4

    todoparatupconline (miércoles, 07 agosto 2013 13:10)

    Muy bueno! Gracias!

  • #5

    Jdwebdesign (martes, 13 agosto 2013 03:43)

    No estoy de acuerdo contigo en denunciar esa página que dices. Tu plantilla es libre, todo el mundo que quiera puede tenerla y editarla a su manera. O acaso la creaste tu?
    No intentes denunciar a quien no puedes solo porque tenga la misma plantilla que tú.

  • #6

    CirtDesign, Expertos & hábiles en Jimdo (martes, 13 agosto 2013 12:37)

    Hola! @Jdwebdesign, Yo estoy de acuerdo contigo es que mi plantilla es libre de usar, pero ¿crees justo?; que me hayan robado los estilos que cree con tanto esfuerzo para mi web?, incluso hasta la caja de comentarios la dejaron, y no se dieron ni la molestia de cambiarle el nombre a las etiquetas creadas por mi ¡Que horror!.

  • #7

    TONI (sábado, 17 agosto 2013 11:08)

    HOLA! CIRT,PERDONA X LA MOLESTIA.
    QUISIERA Q ME ESPLICARAS COMO PUEDO PONER LOS CÓDIGOS DENTRO DE TU CONTENEDOR.PUES NO SE BIEN,BIEN DONDE LO TENGO Q COLOCAR.

    <pre class="pre_cd_1" titulo="Aqui el titulo">
    .ejemplo {
    <br />width: 100px;
    <br />height: 100px;
    <br />}
    </pre>

    TU YA AS PUESTO UN EJEMPO,PERO NO SE LO Q HAGO MAL.
    DONDE DICE "Aqui el titulo"yo coloco Codigo HTML,PERO PARA COLOCAR CUALQUIER CÓDIGO,NO SE COMO HACERLO O PONERLO.
    PENSARAS Q SOY UN POCO INUTIL,PERO TE AGRADECERIA Q ME LO ESPLICARAS.
    GRACIAS X TU EXCELETE TRABAJO.
    UN SALUDO,TONI

  • #8

    CirtDesign, Expertos & hábiles en Jimdo (domingo, 18 agosto 2013 23:11)

    Hola @TONI,
    Para colocar cualquier código lo tienes que hacer de la siguiente manera, imaginemos que tu código es acerca de dar estilo a un box y es el siguiente:
    .box {
    color: white;
    width: 100px;
    border-radius: 2px;
    position: absolute;
    }
    Ahora quieres ponerlo en la caja; se hace así:
    Creas un Widget/HTML y luego asi,
    <pre class="pre_cd_1" titulo="Código HTML">
    .box {
    <br />color: white;
    <br />width: 100px;
    <br />border-radius: 2px;
    <br />position: absolute;
    <br />}
    </pre>
    y Listo!, espero haberte resuelto tu duda,
    Saludos!