Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Css Inicio

    Încărcat de

    sandrosf
    11 vizualizări17 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    11 vizualizări17 pagini

    Css Inicio

    Încărcat de

    sandrosf

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 17

    Como sospecho que me enrrollo demasiado vamos a ir al grano creando nuestro primer DIV o capa.

    Como las capas son parte del contenido de una pgina web, habr que escribir su cdigo dentro del contenido o BODY. Este es el cdigo html de una pgina web vacia: <html> <head> </head> <body> </body> </html> Y este es el cdigo de la misma pgina, pero ahora con un div vacio (aprenders cosillas de Html bsicas en Curso de Html): <hmlt> <head> </head> <body> <div> </div> </body> </html> Si abres el notepad.exe de windows (el Word no vale para esto) escribes o copias ese cdigo en l y lo guardas con la extensin .html tendrs hecha una pgina web, vacia, claro. Ponle este nombre al guardarlo: "index.html". Si no sabes o no consigues cambiar la extensin mira este artculo de la enciclopedia CCTW (Fjate en el subttulo "No puedo ver las extensiones de los archivos..."). Para poder ver algo de todo esto vamos a escribir las palabras "Este es mi primer div" entre <div> que indica el principio de la capa y el </div> que seala el final de la misma. Para poder escribir en l tenemos que volver a ponerle la extensin .txt y abrirlo con el notepad de windows. Si tras escribir eso en el archivo volvemos a guardarlo como .html y lo abrimos, podemos ver una pgina web en blanco con esas palabras escritas. Es todo un principio, no? Por ahora tenemos esto: <html> <head> </head> <body> <div> Este es mi primer div </div> </body> </html>

    A la izquierda ms arriba hay un men. Este apartado est destacado en l en negrita. Pulsa el siguiente para continuar o haz clic en la fecha de abajo para continuar en orden ;=) Bien. El siguiente paso ser ponerle un ttulo a la pgina y despus ponerle un vnculo a la hoja de estilos CSS que crearemos ms adelante. Para ponerle un ttulo basta con escribir dentro del head lo siguiente: <title>Ttulo de mi pgina</title> En lugar de "Ttulo de mi pgina" pon lo que ms te apetezca. Es lo que saldr en la barra superior del navegador, esa azul de arriba del todo. Para no llenar la hoja de cdigo y para poder escribir todos los estilos en un solo lugar y no en cada una de las pginas de la web, vamos a crear una Hoja de Estilos. La podemos hacer igual que hicimos la pgina anterior. Abrimos el bloc de notas o notepad.exe de windows , y sin escribir nada en ella la guardamos con este nombre y extensin: estilo.css. Te aseguro que este archivo (Hoja de Estilos) es mgico, ya lo vers Ya tenemos una pgina web y una hoja de estilos (vacia, ya la llenaremos ms tarde). Ahora es importante guardar ambos archivos dentro de una carpeta que se puede llamar como querais. Yo la llamar "EJEMPLO-DIV". Ya he guardado esos dos archivos dentro de ella, haz lo mismo y seguimos.

    Siguiente paso?
    Para que la pgina creada pueda leer la hoja de estilos CSS hay que decirle dnde est y como se llama. Esto se hace escribiendo una lnea un poco rara dentro del head del archivo index.html. Como ves, en el head suelen ir indicaciones, informacin de la pgina, mientras que lo que finalmente se ver en la web ser lo que hay dentro del body, no lo del head. Curioso, no? La lnea mgica que hemos de escribir en index.html, entre <head> y </head> (la barrita "/" delante de la palabra significa que ha terminado su definicin) es esta: <link rel="stylesheet" href="estilo.css" type="text/css" media="all"> De esta lnea,lo nico que quizs cambie en cualquier otra web es lo escrito en rojo, es decir, el nombre y lugar del archivo de la hoja de estilo. Lo dems siempre es as. Nuestra pgina web (index.html) hasta el momento queda as: <html> <head> <title>Mi Primera Web Con DIVs</title>

    <link rel="stylesheet" href="estilo.css" type="text/css" media="all"> </head> <body> <div>Este es mi primer div</div> </body> </html> Dentro de href="........." hemos indicado adems del nombre del la hoja de estilos el lugar donde index.html debe buscarla. Si dentro de la carpeta EJEMPLO-DIV hubiramos creado otra llamada BORRAR y hubiramos guardado el archivo estilo.css dentro, lo que tendramos que poner entonces sera: <link rel="stylesheet" href="BORRAR/estilo.css" type="text/css" media="all"> (ESTO NO LO PONGAS EN NUESTRO EJEMPLO) Eso es lo que se llama la Ruta del Archivo (este botn significa que puedes aprender ms sobre ese tema haciendo clic en l). Vamos a estrenar la Hoja de Estilo estilo.css definiendo algunas propiedades en ella. No te hace ilusin? je je. Primero abrimos el archivo index.html y asignamos un nombre de estilo al nico div que tenemos en l. Lo bautizaremos bartolo, y esto se hace aadiendo id="nombre-del-estilo" al primer <div>, tal y como puedes ver abajo. Para poder aprovechar ms estos ejemplos vamos a crear un segundo div. En este caso lo bautizamos como catalina. No, no es que no sepa escribir, es que hay que acostumbrarse a escribir los nombres de archivos y de estilos sin maysculas, ni acentos, ni espacios en blanco, ni guiones bajos "_" (los guiones medios "-" si valen) ni cosas raras. Si no usas nmeros en los nombres de estilos mejor que mejor, a veces da problemas. El caso es que el cdigo ahora quedara as (hemos ampliado eso de "esto es mi primer DIV aadiendo "llamado bartolo" y lo mismo para catalina): <html> <head> </head> <body> <div id="bartolo"> Este es mi primer DIV llamado bartolo </div> <div id="catalina"> Este es mi segundo DIV llamado catalina </div> </body> </html>

    Si guardas el index.html y lo abres no vers cambios, pues el navegador se va a buscar las caractersticas del bartolo y estas no han sido an definidas en la hoja de estilo, as que vamos a hacerlo ahora. Las caractersticas que puedes darle a un Div son un montn, todas las que se pueden hacer en HTML y an unas cuantas ms. En las pginas siguientes vamos a ir viendo algunas de ellas aplicadas a nuestra querida pareja, bartolo y catalina. Cuando me canse de explicar caractersticas pasamos a hacer la pgina web en serio, pero mientras no est de ms que te vayas familiarizando con todas esas propiedades, que nos van a hacer falta para la web definitiva. Seguimos?

    Estilos para el Texto


    Podemos dar un estilo concreto a todo el texto que haya dentro de un determinado Div. En el cdigo Html se usa la palabra mgica <p> para indicar que se va a empezar un prrafo y </p> para indicar que el prrafo ha terminado (Esto es Html, y est explicado en el Curso de HTML). Para hacerlo bien, como los textos "Este es mi....." que hemos puesto son dos prrafos distintos, deberiamos encerrar esos textos entre esas palabras mgicas. Quedara as: <p>Este es mi primer DIV llamado bartolo</p> <p>Este es mi segundo DIV llamado catalina</p> Ahora s que est en condiciones. Las caractersticas de los prrafos que se encuentran dentro de los DIVs, como los DIVs bartolo y catalina, hay que definirlos en la hoja de estilos estilos.css Bueno, como las caractersticas de lo contenido dentro de un DIV las tienes explicadas en el Curso de Estilo CSS, aqu solo te voy a explicar con detalle los estilos del propio DIV o capa. Las caractersticas principales para una capa son las siguientes:

    BACKGROUND-COLOR:
    Esto define el color de fondo de la capa. Para especificar qu color queremos hemos de colocarlo en modo hexadecimal. Si, es un verdadero rollo acertar con el color, je je je. Puedes encontrar informacin acerca de los colores en hexadecimal y algunos ejemplos en www.aulaclic.es Por ejemplo, un tono de verde podra ser #00CC00, un tono de azul #00CCFF, uno naranja #FF9900. Para especificar el color basta con escribir una lnea en la hoja de estilos estilo.css. Por ejemplo, vamos a dar al DIV bartolo y al DIV catalina los dos primeros colores anteriores. La hoja de estilos debe quedar as: bartolo {background-color:#00CC00 ; } catalina {background-color:#00CCFF ; }

    Ahora vamos a encerrar a bartolo y catalina dentro un DIV llamado global y le vamos a dar el tercer color. As podremos ver ms claramente donde empieza y donde termina cada DIV. Para darle el color a global primero creamos ese DIV en la pgina index.html as: <html> <head> <title>Mi Primera Web Con DIVs</title> <link rel="stylesheet" href="estilo.css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="bartolo"><p>Este es mi primer DIV llamado bartolo</p></div> <div id="catalina"><p>Este es mi segundo DIV llamado catalina</p></div> </div> </body> </html> Y ahora definimos el estilo que llamaremos "global" en la hoja de estilos estilo.css de este modo: #global {background-color:#FF9900} #bartolo {background-color:#00CC00} #catalina {background-color:#00CCFF} Si haceis eso y guardais ambos archivos, al abrir el index.html aparecer esto. Vemos en este ejemplo como aparece una lnea verde que es la capa bartolo, una azul que es la catalina y de fondo se ve el color naranja de la capa global que contiene a estos dos personajes.

    Antes de nada...
    Para poder ver bien los ejemplos es importante que cuando los abramos sepamos donde empieza una capa y donde termina, y esto no podemos verlo a menos que por ejemplo le demos un color de fondo a cada una de esas capas. Adems, viene bien ponerle otro color de fondo a la web en s para destacar ms los lmites de esas capas y entender bien lo que explico despus. As que ahora mismo le vamos a poner un color de fondo amarillo a la web. Esto se hace aadiendo una lnea a la hoja de estilo, que debe quedar as: body {background-color:yellow} #global {background-color:#FF9900} #bartolo {background-color:#00CC00} #catalina {background-color:#00CCFF} Adems de poner los colores en forma hexagesimal, se pueden definir otros colores directamente por su nombre en ingls, como hemos hecho con el amarillo (yellow) del body.

    Como recuerdas, body engloba todo el contenido de la web, de modo que con esto todo tendr un color de fondo amarillo y veremos mejor cada capa que tiene un color de fondo distinto. As que tendremos un fondo amarillo con tres capas, una global naranja que contiene otras dos, bartolo arriba y catalina abajo. Mira, este es el resultado.

    Aplicando la propiedad border:


    Como an no es suficiente para ver los lmites de cada capa vamos a dibujarle un borde a todas ellas. As aprendemos ya de paso a poner bordes, no? Basta con aadir a la hoja de estilo lo siguiente: body {background-color:yellow} #global {background-color:#FF9900; border:#000 1px solid} #bartolo {background-color:#00CC00; border:#000 1px solid} #catalina {background-color:#00CCFF; border:#000 1px solid} Hemos escrito border:#000 1px solid, donde #000 es el color, en este caso negro, 1px es el grosor o espesor de la lnea de borde (un pixel) y solid significa que es una lnea continua. Por el momento djalo as, ya podrs hacer experimentos por tu cuenta otro da. Es para que no te lies pues seguiremos con ese estilo a lo largo del ejemplo. Bien, el resultado lo puedes ver t mismo si lo haces (deberias hacerlo para ir siguiendo estas lecciones...) pero por si acaso, se ve este resultado. No vemos el color naranja de global pues bartolo y catalina estn ocupando todo su espacio, estn sobre global y lo tapan. Con esta palabra se puede especificar el margen que ha de existir entre el borde exterior que separa el DIV del resto de elementos que lo rodean por fuera y el borde dibujado (opcional) del mismo. Mira este dibujo para entender lo que te digo:

    Podemos especificar el valor del margen as: bartolo {margin:10px 20px 30px 40px} que corresponde a los mrgenes que se dejarn por arriba, a la derecha, abajo y a la izquierda respectivemante, no olvides este orden! Lo de px significa Pixeles, que

    son cada uno de los puntitos en los que se divide la pantalla. Hay otras medidas pero esa es la buena. Vamos a hacer una prueba escribiendo varios valores distintos para bartolo, catalina y global a ver que ocurre. Por ejemplo, vamos a escribir unos valores en la hoja de estilos estilo.css. Con lo que ya hemos escrito antes en ella debe quedar as: body {background-color:yellow} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px} Tras escribir eso guarda la hoja de estilo y abre la pgina index.html. Vers el efecto que produce. He puesto que global deje un margen de 4 pixeles arriba, abajo y a los lados. Con esta palabra se especifica el margen que ha de existir entre el borde definido antes y el propio contenido del DIV. Es decir, es un margen desde la lnea de borde hacia lo que hay dentro. Podemos especificar el valor del padding as: bartolo {padding:10px 20px 30px 40px} que corresponden a las distancias a dejar arriba, a la derecha, abajo y a la izquierda respectivamente. Para acordarte, recuerda que empieza por arriba y va girando en sentido de las agujas del reloj (arriba, derecha, abajo e izquierda, fcil, no?). Es decir, si dejamos un padding de 2px 2px 2px 2px aparecer un margen entre el borde y lo que haya en el interior de la capa de dos pixeles. Vamos a aplicarlo a nuestro ejemplo. Vamos a hacer que entre los recuadros de bartolo y catalina, y el marco grande de global, quede un espacio pequeo de margen, de unos 2 pixeles. Recuerda, ese ser el margen entre el contenido de la capa (bartolo y catalina) y el borde de global. El contenido de estilo.css ha de quedar as: body {background-color:yellow ;} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px} Y el resultado ser este. El resultado no es espectacular en este caso pero es importante saberlo, te har falta ms tarde. Al menos vers como los DIVs se han separado un poco (2 pixeles exctamente) del borde de global. Esto define la anchura que queremos que tenga el DIV o la capa. Se puede expresar en pixeles como antes o en porcentajes (%). Si queremos que la anchura del

    DIV sea la mitad del tamao de la ventana que tenga abierta el visitante hemos de escribir 50%, o si queremos que tenga un ancho concreto ponemos la cantidad de pixeles: bartolo {width:300px} o bartolo {width:50%} Pues bien, para probar esto vamos a darle un ancho de 800 pixeles a la capa global que contiene a bartolo y catalina. Tambin vamos a dar un ancho de 80 pixeles a bartolo y no definiremos nada por el momento para catalina. La hoja de estilos quedara as: body {background-color:yellow} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px; width:800px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px} El resultado es este otro. Lo de ponerle un ancho de 800 pixeles a global es porque normalmente los monitores de nuestros visitantes sern como mnimo de esa resolucin, as que escogemos ese tamao para la web. Como no le hemos dado anchura a catalina, esta capa tomar el tamao que necesite dentro de la capa global. No se si te has dado cuenta, pero estamos consiguiendo cambiar el aspecto de la web sin haber tocado todavia la pgina index.html. Esta es la mgia del CSS y de ah viene su ventaja, todos los colores, tamaos, etc van en la hoja de estilo y la index.html queda super sencilla, que es lo que le gusta a los buscadores, sencillez para poder leerla. Esta propiedad (interesante y quizs algo complicada) hace flotar la capa del modo que queramos, haciendo que el resto de elementos externos a esa capa se posicionen alrededor de ella... ms o menos. Los posibles valores que podemos darle son left (flota a la izquierda), right (flota a la derecha) o none (no flota). Para verlo ms claro, si a una capa le ponemos en la hoja de estilo float:left, esta capa se situar a la izquierda y el siguiente elemento que tengamos se colocar como si el anterior no existiera (pues est flotando), a menos claro que a ese segundo elemento le pongamos un float:right con lo que este segundo quedara a la derecha de la pgina. Pero no te preocupes que esto lo veremos bien con los ejemplos. Si no ponemos nada los navegadores entenderan que float tiene el valor none que significa que No flotan. Si no flotan no se pondrn una encima de otra, pero si flotan y no las colocamos bien s que pueden superponerse. Vamos a ver que pasa si le ponemos a bartolo un float:left. Con eso bartolo pasar a ser flotante a la izquierda, luego catalina podr colocarse arriba y no debajo de

    bartolo, pues ste est flotando dejando sitio para catalina. Guau, que lio, no? Para catalina es como si bartolo no existiera por lo que se colocar en el lugar que antes ocupaba bartolo. Si, no queda muy bien, pero se puede arreglar. Para esto la hoja de estilo queda as: body {background-color:yellow} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px; width: 800px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px} Y el resultado es este. Si ahora le aadimos un float:right a catalina tendremos este otro cdigo para la hoja de estilo: body {background-color:yellow} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px; width:800px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 0px 0px 0px; width:80px; float:left} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px; float:right} Y este otro resultado. Vemos como ahora catalina est a la derecha. Su anchura a cambiado. Un float suele tomar la anchura que necesita para mostrar el contenido, no ms. Vamos a ponerle una anchura concreta... a ver... si el global tiene 800 pixeles y bartolo 80 me quedan a simple vista 720px para que sea ocupado por catalina, as que a catalina le ponemos esto en la hoja de estilos: #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px; float:right; width:720px} El resultado no es muy convincente. Ahora resulta que no se superponen Por qu? Pues porque ahora los dos estn flotando y as s que no pueden superponerse. Adems vemos como catalina ocupa ms espacio de lo que creamos y al no caber junto a bartolo se va a la lnea de abajo. Por qu? Pues por que hemos olvidado que la capa bartolo no ocupa en realidad 80 ni el espacio disponible en global es de 800 pixeles. Esos 800 son totales, a los que hemos de restar lo que ocupa el margin, el padding y como no, el border que definimos de espesor 1 pixel. Todo eso es espacio que no queda libre para catalina. Si nos pasamos de ancho catalina pasar al rengln de abajo que no es lo que pretendemos. Queremos que quede a la derecha de bartolo ocupando el mximo espacio posible. Normalmente se hace la resta, 800 menos el borde, menos... pero los tios vagos como yo preferimos hacerlo a ojo.

    Ponemos por ejemplo un width a catalina de 594px, miro qu pasa, y as voy hasta que queda bien... Ponle 714px a catalina y veras. Solo nos falta un detalle importante. Con lo que ya sabes deberas adivinar qu tenemos que hacer para que aparezca una separacin entre la capa bartolo y la capa catalina. Como vers en lo conseguido hasta el momento, hay una separacin de 2 pixeles entre el marco de global y bartolo y catalina, pero estos dos ltimos aparecen pegados. Si quieres separarlos 2 pixeles para que quede mejor... Qu tenemos que hacer? Tienes varias opciones (a ver si has adivinado alguna...). La primera es entrar en la hoja de estilos y ponerle a bartolo que deje un margin de 2 px a su derecha, es decir, ponerle margin:0px 2px 0px 0px. La otra opcin es ponerle a catalina un margin de 2 pixeles a la derecha, es decir margin:0px 0px 0px 2px. Hay otra opcin, que es ponerle solo un pixel a bartolo y el otro pixel a catalina, claro. Escogemos la primera opcin. Eso s, que no se nos olvide! Como le hemos dado 2 pixeles ms de ancho a bartolo, hemos de quitrselos a catalina en su ancho. Pasaremos de 712px a 710px, oki? Si alguna vez prefers dar a bartolo 50 pixeles ms, se los sumais a l y se lo restais a catalina, de forma que la suma (incluyendo bordes, mrgenes, etc) sea el ancho de global. No es tan complicado, no?

    Otro apunte
    Date cuenta que todo todo todo aparecer centrado, pues hemos definido textalign:center en la hoja de estilo para body, que contiene todo. Si quieres que los elementos de bartolo aparezcan de otro modo, como por ejemplo a la izquierda, hemos de aadirle la lnea sealada en negrita abajo a la hoja de estilo. Si en catalina queremos poner textos, quizs prefieras ponerle a ella un text-align:justify, que justifica el texto quedando mucho mejor.

    Separando los textos


    Por otro lado, si deseas que los prrafos de texto no queden tan pegados a la lnea de borde, una opcin es usar el padding, pero como todos los navegadores no leen esta propiedad igual, mejor lo haremos de otro modo para evitar que la web se nos desordene segn el navegador que se use. Esa otra opcin es darle un padding a los prrafos en la hoja de estilo. Por ejemplo de 10 pixeles a cada uno de los lados y de 5 pixeles arriba y abajo. La hoja de estilos quedar finalmente as:

    body {background-color:yellow; text-align:center} #global {background-color:#FF9900; border:#000 1px solid; margin:4px 4px 4px 4px; padding:2px 2px 2px 2px; width:800px} #bartolo {background-color:#00CC00; border:#000 1px solid; margin:0px 2px 0px 0px; width:80px; float:left} #catalina {background-color:#00CCFF; border:#000 1px solid; margin:0px 0px 0px 0px; float:right; width:710px; text-align:justify} p {padding:5px 10px 5px 10px} y nuestro ejemplo se ver de este modo Con esta propiedad podemos hacer que una capa o elemento no permita que hayan otros elementos flotando a sus lados. El valor que pongamos a esta propiedad ser el lado en el que no se permiten elementos flotantes. Los valores por tanto sern none, left, right y both (both significa ambos). Por lo que si NO queremos que a la derecha de bartolo aparezca catalina, tendremos que ponerle a bartolo esto: bartolo {clear:right} Puede ser til si por ejemplo ponemos un logotipo arriba a la izquierda y no queremos que aparezca nada a su izquierda sino ya directamente debajo de l. Como ya sabes, dentro de un DIV o capa puedes insertar el elemento del tipo que quieras, incluso otro DIV o varios de ellos, o imgenes, o lo que sea. Pero, Qu sucede si en la hoja de estilos le digo que tenga una anchura de 500 pixeles y el elemento que tiene dentro es ms ancho? La propiedad overflow se define, como el resto, dentro de los corchetes { y } del DIV que deseemos y puede tomar los siguientes valores segn lo que queramos que ocurra en el caso anterior (si no es nuestro caso no es necesario definir esta propiedad, claro):

    Overflow: visible
    Indica que si el elemento de dentro del DIV es de mayor tamao en altura o anchura que el DIV que lo contiene, entonces se le d permiso a este elemento para sobresalga del DIV. Quedara algo feo en algunos casos, pero quizs nos interese alguna vez. En cualquier caso no est mal saberlo, no?

    #nombredeldiv {width:200px; border:#000 2px solid; overflow:visible}

    Overflow: hidden
    En este otro caso el elemento del interior aparece recortado de modo que solo se muestra lo que cabe dentro del DIV que lo contiene. Adems no aparecern las barras de deslizamiento para poder ver el resto del elemento. Si deseamos que aparezcan esas barras tendremos que usar otra opcin.

    #nombredeldiv {width:200px; border:#000 2px solid; overflow:hidden}

    Overflow: scroll
    Con esta otra opcin el elemento aparece tambin recortado como con el hidden, pero en este caso aparecen alrededor del DIV las barras de desplazamiento para que el usuario pueda ver el resto del elemento.

    #nombredeldiv {width:200px; border:#000 2px solid; overflow:scroll}

    Overflow: auto
    Con est ltima opcin posible, el navegador que use el navegante mostrar las barras de navegacin necesarias (vertical, horizontal o ambas segn el caso) solamente si estas son necesarias para mostrar el resto del elemento. En caso de que el elemento quepa bien dentro del DIV no aparecerian estas barras.

    #nombredeldiv {width:200px; border:#000 2px solid; overflow:auto} Aprovechando que nuestro amigo Hq nos pregunta en el Foro CCTW, vamos a publicar el ejemplo que nos pide. Hq quiere, basndose en el ejemplo que llevamos hasta ahora, poner dentro de un DIV general (global) uno a la izquierda donde colocar el men (ser bartolo) y otros dos a su derecha, uno encima del otro en los que colcoar el ttulo (en catalina) y en el otro de abajo (perico) los textos. Esto es lo que quiere conseguir y a continuacin os indico como hacerlo. Para ello basta con copiar todo el HTML del DIV catalina y pegarlo justo a continuacin. Luego le cambiamos el nombre del DIV por "perico" y personalizamos un poco su texto para distinguirlo, poniendo "Este es mi tercer DIV llamado perico". El HTML quedara as: <html <head <title>Mi Primera Web Con DIVs</title> <link media=all href="estilo-a001.css" type=text/css rel=stylesheet> </head> <body> <div id=global> <div id=bartolo> <p>Este es mi primer DIV llamado bartolo</p> </div> <div id=catalina> <p>Este es mi segundo DIV llamado catalina</p> </div> <div id=perico> <p>Este es mi tercer DIV llamado perico></p> </div> </div> </body> </html> Ahora hemos de definir en la hoja de estilos las propiedades de perico, que sern idnticas a las de catalina, con lo que basta con copiar todas las propiedades de catalina y pegrselas a perico, quedando la hoja de estilo de este modo:

    body{background-color:yellow; text-align:center} #global {background-color:#FF9900; margin:0px auto 0px auto; padding:2px 2px 2px 2px; width:800px; border:#000 1px solid} #bartolo {background-color:#00CC00; margin:0px 2px 0px 0px; width:80px; float:left; border:#000 1px solid; text-align:left} #catalina {background-color:#00CCFF; margin:0px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:center} #perico {background-color:#00CCFF ; margin:2px 0px 0px 0px; width:712px; float:left; border:#000 1px solid; text-align:justify} p {padding:10px 10px 10px 10px} Vers que hemos puesto dos pixeles (2px sealado en rojo arriba) a perico de separacin por arriba, para que no quede pegado a catalina. Adems hemos cambiado el text-align de catalina a center (sealado en rojo arriba) , pues al llevar un ttulo mejor quedar si est centrado. Si proponeis algn otro ejemplo en el Foro CCTW intentar resolverlo y publicarlo aqu, de acuerdo?

    .ejemplo rpido Quiz para muchos no sea sencillo maquetar una pgina HTML con CSS, y mucho menos cuando queremos maquetar a 3 columnas con encabezado y pie, para lograr un resultado parecido a este:
    encabezado col principal pie col

    Para lograrlo vamos a seguir estos sencillos pasos Primero, echemos un vistazo a nuestro archivo CSS. Deber contener algo as:
    body { margin:0; padding:0; font-size:80%; font-family: sans-serif; } #wrap{ width:780px; margin: auto;

    text-align:left; } #header{ height:100px; background: url(../img/header.jpg) no-repeat top left; margin: 0 0 0 0; padding: 0 0 0 0; } #contenedor { width: 80%; margin: auto; padding:0; display: table; border: 1px solid black; } #row { display: table-row; } #izquierda { width:150px; padding:1em; background: #EEF; display: table-cell; } #derecha{ width:150px; padding:1em; background:#FEE; display: table-cell; } #central{ padding: 1em; background:yellow; display: table-cell; } #pie{ clear:both;

    margin: 0 0 0 0; padding: 0 0 0 0; }

    Y el cdigo para el archivo HTML va a ser ste. Una vez llamada la hoja de estilos, debemos crear el siguiendo el siguiente esquema.
    <body> <div id=wrap> <div id=header><p>Ttulo de tu pgina.</p></div> </div> <div id=contenedor> <div id=row> <div id=izquierda> <h4>Col. Izq.</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</p> </div> <div id=central> <h4>Col. Central</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa. Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</p> </div> <div id=derecha> <h4>Col. Dcha.</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum rutrum, urna eget gravida auctor, mauris neque tempus lorem, non condimentum sem purus et eros. Donec non lectus. Phasellus eu massa.

    Praesent felis metus, tempor a, vehicula ut, interdum id, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec est. Nulla facilisi. Integer a dolor. Duis vitae diam. Morbi laoreet tellus ut diam. Vestibulum lacinia congue nunc.</p> </div> </div> </div> <div id=pie> Aqu el contenido de tu pie de pgina. </div> </div> </body>

    El efecto que conseguiremos ser una pgina maquetada con cabecera y pie independientes, y tres columnas, que puedes transformar en dos o en una a tu antojo, con tan solo eliminar los bloques correspondientes a las columnas laterales a tu antojo. Y funciona. Comprebalo t mismo.

    S-ar putea să vă placă și