centrado (html + css)

9
TEMA 12: CENTRAR EL CONTENIDO "ACTIVIDADES HTML5 Y CCS3" EQUIPO: CYBER/IDEAS GRUPO: 4AMPG INTEGRANTES: *EDHER JAIR CORONA COYOTZI *ELIAS RODRIGUE CHIMAL *GERARDO MIGUEL QUECHOL ZARATE *HUGO EDUARDO HERNANDEZ MARQUEZ *JESUS ENRIQUE LUNA PEREZ

Upload: jair-c-corona

Post on 09-Jul-2016

228 views

Category:

Documents


0 download

DESCRIPTION

Mostramos como centrar los textos dentro del lenguaje de HTML + CSS

TRANSCRIPT

Page 1: Centrado (Html + CSS)

TEMA 12: CENTRAR EL CONTENIDO "ACTIVIDADES HTML5 Y CCS3"

EQUIPO: CYBER/IDEAS GRUPO: 4AMPGINTEGRANTES:*EDHER JAIR CORONA COYOTZI*ELIAS RODRIGUE CHIMAL*GERARDO MIGUEL QUECHOL ZARATE*HUGO EDUARDO HERNANDEZ MARQUEZ*JESUS ENRIQUE LUNA PEREZ

Page 2: Centrado (Html + CSS)

• CENTRAR LAS CAJAS EN LA PÁGINA• Uno de los mayores dolores de cabeza es el posicionamiento de bloques (<div>,

<section>, <header>, <aside>, etc..) en una ubicación determinada sin que éstos se muevan o descoloquen por cualquier cambio en el contenido anterior o posterior.

• Para ello, vamos a ver algunos aspectos a tener en cuenta:

• 1. Primero vamos a partir de un ancho global fijo de la página, que en este ejemplo será de 1000 píxeles. A partir de esta medida general (del <body>) el resto de bloques se centrarán según su propia anchura.

• En el CSS definimos la anchura del <body> y el posterior centrado de los bloques que contenga el <body>

Page 3: Centrado (Html + CSS)

• ACTIVIDAD: CENTRA EL CONTENIDO

• Esta actividad se basa en centrar el contenido tanto de los 3 <article> (que aunque parecen estar centrados no lo están formalmente) y los enlaces del <nav> siguiendos los siguientes pasos:• Centra totalmente los 3 <article> que en la actividad del tema

anterior separaste utilizando la propiedad 'margin'.• Centra el contenido del <nav>, dejando una separación del

<header> de 50 píxeles.

Page 4: Centrado (Html + CSS)

SE OCUPARA EL CODIGO (SITIO DE ACTIVIDADES ANTERIORES)

Page 5: Centrado (Html + CSS)

SE INGRESARA LA NUEVA SECCION DEL CODIGO

Page 6: Centrado (Html + CSS)

SE CENTRARIAN CORRECTAMENTE LAS DIVISIONES

• Deido a un fallo en el computador se uso este ejemplo, ya que las imágenes no estaban disponibles

Page 7: Centrado (Html + CSS)

• CENTRAR EL <NAV>

• Para centrar el <nav> vamos a darle la anchura justa que tiene y después configurar sus márgenes izquierdo y derecho en automáticos, para que se centre horizontalmente.• estilos.css

Page 8: Centrado (Html + CSS)

SE INGRESA EL CODIGO PARA EL CENTRADO

Page 9: Centrado (Html + CSS)