| Autor |
Mensaje |
-
kilometro6
Semi-Experto
|
 26-02-2011, 17:03 (UTC)
Título del mensaje: [Tutorial CSS] Tu primer diseño CSS |
|
|
Hola,
este es un tutorial sencillo para aprender a crear estructuras css. Es facíl de hacer y no lleva tiempo e intente explicar las cosas lo mejor posible.
Explique cada regla en el css en forma de comentario ej: /*esto es un comentario en CSS*/
Resultado final:
Lo primero es crear un contenedor donde ira el cabezal, el menu, el contenido y el footer.
Código: #contenedor {
width: 750px; /*es el ancho del contenedor, la altura de adaptara al contenido de este */
max-width: 750px;
margin: 0 auto /*esto centra el diseño*/
}
Ahora que tenemos el contenedor, crearemos las cosas que van en el.
El contenido:
Código: #contenido {
width: 740px; /*ancho contenido*/
margin: 2px 0px 2px 0px; /*margen que sirve para separar los demás contenedores (header y footer)*/
padding: 5px; /*sirve para dejar un espacio entre el texto y el borde del contenido*/
float: left; /*así ubicamos el contenedor*/
background-color: #E6ECEF; /*el color del fondo del contenido */
}
El header o cabezal:
Código: #header {
clear: both; /*ubicamos el header*/
background: url (url de la imgen del cabezal) no-repeat; /*el "no-repeat" sirve para que el cabezal no se repita y el "background: url" es para ima imagen en el cabezal.*/
min-height: 100px; /*el tamaño mínimo del cabezal*/
margin-bottom: 2px; /*es para dejar un espacio de 2px entre el cabezal y el menu*/
}
Si en lugar de una imagen en el cabezal quieres un fondo con color cambia el "background: url" por "background-color: #E6ECEF;"
Cambia lo que esta en color rojo para cambiar el color del cabezal. Tienes que usar colores RGB. Puedes obtener los valores RGB en mi web: http://kilometro6.es.tl/Tabla-de-colores.htm
El footer o pie:
Código: #footer {
clear: both; /*ubicación del footer*/
overflow: hidden;
min-height: 20px; /*tamaño mínimo del footer*/
background-color: #E6ECEF; /*el color del fondo del footer*/
}
El menu:
Código: .menu { /*no voy a explicar cada parte porque se confundiran*/
background-color: #E6ECEF;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
margin: 0;
padding: 0;
}
#menu a {
background-color: #E6ECEF;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background-color: #D4E7F1;
color: #fff;
padding-bottom: 8px;
}
Luego de terminar el css tenemos que crear los textos en formato HTML que "llamarán" a las características que pusimos en el CSS para que se visualicen. Este texto HTML en PWG se divide en 2 partes el "Texto por encima de la página" y el "Texto por debajo de la página".
Se dividen en la etiqueta o div donde comienza el contenido. La apertura queda en el texto por encima y el cierre en el texto por debajo. Entonces, entre esas 2 etiquetas ira el contenido.
Texto por encima de la página:
Código: <div id="contenedor">
<div id="header">
</div>
<ul class="menu">
<li><a href="#" title="Enlace genérico">Elemento 1</a></li>
<li><a href="#" title="Enlace genérico">Elemento 2</a></li>
<li><a href="#" title="Enlace genérico">Elemento 3</a></li>
<li><a href="#" title="Enlace genérico">Elemento 4</a></li>
<li><a href="#" title="Enlace genérico">Elemento 5</a></li>
<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
<div id="contenido"> <!--apertura contenido-->
Texto por debajo de la página:
Código: </div> <!--cierre contenido-->
<div id="footer">
</div>
</div>
Dudas o problemas decirlas en el tema porfavor.
Saludos! ______________ 
Ultima edición por kilometro6 el Sab Feb 26, 2011 1:13 pm; editado 3 veces
|
|
|
↑
|
|
 |
-
team-ayudawebs
Destacado
|
26-02-2011, 17:17 (UTC)
Título del mensaje: |
|
|
Olaaa
Buen tutorial . Kilometro6 , Felicidades =D ______________  |
|
|
↑
|
|
|
-
dedydamy0
Destacado
|
26-02-2011, 17:40 (UTC)
Título del mensaje: |
|
|
 ______________ PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG! |
|
|
↑
|
|
|
-
deathwood
Junior
Ubicación: Viva Mexico Cabr....
|
26-02-2011, 18:10 (UTC)
Título del mensaje: |
|
|
Gracias Aver si me animo
Hacer una planilla.
xD |
|
|
↑
|
|
|
-
tumamalaflogger
Semi-Experto
Ubicación: Buenos Aires Web:http://tumamalaflogger.es.tl Msn:Tumamalaflogger@live.com.ar
|
26-02-2011, 18:18 (UTC)
Título del mensaje: |
|
|
Muy bueno, creo que esto es único en el foro ______________  Luciano Jmz
 Luciano Jmz |
|
|
↑
|
|
|
-
m3sg
Semi-Experto
|
26-02-2011, 20:24 (UTC)
Título del mensaje: |
|
|
Ultima edición por m3sg el Sab Feb 26, 2011 4:45 pm; editado 2 veces
|
|
|
↑
|
|
|
-
tumamalaflogger
Semi-Experto
Ubicación: Buenos Aires Web:http://tumamalaflogger.es.tl Msn:Tumamalaflogger@live.com.ar
|
26-02-2011, 20:42 (UTC)
Título del mensaje: |
|
|
WTF!!!! ______________ Luciano Jmz
Luciano Jmz |
|
|
↑
|
|
|
-
mundo-pgd
Semi-Experto
Ubicación: San Francisco
|
26-02-2011, 20:47 (UTC)
Título del mensaje: |
|
|
Muy buen post :D
______________
We miss you Cliff Burton :-( |
|
|
↑
|
|
|
-
radiovijaer
Semi-Experto
Ubicación: El Salvador
|
|
|
↑
|
|
|
-
xartux
Nuevo
|
26-02-2011, 21:37 (UTC)
Título del mensaje: Buen Tutorial |
|
|
Buen Tutorial Kilometro6  |
|
|
↑
|
|
|
-
kilometro6
Semi-Experto
|
26-02-2011, 23:23 (UTC)
Título del mensaje: |
|
|
Gracias a todos por sus comentarios. Me dan más ganas de sacar otro tuto saber que el tutorial sirve de algo.
Por cierto, la imagen del perro me mato de risa xD -.- xD
Saludos! ______________ |
|
|
↑
|
|
|
-
nesbet
Semi-Experto
Ubicación: Buenos Aires - Argentina
|
26-02-2011, 23:25 (UTC)
Título del mensaje: |
|
|
Muy buen tutorial, está bien explciado aunque creo que se tendría que detallar y colocar más imágenes para cada código. |
|
|
↑
|
|
|
-
kilometro6
Semi-Experto
|
27-02-2011, 01:30 (UTC)
Título del mensaje: |
|
|
Nesbet, sinceramente ya no se como detallar mejor cada paso. Puse para que sirve cada línea de código de css (alguna que otra no ya que puse reglas un poco avanzadas). Quizas poner que con el . (punto) se usa class y con la # (almoadilla) se utiliza id y las diferencias de cada uno pero no quería hacer el tuto muy pesado.
Y luego puse una imagen al principio del tutorial donde nombraba cada parte del diseño para que al nombrar los códigos se tenga una referencia de que es cada código y como se va a ver.
Decime que parte te parecio que no esta bien explicada y con gusto puedo ver como la puedo mejorar  ______________ |
|
|
↑
|
|
|
|
Grazias.
