training rosa
Grupo SEO TELEGRAM [Click Aquí]
Resultados 1 al 8 de 8
Tema:

un poco de CSS

  1. #1
    Avatar de pepecarmona
    pepecarmona está desconectado Registrado

    User Info Menu

    Predeterminado un poco de CSS

    Bueno lo primero de todo agradecer a sexalia por ayudarme a montar una paginita con

    css...

    Muchisimas gracias! eres la maestra mas grande que alguien pueda soñar...

    lo que he aprendido con ella me gustaria ponerlo aqui:


    1. DOCTYPE

    lo mas importante del mundo es conseguir con el css que se vea igual en ie, firefox,

    safari, opera, etc etc, no todos siguen los estandares, leaseme ie, pero hay una forma de

    obligarlos a que se vea todos igual..... y aqui esta sentencia DOCTYPE.

    Para hacerlo en un documento XHTML, tendrias que poner esta sentencia arriba del todo:


    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='eS' lang='eS' id='tusitio'>

    Notese la palabra "strict" ahi. Eso es lo que le dice a todos los navegadores que DEBEN

    usar los estandards de la W3C... o por lo menos lo intenten.

    Si haces tu pagiana en HTML4, debes usar esta sentencia arriba del todo:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    2. float: right y float: left

    para aquellos que actualmente ustan usando los divs para posicionar en la pagina, el

    atributo float es su mejor amigo. si quieres que el div2 este en la derecha del div1,

    tienes que setear el div2 a "float: right;" a que es facil?

    bueno sigamos, el div2 estara en el derecha, pero sera la derecha justificada en la

    derecha de la pantalla.

    Que ha ido mal?

    bueno, esta en la derecha del div1 pero tambien en toda pantalla. la solucion es poner el

    div1 float left.

    esto significara que div1= left .... div2=left.... esto significa que se ponen unos

    detras de otros en orden pero se mantienen la izquierda justificada.


    3. clear: both;

    muchas veces tienes divs con float a la izquierda y derecha, pero el siguiente div no se

    ajusta a las especificaciones que le has puesto..... sigue poniendose a la derecha del

    ultimo div! Pero bueno! y ahora que hacemos???

    esto pasa porque el css esta leyendo el div previo.

    para solucionarlo ponemos "clear: both;" y reseteamos la derecha y la izquierda...

    <div1 style='float: left;'> texto </div>
    <div2 style='float: left;'> texto </div>
    <div style='clear: both;'></div>
    <div3>TexTo</div>



    4. CSS para programadores


    CSS hace que la programacion php o cualquier otro codigo se simplifique.

    en css solo tienes que crear un div de 700px y tienes una estructura tal que si:

    <a href='imagengrande1.jpg'><img src='thumb1.jpg' class='thumb'></a>
    <a href='imagengrande2.jpg'><img src='thumb2.jpg' class='thumb'></a>
    <a href='imagengrande3.jpg'><img src='thumb3.jpg' class='thumb'></a>
    ...

    y solo nos queda poner setear el thumb:

    .thumb {
    float: left;
    }

    si quieres un espacio entre thumb y thumb:

    .thumb {
    float: left;
    padding: 5px;
    }


    y listo mas facil imposible...

    5. margin/padding : top right bottom left

    seguro que el 99% de las veces te encontraras esta sentencia:

    #div {
    padding: 5px;
    }

    lo que hace es añadir 5 pixels a arriba, derecha, abajo e izquierda del div..

    a veces es bueno pero no siempre. algunas veces queremos tener mucho mas control.

    si quieres que solamente a la izquierda nos queden 5 px tendremos que utilizar:

    #div {
    padding: 0px 0px 0px 5px;
    }

    lo que hace es poner 0px arriba, derecha, abajo y 5 px en la izquierda.

    es importante mantener ese orden prque sino no se vera correctamente.
    recuerda: arriba derecha abajo izquierda

  2. #2
    Nikki Invitado

    Predeterminado

    hay una banda brasuca que se llama CSS viajaron conmigo en el avion

  3. #3
    NandoX Invitado

    Predeterminado

    Estos piques son muy buenos, sobre todo para un poco instruido como yo.
    Bueno, yo me sigo confundiendo con CSI, pero bueno, mejor seria digo yo una banda que se llame PHP.

  4. #4
    Avatar de pepecarmona
    pepecarmona está desconectado Registrado

    User Info Menu

    Predeterminado

    bueno YO me equivoque en la linea:
    .thumb {
    float: left;
    padding: 5px;
    }

    tiene que ser:

    .thumb {
    float: left;
    margin: 5px;
    }

    mil perdones!.... mi profe no me lo perdona... snif snif snif...

  5. #5
    Avatar de Hades
    Hades está desconectado Registrado
    Rango: Soy accionista de Google!!

    User Info Menu

    Predeterminado

    En realidad

    .thumb {
    float: left;
    }

    si quieres un espacio entre thumb y thumb:

    .thumb {
    float: left;
    padding: 5px;
    }
    Mas facil, le das a la imagen directamente el atributo en ves de class,

    img {
    margin: 5px;
    }

    Si es para una galeria, no es necesario hacerlas flotar hacia ningun lado, las imagenes se ordenan solas.

    img {
    margin: 5px;
    border: solid 1px #FFF; /* Para meterle un borde a las imagenes.*/
    }
    ¿Intercambios de calidad? - Enviame un privado...

  6. #6
    sexalia Invitado

    Predeterminado

    Si haces eso pondr&#237;as margen a todas las imagenes que haya en la web , por eso se suele usar el atributo class para determinar el estilo solo a algunas.

    Dependiendo del n&#250;mero de imagenes y lo que quieras hacer, lo correcto ser&#237;a usar class si son pocas en una zona o est&#225;s estan distribuidas en zonas diferentes. Si es una galeria de imagenes en una misma zona, usar la jerarqu&#237;a CSS

    Ejemplo de estilos con jerarqu&#237;a , Solo se aplicar&#237;a el margen a las imagenes dentro del contenedor galeria y sin tener que poner class="... en todas las imagenes y sin afectar al resto de las imagenes del sitio.

    CSS
    ------------------------------------------
    #galeria img
    {
    margin: 5px;
    }

    HTML
    --------------------------------------------
    <div id="galeria">
    <a href='imagengrande1.jpg'><img src='thumb1.jpg' ></a>
    <a href='imagengrande2.jpg'><img src='thumb2.jpg' ></a>
    <a href='imagengrande3.jpg'><img src='thumb3.jpg' ></a>
    </div>
    Última edición por sexalia; 12/07/2007 a las 13:40

  7. #7
    Avatar de TaLu
    TaLu está desconectado Registrado
    Rango: Soy accionista de Google!!

    User Info Menu

    Predeterminado

    Muy buen material, yo tambien estoy haciendo webs con css y ando a los tumbos, ayulu.com la tengo llena de errores y espaporno.com creo que est&#225; un poco mejor en css, tengo que aprender mucho a&#250;n.

    Saludos.

  8. #8
    dubilex Invitado

    Predeterminado

    Tengan en cuenta cuando usan padding margin, si bien generan espacios no es lo mismo.
    Cuando se usa Margin, se genera un espacio afuera de un box, mientras que si se usa padding el espacio que se genera es adentro del box.

    Esto quiere decir, que si tienen un box de Width: 120px con un padding de 5px; el ancho real es 130px; Si no lo toman asi en los navegadores unos lo interpretan con 120px y otros con 130px.

    También si usan un border o un background, el espacio se vera diferente.

    En cuanto a los elementos flotantes, no todos los tags necesiatn usar el float, poniendo display:inline; los elementos quedan en una misma lkínea. Es conveniente cada vez que se use el float, poner un width de ese elemento. Y como decian, al final, poner un div clear, yo defino una class blClear, y la uso en todos mis proyectos.

    En ese caso, también no olvidarse poner lo siguiente:

    .blClear {
    clear:both;
    overflow: hidden;
    height: 0px;

    }

    Saludos,
    dubilex

Temas Similares

  1. Un poco de Humor
    Por du3nd3c1ll0 en el foro General SoyWebmaster
    Respuestas: 13
    Último Mensaje: 26/05/2016, 17:24
  2. un poco de humor
    Por loop en el foro General SoyWebmaster
    Respuestas: 30
    Último Mensaje: 23/03/2007, 20:07
  3. Es poco?¿
    Por newbie82 en el foro General SoyWebmaster
    Respuestas: 11
    Último Mensaje: 16/02/2006, 09:37
  4. un poco de deporte
    Por loop en el foro General SoyWebmaster
    Respuestas: 5
    Último Mensaje: 05/02/2005, 20:41
  5. un poco de info...
    Por Hades en el foro General SoyWebmaster
    Respuestas: 2
    Último Mensaje: 02/11/2004, 21:31

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Has visto el post " un poco de CSS" que está en esta URL y ha sido creado por el usuario pepecarmona. Esperamos que te haya sido de utilidad el artículo " un poco de CSS" que inició el usuario pepecarmona de Soywebmaster.com.

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

SEO para Webs de Adultos
MÉTODOS EFICACES para Indexar Enlaces en Google
Webinar: Keyword Research (Con Emilio García)
Safecont: Una herramienta SEO diferente
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal