Problemas de maquetación CSS
Hola,
tengo un pequeño problema con la maquetación de un CSS. Maquetando no he tenido nunca ningún problema, pero jamas había hecho lo que necesito hacer.
He hecho una web en la que hay una imagen vertical en el lado izquierdo de la ventana. Ésta es decorativa. Es decir, que da igual en la resolución que se vea. Cada uno verá lo que su resolución le deje.
Para esto, la imagen es muy larga. Así si tienes alta resolución, la banda sigue saliendo y no se corta.
Para que no me salga scroll por culpa de la banda, he pensado que habría que ponerla como background.
La he puesto y todo correcto.
El problema viene cuando maqueto la web.
La web va alineada a la imagen vertical, que esta puesta en background. Y eso me lleva al problema de que en el caso que redimensionemos la ventana, se mueva todo y quede todo desalineado.
Como puedo hacer esto?
Os daré un ejemplo de una web que lo tiene hecho (pero en horizontal): http://www.xem1.com/
Y un ejemplo de mi web. Para que veáis la imagen que os digo.
Muchas gracias.
Usuario desconocido
Creo (no estoy muy seguro) que la banda, en vez de ponerla en el background del body, tienes que ponerlo en la capa que contiene "toda la web", y asigrnarle a esta un ancho fijo. Pero vaya, tendría que probarlo, así a bote pronto es lo unico que se me ocurre.
sanntu
Yo sugiero que ubiques tanto el fondo (la imagen) como el texto de la web utilizando medidas relativas [portentaje... ;) ]
Que quiero decir?
Por la imagane que pusiste, puedo suponer y lo arreglaria de la siguiente manera:
imagen {
margin-right: 20% ;
}
texto {
margin-right: 40% ;
}
También se puede jugar con valores absolutos.
Espero que hayas entendido. De todas formas, puedes consultar nuevamente...
webfordesigners
Hola!
No se si lo he entendido bien. Pero por lo que me parece entender lo solucionarías con
body{
background-position: top left;
padding-left: [ancho de la imagen]px;
}
Hacer que el fondo se muestre siempre pegado a la izquierda sin importar el tamaño de la pantalla y luego que el contenido se separe solo XX pixeles de la izquierda.
es eso?
Igual no lo he entendido bien?
Santi
albking
Gracias!
He conseguido mas o menos maquetar de forma distinta. Os lo pongo para que veáis.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Saquet Arquitectes i Associats</title>
<link rel="stylesheet" href="estils.css"/>
<body>
<div id="container">
<div id="text">Adreça inmillorable</div>
<div id="imagen"></div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
body{
margin-top: 0px;
}
#container{
width: 700px;
height:100%;
}
#text{
float:left;
width:510px;
height:100%;
text-align:right;
}
#imagen{
float:right;
width:190px;
height:100%;
background-image:url(dib_index.jpg);
background_repeat:no-repeat;
}
El problema es que si le pongo height:100%; no me sale la imagen. Si le pongo height:1000px; funciona. Pero no ya me pone el scroll.
Alguien sabe pq si esta en % no me sale?
Gracias.
markshock
por que al html y al body le has de definit height 100% también.
albking
Donde defino el html? El body lo he hecho en el CSS.
Pero no se donde definir el html... No creía ser tan inútil...
albking
Ya está!
Muchas gracias a todos. Sobretodo a ti, he solucionado el tema.
Lo dejo escrito por si alguien le pasa algo similar.
He definido la dimension por el css.
html{
height:100%;
overflow:hidden;
}
body{
margin-top: 0px;
height:100%;
}
Saludos!
markshock
de nada ;)
es un placer poder echar un cable!
albking
Preguntilla....
Debido al pantallote con el que trabajo, cuando la he maquetado, me he dado cuenta que si redimensionas la ventana, no aparecen scrolls por ningún lado.
Cual es la solucion?
Quitar el heght como 100%?
O poner tamaño al #container?
markshock
quitar el overflow:hidden; del html.
albking
Ostras... Pero si quito el overflow:hidden me aparece el scroll por lo grande que es la imagen del lateral. Y yo quiero que salga scroll si se necesita para leer la información que aparece en el lado derecho.
Hay alguna forma de hacerlo?