Paso 05
Seguimos ahora con el cuerpo de nuestro sitio, definimos wrapper en nuestro xhtml, y este es el que envuelve todo prácticamente, por lo tanto se vuelve nuestro contendor principal
CSS:
-
#wrapper{
-
width:760px;
-
margin:auto;
-
background-color:#FFF;
-
border-left:4px solid #E9F2FA;
-
border-right:4px solid #E9F2FA;
-
color:#666;
-
}
En este caso definimos el ancho de nuestro contenedor, el margen automático para que quede centrado, un color de fondo así como un borde a la izquierda y derecha del mismo y por último el color de texto que adoptará todo lo que esté dentro de nuestro contenedor.
22 comentarios para Layout XHTML y CSS II
Muy buen tutorial, he aprendido mucho, en serio muchas gracias…
Una duda donde está el archivo para bajarlo?
Muy buen turoial gracias infected
Muy buen turoial gracias infected pero en donde esta el archivo css
buuuuuuf ke buen tuto ahora si te la has ganado campeon
si muy bueno thx, apenas lo intento, y ojala si este para bajarse como antes, y como sugerencia para los prox, ponlos para bajarse y aprte en la web para que te sirva como visita y te indexen los buscadores con eso tambien.
Iam saying nothing here
En donde esta el archivo descargable que alguien me diga por favor.
Yetar, Eden y HostMx saben que como siempre un gusto ^^ , tienen razón, se me pasó poner los archivos, en un break se los pongo, me parece una excelente propuesta Host, trataré de hacerlo de ambas formas.
San: Ya nos dimos cuenta bro xP
Liquid: Al rato se los pongo bro, sorry… se me pasó!
Hey, muy buen tuto, muchas gracias.
Hola, muy bueno el tutorial, ahorita ando haciendo una web y eh seguido muchos de tus consejos, peor estoy teniendo un problema, a direncia del tutorial que tu expones yo uno una imagen de fondo para la seccion donde esta el sidebar y el contenido, estas dos secciones estan dentro de un div con el atributo d ela imagen de fondo, pero al agregar atributos al sidebar y al contendio el fondo ya no aparece, al parecer por los floats, queria ver si no hay una solucion para esto, si me puedes ayduar te lo agradecere muucho
Bueno, quiero comentarles que es uno de los mejores tutoriales que acabo de leer incluso como esta desarrollado y tambien cuenta muchisimo el tipo de tipografia, bueno yo tomo en cuenta eso por que dependiendo de como lo desarollan me anima aleerlo o a dejarlo.
Tengo algunas dudas:
wraper= container?
Creo que faltaron algunos hacks para que este desarrollo de la pagina creada como ejemplo se pueda visualizar en cualquier navegador.
He notado que en algunos tutoriales cuando escriben el codigo lo escriben asi:
body,header, etc.
o asi.
cuerpo,encabezado etc en otras palabras la diferencia es el idioma (ingles-español) con todo y eso aunque sean tutoriales cual es la menera de escribirlos o acaso los editores que se utilizan si perite o es valido que se escriban en español.
navarone:Muchas gracias bro.
darkbop: Si gustas mándame la url del sitio y con gusto vemos que sucede.
Felipe Rguez Alvarez: Gracias por los comentarios brother, en realidad muchas de las definiciónes son como mejor te acomode, pero hay algunas que si tienen que ser en inglés, que son las que hacen una pauta muy grande en cada diseño, por ejemplo, body, h1, h2, h3, p, ul, ol, li, pero a las que tú les puedes poner el nombre que desees son a los id ó class, puedes llamar el encabezado del sitio, header, cabecera, encabezado, top, como tú lo identifiques, lo mismo sucede con lo demás, menu, nav, navigation, tabs etc… todo lo que va después de un # ó un . (punto) son cosas definidas por uno mismo, las que no, son los tags del html.
Gracias por contestar mis dudas de verdad que fueron muy interesantes los datos que me das son muy interesantes y utiles.
Hola.
Llegue algo tarde a los comentarios. Este articulo me ha servido de mucho ya que aunque se maquetar bien css (bueno digamos al 80%) siempre tenia problemas con las validaciones, pero siguiendo estos consejos ahora me resultan validos.
Muy buen blog.
hola. increíble este tutorial.
MUCHAS GRACIAS!!
una pregunta: luego de tenerlo pronto al diseño, puedo de alguna forma “hacer” que sea actualizable como un blog?
cómo sería eso? que pasos tendría que dar?
porque la verdad es que me gustaría mucho aprender eso…
quizá sea una pregunta muy boba y pido disculpas de antemano ya que soy un mero “diseñador” y no me especializo en programación ni nada que se le parezca. saludos y gracias anticipadas!
pd: mi mail es torkaerius@hotmail.com por si tienen ganas de escribirme…
Felipe Rodriguez, ed Me alegra mucho saberlo, aunque es un layout dentro de todo muy simple, creoq ue para comenzar está bien
les agradezco mucho sus comentarios.
Victor Que bueno que te funcionó brother, de hecho a tu pregunta de esto hacerlo un blog hay en este sitio cuatro tutoriales para crear themes para WordPress basados en este layout, se empieza desde cero únicamente usando esta estructura como base.
Hermano, simplemente muchas gracias! Excelente tutorial!
Saludos desde Argentina!!!
Muchísimas gracias por este pedazo tutorial. He aprendido montones cosas gracias a ti. Y gratis! Estoy en deuda contigo, de veras.
hola, ey tengo una duda
quiero sacar el footer del div contenedor para que abarque todo el ancho de la pantalla, pero cuando lo hago el color de fondo del contenedor desaparece :s
como puedo solucionarlo??
saludos
Excelente explicacion, iFx
Gracias!!!
Hola Infected-FX, gracias mi hermano por este gran aporte. La verdad estos son los verdaderos tutoriales. Mil gracias.
Saludos y éxitos!!