Entrar

Contenido ajustable a la ventana, como?

virtualcomo · · Solicitar retirada
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/108379874194112519778/29DeDiciembreDe2…
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 · · Solicitar retirada
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 · · Solicitar retirada
Sigue quedando uno abajo, y si utilizo divs, queda pior (lo mismo pero los cuadros por defecto mas chiquitos).
virtualcomo · · Solicitar retirada
victor5atodogas escribió: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 · · Solicitar retirada
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.
victor5atodogas · · Solicitar retirada
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 · · Solicitar retirada
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.
virtualcomo · · Solicitar retirada
okey de alguna forma lo logre con este codigo:
@charset "utf-8";
/*Tres reglas de oro http://boozox.net/web/trucos-para-hacer-disenos-en-css-mas-rapido-y…
*{ 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 · · Solicitar retirada
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.
virtualcomo · · Solicitar retirada
Muchas gracias por la colaboración. Ah y aquella pagina que me habias comentado la diseñaste vos?
virtualcomo · · Solicitar retirada
GENIALL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!![:)][:)][:)][:)][:)][:)][:)][:)][:)][:)][:)]
Thanks dude!