Mi web se ve agranda en resoluciones distintas

Capullito1987 · #1 (**permalink**) 12/09/2009, 09:41

Llevo 5 dias que no se arreglar este problema. Acabo de hacer una web de un catering y mi problema es que en algunas resoluciones se ven muy agrandadas y en otras no. Por ejemplo en la resolucion 1024 x 768 se ve muy agrandada y en en 1280 x 800 es como en realidad de beria de verse. Que puedo hacer?
ayudenme por favor si no arreglo eso no cobro, jajaja

ElJavista · #2 (**permalink**) 12/09/2009, 13:08

Lo mejor es hacerla de un ancho fijo, así se verá bien en cualquier resolución, se recomienda 960 píxeles. Espero que te sirva.

Capullito1987 · #3 (**permalink**) 12/09/2009, 14:03

yo soy nuevo en esto, que codigos tendria que poner. He estado mirando por ahi y me comentaron coger toda la web en una capa, al estilo

<body>
<div nombre>
toda la web
</div nombre>
</body>

Y luego en CSS, ponerle a esa capa unas caracteristicas. E probado muchas opciones diferentes pero nada de nada. Porfavor ayudenme que es lo que me falta pa cobrar, jaja

NUCKLEAR · #4 (**permalink**) 12/09/2009, 14:13

No solo hace falta poner un contenedor y darle un ancho fijo, tambien depende de lo que tenga dentro, apuesto mis polainas a que usaste Dreamweaver y tablas.
de todas maneras sin codigo no hay ayuda.

Capullito1987 · #5 (**permalink**) 12/09/2009, 14:35

te mando los codigos del CSS??

aki tienes.

/*
Design by Metamorphosis Design

Released for free under a Creative Commons Attribution 2.5 License
*/

a:link {
color: #FF9900;
}

a:hover{
text-decoration: underline;
color: #353535;
}

a:visited {
color: #ff4200;
}

*
{
margin: 0;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

body
{

font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #666666;
background: #000100 url(images/bg.jpg);
}

#web{
position:absolute;
top: 64px;
right: 80px;
bottom: 64px;
left: 80px;
}

#bg_top{
background:url(images/bg_top.jpg) repeat-x top;
}

#main
{
margin: 0 auto;
width: 980px;
padding-top: 57px;
}

#header
{
width: 980px;
margin: 0 auto;
height: 273px;
background: url(images/header.jpg) no-repeat center bottom;
}

#logo
{
padding-left: 40px;
text-align: left;
padding-top: 120px;

}

#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}

#logo H2 a
{
font-size: 10px;
}

#buttons
{
width: 980px;
height: 39px;
margin: 0 auto;
}

#buttons ul {
float:right;
padding-right: 40px;
margin: 0px;
}

#buttons li {
display: inline;
}

#buttons a {
display: block;
float: left;
width: 138px;
height: 29px;
background: url(images/menu.gif) no-repeat;
text-align: center;
text-decoration: none;
color: #7e8901;
font-weight: bold;
font-size: 14px;
padding-top: 10px;
margin-right: 2px;
}

#buttons a:hover {
width: 138px;
height: 29px;
background: url(images/menuhover.gif) no-repeat;
}

#content
{
width: 980px;
background: #fdffb9;
margin-bottom: 5px;
padding-top: 20px;
padding-bottom: 22px;
}

#left
{
width: 700px;
background:url(images/leftbor.jpg) repeat-y right;
}

.text{
padding-left: 30px;
padding-top: 5px;
padding-right: 15px;
}

#left H1
{
color: #7e8901;
font-size: 28px;
padding-top: 10px;
padding-left: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}

.pred{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #b22d00;
padding-left: 30px;
padding-top: 15px;
margin-bottom: 5px;
}

#left a
{
color: #ff4200;
}

#left a:hover{
text-decoration: none;
color: #353535;
}

#left a:visited {
color: #3a7854;
}

.date {
margin-top: 25px;
color: #ff8d00;
font-size: 11px;
padding: 10px;
margin-bottom: 10px;
font-weight:bold;
background: url(images/datebg.jpg) no-repeat;
}

.date a {
color: #ff4200;
text-decoration:none;
}

.dateleft{
background:url(images/timeicon.gif) no-repeat left;
padding-left: 20px;
width:200px;
color: #ff4200;
}

.dateright{
float:right;
background:url(images/tages.gif) right no-repeat;
padding-right: 20px;
text-align:right;
height: 16px;
}

#post{
padding-left: 30px;
}

#col1{
width: 188px;
float:left;
}

#col1 ul{
padding: 0px;
}

#col1 ul li{
background:url(images/bg2.gif) no-repeat;
width: 188px;
height: 21px;
list-style: none;
padding-left: 30px;
margin-bottom: 5px;
padding-top: 3px;
}

#col1 ul li a{
color: #c17305;
text-decoration: none;
font-size: 11px;
}

#col2{
padding-left: 8px;
}

#col2{
width: 188px;
float:left;
}

#col2 ul{
padding: 0px;
}

#col2 ul li{
background:url(images/bg2.gif) no-repeat;
width: 188px;
height: 21px;
list-style: none;
padding-left: 30px;
margin-bottom: 5px;
padding-top: 3px;
}

#col2 ul li a{
color: #c17305;
text-decoration: none;
font-size: 11px;
}

#col3{
padding-left: 8px;
}

#col3{
width: 188px;
float:left;
}

#col3 ul{
padding: 0px;
}

#col3 ul li{
background:url(images/bg2.gif) no-repeat;
width: 188px;
height: 21px;
list-style: none;
padding-left: 30px;
margin-bottom: 5px;
padding-top: 3px;
}

#col3 ul li a{
color: #c17305;
text-decoration: none;
font-size: 11px;
}

#right
{
width: 252px;
padding-right: 7px;
padding-top: 7px;
padding-bottom: 7px;
float:right;
}

#right ul
{
list-style: none;
padding: 5px;
margin: 0px;
display:block;

}

#right ul li{
margin-bottom: 20px;
width: 192px;
}

#categories ul li {
margin-bottom: 5px;
background: url(images/ulbgtop.jpg) no-repeat left;
padding-left: 15px;
height: 18px;
}

#categories ul li a{
color: #b22d00;
font-size: 12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}

#partners ul li {
margin-bottom: 5px;
background: url(images/ulbgbot.jpg) no-repeat left;
padding-left: 15px;
height: 18px;
}

#partners ul li a{
color: #464646;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}

#right h2 {
color: #7e8901;
font-size: 23px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
}

#right a:link {
text-decoration: none;
}

#right a:hover {
text-decoration: underline;
}
#right a:visited {
text-decoration: none;
}

#right li a {
padding-left: 10px;
background: url(images/img09.gif) no-repeat 1px 5px;
}

#footer
{
height: 37px;
width: 614px;
margin: 0 auto;
font-size: 10px;
color: #000000;
padding-top: 20px;
text-align: center;
clear:both;

}

#footer a
{
color: #000000;
font-size: 10px;
text-decoration: none;
}
.padding
{
padding: 10px;
color:#FF0000;
font-weight: bold;
}

La cap web es la capa que cubre todo el body, esas caracteristicas que tiene son de las ultimas que he probado pero para nada me ha funcionado

Capullito1987 · #6 (**permalink**) 12/09/2009, 14:36

Ayundenme plis

Maicro · #7 (**permalink**) 12/09/2009, 14:52

Bueno, no soy ningún experto. De lo que veo en tu código es que la página no sobrepasa los 980 pixeles de ancho. Ergo, es lógico que en un monitor de 17'', a 1.024x768 apenas sobre a los márgenes de la ventana del navegador, pero a 1.280x1.024 te sobre bastante más. No digamos si encima lo ves un un panorámico de portátil de 1.280x800. Es lo que tiene trabajar a proporciones fijas. Si encima te visita alguien desde una PDA a 640x480, pues imagínate.

No obstante, algo que me choca de tu código que se contradice con los manuales que he leído es que configuras el tamaño de letra en pixeles, cuando dicen que debe de hacerse en anchos de "m". Pero, esto, no tiene que ver nada, creo.

Capullito1987 · #8 (**permalink**) 12/09/2009, 15:01

que crees que puedo arreglar aki compañero. Acepto criticas constructivas.

Maicro · #9 (**permalink**) 12/09/2009, 15:13

Critica constructiva, lo del tamaño de la tipografía. Lo del ancho, deja los anchos de las capas en porcentajes, pero el menú que intuyo de navegación te daría problemas con esos tamaños fijos que le has puesto -aunque no es divisible por el ancho de la capa, así es que no te ocupa todo, ¿no?-

Pero ya te digo, no soy ningún experto y seguro que se me escapa algo.

Capullito1987 · #10 (**permalink**) 12/09/2009, 15:47

Gracias Maicro lo pruebo y te cuento

Capullito1987 · #11 (**permalink**) 12/09/2009, 16:14

Que va se me pone la pagina desorbitada. No se que hacer.

Capullito1987 · #12 (**permalink**) 12/09/2009, 16:28

a ver, se que aki hay grandes webmaster, a ver si me lo podeis solucionar, que os lo puedo prometer, no tengo y perdon por la palabra cojones de arreglar este problema.

Maicro · #13 (**permalink**) 13/09/2009, 13:29

Lo siento. ¿No tienes la página colgada para ver los resultados?

deirdre · #14 (**permalink**) 13/09/2009, 16:53

Hola Capullito1987

Coincido totalmente con Maicro: para poder ayudar es importante ver la página completa (no sólo el css). Pon la url si la tienes online, o bien pon tu código completo (también puedes subir un zip a algún almacén).

De esa forma, seguro que alguien te ayuda.

Bye

Capullito1987 · #15 (**permalink**) 14/09/2009, 06:00

la web es cateringsanchez.com

pitufoweb · #16 (**permalink**) 14/09/2009, 07:35

Hola.

Usa medidas en porcentajes.

Ejemplo:

Contenedor = 85%

Columna Principal = 80%
Columna derecha = 20%

Después puedes agregar min-width y max-width para que que no se deforme mucho en resoluciones muy grandes o muy pequeñas.

Saludos
Bye