Ver Mensaje Individual
  #7 (permalink)  
Antiguo 29/04/2011, 00:45
Artium
 
Fecha de Ingreso: abril-2011
Mensajes: 16
Antigüedad: 13 años
Puntos: 2
Respuesta: Problemas ancho pagina web

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
Oh... Mis ojos ven una carcél.!!!
*lleno de celdas

Sinceramente no he visto tu codigo, es mucho y esta algo revuelto xD

pero si no se ajusta a tu ancho, has de tener por ahi contenidos con mas o menos ancho, dentro del body.

Yo suelo usar un contenedor y darle el ancho necesario, y dentro de este acomodar todo el contenido, y que se ajuste exactamente al ancho del contenedor.

Ya que si pones un border de 1 px, con eso basta para que un div crezca 2 px de ancho, y con eso se descuadra todo.

también si tienes un div de 700px y le agregas 10 de padding, lo ideal es ponerl 690 de ancho y con los 10 de padding, crece a 700PX, sin embargo, colocas los 700 y los 10 del padding, este crece a 710 y también se descuadra.

hay que tener muchas cosas en mente, yo suelo dibujar una maqueta en alguna libreta e ir haciendo mediciones, para no sobrepasar el ancho del CONTENEDOR.

Saludos.
Muchas gracias por tu respuesta.

Acabo de empezar con el diseño y estoy intentando aprender, asi que agradezco todas vuestras respuestas.

Pensaba que era bueno meter todo el contenido de una web dentro de bloques <div>. ¿Hay alguna manera más optima de diseñar?

Por otro lado, tengo un grave problema con las medidas xD, no se de que forma puedo saber en que margenes me muevo para así poder colocar los elementos donde me gustaria...

Os pongo el codigo .css a ver que os parece...

Código PHP:
#logo{
    
positionrelative;
}
#logoMain{
    
positionrelative;
    
right:100px;    
}
#seach{
    
positionrelative;
    
bottom::50px;
    
left:40px;
    }
#seachMain{
    
positionrelative;
    
bottom::50px;
    
right:100px;
    }

#access{
    
font-size0.8em;
    
positionrelative;
    
bottom:100px;
    
left340px;
    }
#accessMain{
    
font-size0.8em;
    
positionrelative;
    
bottom20px;
    
left235px;
    }

#menu{
    
fontimpact;
    
font-weight900;
    
positionrelative;
    
bottom5em;
    
left850px;
}
#menuMain{
    
fontimpact;
    
font-weight900;
    
positionrelative;
    
bottom90px;
    
left600px;
}
/*Con esto logramos que el menu se muestre horizontal (Pruebas)
ul.menu ul {
    float: left;
}*/

/*Ajustamos la anchura de la página web.*/
#contenedor {
    
width900px;
    
margin-leftauto;
    
margin-rightauto;
}

#categories{
positionrelative;
right:100px;
height:3px;
top:20px;
}
#info{
    
position:relative;
    
left:210px;
    
bottom:700px;
}
#info1{
    
position:relative;
    
left:600px;
    
bottom:730px;
}
/*Ahora colocamos en su sitio los elementos a punto de acabar, los nuevos y los destacados*/
#endingsoon{
    
positionrelative;
    
left:550px;
    
bottom:57.7px;
}
#new{
    
positionrelative;
    
left:200px;
    
top:180px;
}
#hits{
    
position:relative;
    
left:275px;
    
bottom:30px;
}
/*Posicionamos los enlaces de registro, acceso y howto*/
#register{
    
positionrelative;
    
left:180px;
    
bottom:225px;
    }
#identify{
positionrelative;
left500px;
bottom:335px;
}
#howto{
    
position:relative;
    
left:190px;
    
bottom:320px;
}
/*Posicionamos los enlaces de publicidad*/
#links{
    
position:relative;
    
left:890px;
    
bottom:957px;
    }

img{
    
border:none;
    
text-decoration:none;}
    
/*Esta propiedad elimina el scroll inferior del navegador. 
body {
overflow-x: hidden;
}*/

/*Con esto tratamos los enlaces. */
<style type="text/css">
a:link {text-decoration:nonecolor#0404B4;} /* Link no visitado*/
a:visited {text-decoration:nonecolor:#0404B4} /*Link visitado*/
a:active {text-decoration:underlinecolor:#0404B4} /*Link activo*/
a:hover {text-decoration:underlinecolor:#0404B4;background: #DEDBDB} /*Ratón sobre el link*/
</style
Muchas gracias a todos