Redimension de ventana

unodoscuatro · #1 (**permalink**) 26/09/2012, 00:58

Que tal, tengo un problema, estoy creando una web pero si re dimensiono el tamaño de la ventana, osea la ago mas chica, todo se solapa los div, textos e imagenes se acoplan unos arriva de otros.. alguna solucion? existe una regla css para que no pase eso o que puede ser?

C2am · #2 (**permalink**) 26/09/2012, 01:33

Hola
Deja un enlace para ver el/los motivos del problema.

Seguramente estas usando medidas en % en los contenedores.
Una solución rápida es definir el ancho del contenedor general (si es que tienes uno) en pixeles.
Pero sin código o enlace, solo estoy adivinando.

Saludos

unodoscuatro · #3 (**permalink**) 26/09/2012, 02:21

Cita:

Iniciado por C2am

Hola
Deja un enlace para ver el/los motivos del problema.

Seguramente estas usando medidas en % en los contenedores.
Una solución rápida es definir el ancho del contenedor general (si es que tienes uno) en pixeles.
Pero sin código o enlace, solo estoy adivinando.

Saludos

Gracias por contestar y aqui esta el codigo:

Código HTML:

<body>
	<div id="contenedor" class="limpiar">
    	<div id="header" class="limpiar">
        <!-- Inicia el form Oculto-->
    		<div id="formOculto" class="limpiar">
            	<div id="contenidoCajafo">
                        <h1>Bienvenido a <strong>HomelesZ</strong></h1>
                    <p>La web que te entiende!</p>
                  <p>Aun no eres un <b>Homelesz?</b> Pues que esperas <b><a href="registro.php">Registrate!</a></b></p>
                </div>
            	<div id="loginBox">
                	<label for="nick">HomelesZ id:</label><br/>
                    <input type="text" name="nick" id="nick" /><br/>
                    <label for="passwd">Password:</label><br/>
                    <input type="password" name="passwd" id="passwd" /><br/>
                    <button type="button" id="entrar">Entrar!</button>
                </div>
                <div id="quienesSomos">
                	<p><a href="somos.php">Quienes Somos?-</a></p>
                </div>
            </div>
		<!-- Termina el Form Oculto -->
		
        <!-- Inicia el toolbar-->
        <div id="toolbar">
        	<div id="banner">
            	<p><img id="banner1" src="img/logo.png" alt="HomelesZ" title="Home"/></p>
            </div>
            <div id="funciones">
            	<ul>
                	<li id="registrar"><p>Unete a los HomelesZ</p></li>
                    <p id="separador">|</p>
                    <li id="logear"><p>Entrar</p></li>
                </ul>
            </div>
        </div>	
        <!-- Termina el Toolbar-->
        </div>
    	
        <div id="contenido">
        </div>
        
        <div id="footer">
        </div>
    </div>

Mi hoja de estilos seria la siguiente:

Código:

#contenedor{
	position:relative;
	width:100%;
}
#formOculto{
	display:none;
	background:#1e1e1e;
	height:200px;
}
#contenidoCajafo{
	margin:15px;
	float:left;
	text-align:center;
}
#contenidoCajafo h1{
	text-align:center;
	color:#ad0d0d;
	font-size:36px;
	font-weight:bold;
	font-family:Geneva, sans-serif;
}
#contenidoCajafo p{
	margin:15px;
	font-size:20px;
	text-align:right;
	color:#cdd3e9;
	}
#contenidoCajafo a{
	text-decoration:none;
	}
#loginBox{
	position:absolute;
	left:70%;
	color:#cdd3e9;
	font-weight:bold;
	font-size:17px;
	margin-top:25px;
	padding:10px;
	float:left;
	text-align:center;
	width:200px;
	border: 3px solid #ad0d0d;
	border-radius: 0px 0px 15px 15px;
}
#quienesSomos{
	position:absolute;
	top:165px;
	left:20%;
	font-size:20px;
	color:#BD1311;
}
#quienesSomos a{
	color:#BD1311;
	text-decoration:underline;
}
#toolbar{
	height:50px;
	background:#ad0d0d;
	border-bottom:3px solid #000;
}
#banner{
	margin:5px;                                                
	margin-left:25px;
	float:left;
}
#funciones{
	float:left;
	position:absolute;
	left:70%;
}
#funciones li{
	padding:5px;
	font-size:18px;
	font-weight:bold;
	float:left;
	margin:5px;
	margin-top:10px;
	border:1px solid #000;
	color:#cdd3e9;
	border-radius:3px;
	background:#1e1e1e;
}
#separador{
	float:left;
	margin:5px;
	margin-top:12px;
	background:none;
	border:none;
	color:#000;
	font-size:25px;
}

Gracias, se soluciono poniendo una medida en px al contenedor general! un saludo, Tengo otra duda y quisiera ver si me podrias ayudar aunque ya es con respecto a jQuery, si te fijas hay un div que estaria oculto, ps con jquery al presionar entrar ese contenido aparece, el problema esta en que aparecen primero el #loginBox, y el #quienesSomos.. este problema se que viene de la regla position en los ya mensionadoz div, pero habria una forma de hacerlo funcionar?
aca estan las funciones en jQuery:

Código PHP:

  var todo = $(document);
todo.ready(function hoverBanner() {
    var banner = $("#banner1").hover(function entra(){
        banner.attr("src","img/logoHover.png");
        banner.css("cursor","pointer");
        },function sale(){
            banner.attr("src","img/logo.png");
            })
});

todo.ready(function clickLogo() {
    var banner = $("#banner1").click(function redirige(){
        $(location).attr("href","index.html");
        });    
});

todo.ready(function hoverBtn() {
    var btn = $("#funciones li").hover(function entra(){
        btn = $(this);
        btn.css("color","#1E1E1E");
        btn.css("background","#CDD3E9");
        btn.css("cursor","pointer");
        },function sale(){
            btn.css("color","#CDD3E9");
            btn.css("background","#1E1E1E");
            });
});

todo.ready(function clickRegistro() {
    var btn = $("#registrar").click(function clickBtn(){
        $(location).attr("href","registro.php");
        });
});

todo.ready(function clickLogin(){
    var btn = $("#logear").click(function mostrarOculto(){
        var oculto = $("#formOculto").slideToggle("fast");
        });
});

C2am · #4 (**permalink**) 26/09/2012, 05:16

En cuanto a jquery, mucho no puedo ayudarte, lo siento.
Tal vez deberías hacer esa consulta en el foro de javascript.

Saludos

unodoscuatro · #5 (**permalink**) 26/09/2012, 13:34

Cita:

Iniciado por C2am

En cuanto a jquery, mucho no puedo ayudarte, lo siento.
Tal vez deberías hacer esa consulta en el foro de javascript.

Saludos

Sale Bro Gracias!