Contenido ajustable a la ventana, ¿como?

**virtualcomo** · 29/12/2011, 03:15

Hola, estoy empezando una ueb y quiero hacer dos cuadros que se ajusten tanto en lo largo como en lo ancho (individualmente) manteniendo siempre un porcentaje ocupado de la ventana. Osea quiero que conserven proporcion independientemente del tamaño de la ventana. Pero me sucede que se va uno para abajo no se ajusta a lo alto ni a lo ancho, se hace chiquito y depues se va para abajo, apareciendo una barra de desplazamiento.
Screenshots:
https://picasaweb.google.com/1083798...eat=directlink
Codigo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ufa.com</title>
<link href="estilos.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<h1 style="border:thin solid #70aaf0; margin:1% 1% 1% 4%; padding:20% 17%;float:left">Verdad</h1>
<h1 style="border:thin solid #86db20; margin:1% 4% 1% 1%; padding:20% 17%;float:right">Mentira</h1>
</body>
</html>

**spitfire2** · 29/12/2011, 03:49

Podrias ponerle width=50% para que cada uno ocupe automaticamente el 50% de ancho de la capa que lo contiene, a proposito...por que no usas divs en lugar de etiquetas h1?

**virtualcomo** · 29/12/2011, 04:36

Sigue quedando uno abajo, y si utilizo divs, queda pior (lo mismo pero los cuadros por defecto mas chiquitos).

**victor5atodogas** · 29/12/2011, 08:51

Si no me equivoco es esto lo que tu quieres: http://www.cssplay.co.uk/layouts/background.html

Asegurate siempre de usar Divs con % y sin margin ni padding en la primera o ultima para ahorrarte esos pequeños problemas.

Saludos.

**virtualcomo** · 29/12/2011, 14:57

Iniciado por victor5atodogas

Si no me equivoco es esto lo que tu quieres: http://www.cssplay.co.uk/layouts/background.html

Asegurate siempre de usar Divs con % y sin margin ni padding en la primera o ultima para ahorrarte esos pequeños problemas.

Saludos.

Estuve horas tratando con el link que me pasaste y al fin, tengo la mitad! yuhu! se ajusta y ambos cuadros quedan en la misma linea:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ufa.com</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style=";">

<h1 style="position:absolute; left:2%; text-align:center; width:30%; font-family:Verdana; border:thin solid #70aaf0; box-shadow:0px 0px 30px #70aaf0; display:inline; padding:20% 8%"><a class="linksinformato" href="#">Verdad</a></h1>

<h1 style="position:absolute; right:2%; text-align:center; width:30%; font-family:Verdana; border:thin solid #86db20; box-shadow:0px 0px 30px #86db20; display:inline; padding:20% 8%"><a class="linksinformato" href="#">Mentira</a></h1>

</div>
</body>
</html>

Lo que me falta ahora es que se ajuste en lo vertical en vez de mostrar esa horrible barra de desplazamiento, ¿Cómo se hara? eso y no jodo por unas hora jajajaja. Gracias!

**victor5atodogas** · 29/12/2011, 15:46

No es por nada pero lo mejor seria que colocaras ese código en una pagina de pruebas y nos pasara el enlace para verlo en funcionamiento y detectar el error y darte la solución.

Saludos.

**virtualcomo** · 29/12/2011, 16:41

si, como se hace eso?

**victor5atodogas** · 29/12/2011, 16:53

Colocar ese codigo en una pagina .html y subirlo normal, como supongo lo estarás haciendo.

**virtualcomo** · 29/12/2011, 17:04

eso si, aca esta el link:
http://www.virtual.comocreartuweb.es/

**victor5atodogas** · 29/12/2011, 17:29

La solucion es:

Poner height: auto a h1 buscar y h1 publicar y colocarle un tamaño de fuente de 12px (por ejemplo), llegara un momento que no te lo hara bien porque le has puesto mucho padding (con porcentajes y ya a veces te hara cosas raras) pero repito CREO (por lo que he probado) que si haces eso lograras lo que pretendes.

Saludos.

**virtualcomo** · 29/12/2011, 17:52

pos tenia esperanzas, pero siguen sin acomodarse verticalmente los cuadritos, tan bonitos ellos. ah le pongo padding porque es la unica forma que se me ocurre para hacer los cuadros grandotes.

**victor5atodogas** · 29/12/2011, 18:27

Si te parece otro rato te lo monto yo con otro codigo y veras como queda.

Saludos.

**virtualcomo** · 29/12/2011, 18:29

vale, que yo sigo intentando

**virtualcomo** · 25/01/2012, 02:08

okey de alguna forma lo logre con este codigo:
@charset "utf-8";
/*Tres reglas de oro http://boozox.net/web/trucos-para-ha...ido-y-mejor/*/
*{ padding:0; margin:0;}
body{ font-size:100%; text-align:center}
img{ border-width:0;}

/*Saca cuadrito a los links*/
a{ outline-style:none;}

/*class para dejar links negros y sin subrayado*/
.linksinformato{ color:black;text-decoration:none;}

/*ubicacion y sombra para cuadros buscar, publicar y mas*/
#buscar{ position:absolute; left:1%; top:2%; bottom:2%; width:25%; padding:17% 8%; text-align:center; font-family:Verdana, Geneva, sans-serif; color:#FFAD5C; border:thin solid #70aaf0; box-shadow:0 0 30px #70aaf0; -webkit-box-shadow:0 0 30px #70aaf0; -moz-box-shadow:0 0 30px #70aaf0; text-shadow:#FFAD5C 0 -1px 1px;}

#publicar{ position:absolute; right:1%; top:2%; bottom:2%; width:25%; text-align:center; padding:17% 8%; font-family:Verdana, Geneva, sans-serif; color:#FFAD5C; border:thin solid #86db20; box-shadow:0 0 30px #86db20; -webkit-box-shadow:0 0 30px #86db20; -moz-box-shadow:0 0 30px #86db20; text-shadow:#FFAD5C 0 -1px 1px;}

#menuprincipal{ position:absolute; bottom:2%; right:47%; box-shadow:0 0 30px #F00; -webkit-box-shadow:0 0 30px #F00; -moz-box-shadow:0 0 30px #F00;}

/*efecto de fondo gradiente para ie chrome y firefox*/
#buscar:hover{ background: -moz-linear-gradient(top, white, #70aaf0); background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#70aaf0)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#70aaf0');}
#publicar:hover{ background: -moz-linear-gradient(top, white, #86db20); background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#86db20)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#86db20');}
#menuprincipal:hover{ background: -moz-linear-gradient(top, white, #F00); background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#F00)); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#F00');}

/*Define color y fuente para el título*/
#tituloquiero{ font-family:Verdana, Geneva, sans-serif; font-size:250%;text-align:center}
#quiero1{ color:#70aaf0; text-shadow: -1px -1px -1px rgba(10,10,10,.3);}
#quiero2{ color:#86db20;}

<!DOCTYPE HTML>
<html>

<head>

<meta charset="utf-8">
<title>QuieroQuiero.com</title>
<link href="estilos.css" rel="stylesheet" type="text/css">

</head>

<body>

<header id="tituloquiero">
<span id="quiero1">Quiero</span><br><span id="quiero2">Quiero</span>
</header>

<div>

<a class="linksinformato" href="#"><h1 id="buscar">Buscar</h1></a>

<a class="linksinformato" href="#"><h1 id="publicar">Publicar</h1></a>

</div>

<img id="menuprincipal" src="imagenes/ico-menu-1.png" alt="menu principal" width="64" height="64">

</body>

</html>

**johnpeterjp** · 25/01/2012, 03:37

Hola amigo virtualcomo felicitaciones por lo que has logrado hasta ahora en tu web, esta muy novedoso. Solo me gustaría, si me permites, aconsejarte achicar un poco los cuadros, los veo un mi note y pasan el tamaño vertical. Mi resolucion es 1366x768px y no queda ajustado.

Mi apreciación es que no por tamaño impresionas sino por tu trabajo y lo que creaste lo hace perfectamente. Una foto no impresiona por su tamaño, sino por su contenido,.. No sé si me entiendes ? Me refiero al efecto logrado más que el avasallador tamaño.

Te muestro un ejemplo; Mira esta web... [ URL NO DISPONIBLE ] - te fijas que visualmente te agrada e impresiona, ciertamente ? Eso sin, ser exagerada y con lo justo. Tiene un efecto que podríamos comparar al que has hecho tu en la web.

Es una visión para que recibas e interpretes, siempre con la idea de ayudarte. Saludos.