Ajustar web al navegador y resolucion

edyuin · #1 (**permalink**) 25/10/2011, 03:58

hola buenas.
lei este articulo en una web:
Presumo que tienes un contenedor principal de tu pagina me refiero aun DIV o una tabla que contiene toda la pagina (bueno si no lo tienes tendras que hacerlo) y solo pornle el width en % no en pixeles fijos sino en % osea le puedes poner 100% y ucupara el 100% de navegador u 80% y hara eso.

Y me dispuse a hacerlo lo que nose si esta bien hecho o no yo quiero ajustar mi web para que siempre se vea igual y nose nada de css solo se php y html y mysql.
como me podria arreglar con lo que se??
o si alguno que sepa css me quiere enseñar a hacer eso solo le estaría muy agradecido.
Muchas gracias

Miztli · #2 (**permalink**) 25/10/2011, 14:35

Hola,
Te mando un link de un libro de css que considero bueno para quien no sabe de css.

http://www.librosweb.es/css/index.html

Por cierto, css no es tan difisil como uno cree.

Saludos!

EHA · #3 (**permalink**) 25/10/2011, 15:22

Piensa que css no es dificil (solo si quieres crear cosas muy complejas) y no esta considerado un lenguaje de programacion ya que es un lenguaje de marcas como el html que tampoco es programacion. Si sabes programar en php CSS no te resultara complicado, y menos unas nociones basicas, que en mi opinion, son suficientes.

Para trabajar con el tema de los div, lo mejor es que uses css que da mas control, una vez que aprendas a usarlo no pararas.

Pero bueno, en html tambien puedes usar porcentajes ejm <table width="50%">

growstudio · #4 (**permalink**) 25/10/2011, 19:38

Podrías especificar mejor lo que deseas? Si quieres que tu web se vea igual en todos lados pues es practicamente imposible, puesto que algunas pantallas son mas chicas que otras y el espacio claro se reduce. Lo que puedes hacer es trabar todo dando tamaños específicos a cada cosa. Usar porcentajes en los divs lo unico que hará es deformar el sitio para que encaje en el porcentaje del total de la pantalla, por asi decirlo, si abres tu pagina en una netbook, puede que un div que era cuadrado en tu maquina, ahí se vea muy rectangular y el texto extendido. Creo que necesitas un diseñador web! :)

memoadian · #5 (**permalink**) 26/10/2011, 00:42

Cita:

Iniciado por growstudio

Creo que necesitas un diseñador web! :)

Yo creo que lo que necesita es un maquetador por que los diseñadores en lo último que piensan es en la resolución de pantalla, he trabajado con varios y siempre dejan eso de lado, solo les importa lo visual yo soy el que me tengo que quebrar la cabeza para justarlo en todos lados.

masclet · #6 (**permalink**) 26/10/2011, 02:29

Lo que vienen a referirse en el artículo que leiste es que el div contenedor, que es donde va todo el resto de contenido del sitio va a estar en porcentaje. Al 100%, de esta manera lo que logras es que este contenedor, se ajuste a todo el ancho de la pantalla.
El resto de divs que van en este contenedor, si que ya tienen normalmente un ancho fijo, por lo que lo único que ocupará toda la pantalla es el contenido del div contenedor.

Como te comenta algún compañero, al diseñar una web lo que se persigue es que se vea de la mejor manera posible en todos los navegadores y para el mayor número de resoluciones, por lo que hay que tomar unas decisiones antes de comenzar el diseño

edyuin · #7 (**permalink**) 26/10/2011, 05:03

gracias a todos intentare ajustarlo haber que tal se da jeje muchas gracias.

edyuin · #8 (**permalink**) 26/10/2011, 13:37

el css sirve tanto para php como para html no? es que desde donde lo estoy aprendiendo sale como si solo se usase para html. es una duda para el que lo sepa tonta pero yo no se nada de css y estoy aprendiendo. gracias.

memoadian · #9 (**permalink**) 26/10/2011, 15:05

php es una cosa y html otra, php es un lenguaje de programacion que crea html dinamico por lo que css ni siquiera sabrá si php esta ahi o no.

agus__1987 · #10 (**permalink**) 26/10/2011, 15:24

Si quieres que tu web se vea EXACTAMENTE IGUAL (salvo pequeñas variaciones debido a los diferentes navegadores) en la inmensa mayoría de los monitores, (a nivel mundial 1074x768 es la resolución mas usada, la que toman como referencia los portales mas visitados), debes tener el contenido principal en un <div id="wrapper"></div> principal llamado normalmente como contenedor o wrapper, así ocupará exactamente la misma medida sea cual sea la resolución, se centra este div, y se le da tamaño, (with=990px (desde CSS))

edyuin · #11 (**permalink**) 27/10/2011, 03:55

lo he intentado hacer y no hace nada mira lo e hecho asi:

Código PHP:

  <html>
<head>
<title>Problema</title>
<div with=9px >
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de unnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>

Claro que esto simplemente es una prueba.

agus__1987 · #12 (**permalink**) 27/10/2011, 05:37

Widht 990px, (has puesto 9)lo tienes que poner desde css y para esto debes dar un id al div:
html:
<div id="wrapper"></div>
css:
#wrapper
{with:990px;}
A partir de aquí mete todo el contenido de la web en este div, y cogerá el height dependiendo del contenido

edyuin · #13 (**permalink**) 27/10/2011, 06:05

Mira he hecho esto pero sigue sin ajustarse se ve exactamente igual:

Código PHP:

  <div id="wrapper">

contenido de la web........
</div>
</body>
</html>

</div>

[css]
#wrapper
{
with:990px;
}

[/css]

edyuin · #14 (**permalink**) 27/10/2011, 07:18

fallo en algo??

agus__1987 · #15 (**permalink**) 27/10/2011, 11:49

Bien me imagino que con ajustar, te refieres a que no se centra; para centrar :
css:
#wrapper (añade esto)
{margin-left:auto;margin-right:auto;}

memoadian · #16 (**permalink**) 27/10/2011, 21:19

otra forma es

Código CSS:

Ver original#wrapper{
    position:relative:
    margin:0 auto;
}

edyuin · #17 (**permalink**) 28/10/2011, 04:12

vereis es que las imagenes se me quedan mas grande de lo debido pero en otros navegadores salen bien es por la resolucion como hago para que estas no se hagan mas grandes en otros resoluciones? la pagina se ajusta como voy queriendo pero las imagenes me quedan grandes.

#18 (**permalink**) 28/10/2011, 12:55

Las imágenes solo pueden tener un tamaño, a menos q uses javascript o un lenguaje de servidor para manipular los tamaños segun la resolución, lo unico que cambia de acuerdo a la resolución son las capas o las tablas con {width: 100%} y asi

edyuin · #19 (**permalink**) 28/10/2011, 14:28

y como puedo cambiar la resolucion de las imagenes o como lo hago con javascript se puede hacer? sería muy dificil? me puedes decir como se haría o donde buscarlo? gracias

memoadian · #20 (**permalink**) 29/10/2011, 23:35

tambien a una imagen se le puede añadir un tamaño en pporcentajes:

Código HTML:

Ver original<img src="mi_imagen.jpg" class="resize" alt=""/>

Código CSS:

Ver original.resize{
    width:20%;
}

edyuin · #21 (**permalink**) 30/10/2011, 05:38

Lo he probado y es lo que buscaba me as ayudao muchisimo muchas gracias.

edyuin · #22 (**permalink**) 31/10/2011, 06:37

oye y esto tambien sirve para los div??
esque en los div no me va.

memoadian · #23 (**permalink**) 31/10/2011, 07:37

si al div le pones las clase resize seguro que debe ir, a menos que otra regla cancele el ancho.

lunaaladeuna · #24 (**permalink**) 02/11/2011, 07:04

Hola,
Estoy intentando adaptar una web a la resolución a diferentes tamaños de pantalla.

Estoy usando este código de javascript:
<script type="text/javascript" language="javascript1.2">
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="50%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="65%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="90%";}
if(window.screen.availWidth == 1280)
{window.parent.document.body.style.zoom="90%";}
if(window.screen.availWidth >= 1440)
{window.parent.document.body.style.zoom="100%";}
}
</script>
<body onload="comprobarScreen()">
Contenido de la web
</body>

El problema es que este código me funciona en todos los navegadores, excepto en firefox, donde la web no se ajusta al porcentaje que yo le indico.

¿Que debo hacer? Sabeis de otro código o algo que me pueda ayudar a solucionar esto?? me estoy volviendo loca!

Gracias!!!