Web descentrada en algunos navegadores
Hola, estoy comenzando con el CSS y a la vez que hago el curso, voy creando una web a modo de portafolio.
El caso es que en los navegadores, la web me aparece en el centro de la pantalla, pero se me ha ocurrido verla desde el iphone y cual ha sido mi sorpresa cuando he visto que me la desplaza a la derecha, sabéis cual puede ser el motivo?
Os pongo el CSS:
@charset "UTF-8";
/* CSS Document */
body {
background: #FFF;
font-family: 'Open Sans Condensed', sans-serif;
font-size:11px;
font-style:normal;
height: 100%;
width:956px;
min-width:956px;
position: inherit;
}
#wrapper {
background:#FFF;
margin-left:50%;
margin-top:12px;
margin-bottom:15px;
margin-right:50%;
width:956px;
height:100%;
position: inherit;
}
#header {
background:#FFF;
float:left;
width:956px;
padding:0px;
}
#logo-header {
float:left;
width:150;
height:80px;
border:0 auto;
text-align: left;
}
#line-header {
float:left;
width:956;
height:1px;
margin-top:10px;
}
#content {
float:left;
margin-top:8px;
width:956px;
height:650px;
}
#slider {
float:left;
width:056px;
height:300px;
}
#recent-work
}
#pictures {
float:left;
}
#footer {
width:956px;
height:30px;
background-color: #FFF;
position: relative;
text-align:center;
clear:both;
margin-top:100%;
position:absolute;
bottom:15px;
}
#footer-content {
width:956px;
height:30px;
margin-bottom:0 auto;
text-align:left;
position:relative;
font-size: 12px;
}
Y si veis que falta o sobra algo, agradecería que me lo comentaseis.
Gracias.
Raimon
Si estás empezando con CSS, te recomiendo que te focalices y te olvides por ahora de iphone. Por otro lado, veo que en los margins left y right del #wrapper pones 50%, y sospecho que eso no es correcto. No sé qué navegador estás usando para testear todo eso.... incluso puede ser que sea iphone y su safari el único que te hace un css como dios manda....
Si quieres que quede centrado, lo que hay que poner en lugar de ese 50% es "auto" (cuando usas porcentajes, esos se refieren al ancho disponible para el elemento al que se aplica el estilo, si no recuerdo mal. Por lo que ese 50% es un valor arbitrario que nada tiene que ver con centrar el contenido.
Evidentemente la solucion de margin-left/right: auto; no funciona en algunas versiones de IE, por lo que por tu salud mental te recomiendo también que te olvides de IE.
Saludos,
Raimon
PS: El wrapper, el header, etc.... supongo que ya sabes que no tienen porqué llamarse así... más que nada porque en algunos tutoriales parece que si no pones wrapper y container estás muerto... yo pongo camio y contenidor (camión y contenedor) porque los camiones llevan contenedores, y me quedo tan ancho. El que tú te sientas como propio el código que estás usando también juega su papel.
Ten presente también que "teóricamente" no puedes asignar un ID a un elemento que se repita en el documento. En otras palabras, en un documento no puede haber dos elementos con el mismo ID. Es razonable usar un ID para un wrapper o cosas así, pero no lo tengo muy claro para un #pictures, por ejemplo. La idea que quiero transmitir es que las clases te sirven prácticamente igual que los IDs en lo que al CSS respecta; usarás los IDs cuando tengas que acceder a las propiedades de esos elementos por Javascript.
Usuario desconocido
Vaya, muchas gracias Raimon, me apunto todo lo que comentas y corrijo lo que apuntas. La verdad es que al venir de tablas, ando bastante perdido con CSS, pero lo cierto es que espero tenerlo controlado pronto... espero. En cuanto al navegador, estoy testeando con Chrome, que es el que me da más confinaza...
Muchas gracias !!!
Raimon
Bonette
Siempre recomiendo lo mismo, pero nunca me cansaré de hacerlo:
en catalán y en inglés: http://www.dense13.com/wec/curscss/
Ánimo!
Raimon
JCMartinez
Hola Bonette.
Para alinear al centro la web, añade margin:auto; a tu contenedor que quieras centrar. En Internet Explorer creo recordar que había un problema para centrar con margin y tienes que usar text-align:center; para conseguir el mismo efecto.
Por otro lado te recomiendo que uses un reset ántes de continuar con el proyecto. Por si no te lo han explicado en el curso, el reset "resetea" (valga la redundancia) los estilos por defecto que aplican los navegadores. Es un archivo css que se añade a tu web.
Puedes encontrar mucha información al respecto en Google buscando por reset css.
Chao
Usuario desconocido
Muchas gracias JC, conseguí centrar la web en los navegadores, aunque incluiré el"reset" que comentas para evitar problemas que puedan surgir. Cuando tenga el proyecto terminado, os lo enseño para opiniones y demás...
Gracias por vuestra ayuda !!!