| Ver tema anterior :: Ver siguiente tema |
| Autor |
Mensaje |
dante_17
Nuevo Miembro
Registrado: 28 Nov 2007
Mensajes: 4
|
 Publicado: Mie Nov 28, 2007 8:35 pm Título del mensaje: Problema con capas ayudaaaaaaaa!!!!!!!!!! |
 |
|
Hola a todos.
Soy nuevo aki y tengo un problema con una pagina q estoy haciendo.
Tengo un buscador interno en la pagina y esta dentro de una capa (div) el caso es q en distintas resoluciones de pantalla se mueve de sitio la capa (a la derecha o a la izquierda)
asi tiene q kedar
asi es como la tengo.
plissssssssssss es urgente.
pd: por si sirve de algo esta capa esta dentro de otra q es el contenedor. |
|
| Volver arriba |
|
 |
r3dd3vil2
Moderador
Registrado: 19 Nov 2004
Mensajes: 1594
Ubicación: en ninguna parte.
|
| Publicado: Mie Nov 28, 2007 10:38 pm Título del mensaje: |
|
|
Toma las referencias del div desde la parte derecha de la pantalla en lugar de la izquierda 
Me explico, tu tendrás algo así:
| Código: |
| <div style="position:absolute; left:500px; top: 10px">BUSCADOR</div> |
En lugar de tomar de referencia el margen izquierdo (left:500px) toma el derecho (right:0px;) puede que asi te sirva 
(El numero 500 es un ejemplo, supongo que no coincidirá con el de tu capa)
Deberá quedar asi:
| Código: |
| <div style="position:absolute; right:0px; top: 10px">BUSCADOR</div> |
Un saludo!
_________________
Escuchar Musica Online
Aarón - Programador Web |
|
| Volver arriba |
|
|
abrichu
Yo soy el foro
Registrado: 20 Jul 2006
Mensajes: 1150
Ubicación: Latitud: 37.418 Longitud:-5.981
|
| Publicado: Mie Nov 28, 2007 10:48 pm Título del mensaje: |
|
|
Hola Dante_17. Casualmente me estoy leyendo un libro que entre otras cosas habla de CSS y creo haber encontrado la solución... si es que entiendo bien tu problema... es decir, que quieres que independientemente de la resolución la capa se muestre siempre a la derecha de la página.
Imagino que estableces el elemento dándole unas coordenadas concretas a la capa pero alineando desde la izquierda. Entonces al cambiar la resolución el resto de elementos cambian pero no lo hace, claro está, la capa. Para hacer lo que quieres, quizás deberías alinear la capa desde la derecha.
| Código: |
<html>
<head>
<style type="text/css" media="screen">
#objeto{
position:absolute;
top: 50px;
right:50px;}
</style>
</head>
<body>
<div id="objeto">
</div>
</body>
</html>
|
Ve haciendo pruebas con los datos a ver si te sirve. Saludos
_________________
www.garbajedepotanzos.com
Una vez leí por ahí que hay 10 tipos de personas: las que conocen código binario y las que no... |
|
| Volver arriba |
|
|
abrichu
Yo soy el foro
Registrado: 20 Jul 2006
Mensajes: 1150
Ubicación: Latitud: 37.418 Longitud:-5.981
|
| Publicado: Mie Nov 28, 2007 10:49 pm Título del mensaje: |
|
|
Vaya, has respondido mientras lo hacía yo ... bueno, por lo menos veo que no iba descaminado
_________________
www.garbajedepotanzos.com
Una vez leí por ahí que hay 10 tipos de personas: las que conocen código binario y las que no... |
|
| Volver arriba |
|
|
dante_17
Nuevo Miembro
Registrado: 28 Nov 2007
Mensajes: 4
|
| Publicado: Jue Nov 29, 2007 10:03 am Título del mensaje: |
|
|
Gracias abrichu y r3dd3vil2 voy a provar lo que me haveis dicho.
Espero q funcione. |
|
| Volver arriba |
|
|
dante_17
Nuevo Miembro
Registrado: 28 Nov 2007
Mensajes: 4
|
| Publicado: Jue Nov 29, 2007 9:24 pm Título del mensaje: |
|
|
No se si soy yo q lo hago mal pero no me sale.
por si a alguien le sirve aqui pongo el codigo.
| Código: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Eleven Componets</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.Estilo1 {
font-size: 14;
font-family: "Courier New", Courier, mono;
}
#Layer2 {
position:absolute;
width:158px;
height:357px;
z-index:2;
left: 722px;
top: 155px;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/espanaint.jpg')">
<div id="container">
<div id="inner">
<div id="header">
<table width="90" border="0" align="right" cellspacing="0">
<tr>
<td width="37"><img src="images/catala.jpg" alt="cat" width="37" height="18" align="right" /></td>
<td width="37"><img src="images/espana.jpg" alt="esp" width="37" height="18" align="right" id="Image1" onmouseover="MM_swapImage('Image1','','images/espanaint.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
</tr>
</table>
</div>
<div id="nav">
<ul>
<li><a href="pag1sp.htm">Home</a></li>
<li><a href="#">Catalogo</a></li>
<li><a href="#">Servicios a empresas</a></li>
<li><a href="pag2sp.htm">Contactar</a></li>
<li><a href="pag3sp.htm">Quienes somos</a></li>
</ul>
</div>
<div id="content">
<table width="635">
<tr>
<td width="627" height="36">
<div align="center" class="Estilo1">Venta, instalación y mantenimiento de ordenadores y redes locales </div></td>
</tr>
</table>
[b]<div id="Layer1" style="position:absolute; width:148px; height:55px; z-index:1; left: 732px; top: 134px; background-color: #E0DFE3; layer -background-color: #E0DFE3; border: 1px none #000000; visibility: visible;"><input type="text" name="buscar" value="Buscar..." />
<input name="submit" type="submit" value="Ir" />
</div>[/b] <p align="left"> </p>
<p><img src="images/apple.JPG" width="321" height="209" /></p>
<p> </p>
<div class="clr"></div>
</div>
<div id="footer">
<p>Copyright © ElevenComponets 2007. <br>
<a href=mailto:daniel@osmosislatina.com>Moises908</a> Production. All rights reserved.
</div>
</div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
</div>
</body>
</html>
|
|
|
| Volver arriba |
|
|
r3dd3vil2
Moderador
Registrado: 19 Nov 2004
Mensajes: 1594
Ubicación: en ninguna parte.
|
| Publicado: Jue Nov 29, 2007 11:35 pm Título del mensaje: |
|
|
Mira, te modifiqué el código, atendiendo a otros datos que no son los que te puse al principio, osea mediante otro método. Creo que tanto en IE como fn FF debe funcionar, si no te funciona con algun explorador dimelo y buscamos alguna alternativa 
| Código: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Eleven Componets</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.Estilo1 {
font-size: 14;
font-family: "Courier New", Courier, mono;
}
#Layer2 {
position:absolute;
width:158px;
height:357px;
z-index:2;
left: 722px;
top: 155px;
}
-->
</style>
</head>
<body onload="MM_preloadImages('images/espanaint.jpg')">
<div id="container">
<div id="inner">
<div id="header">
<table width="90" border="0" align="right" cellspacing="0">
<tr>
<td width="37"><img src="images/catala.jpg" alt="cat" width="37" height="18" align="right" /></td>
<td width="37"><img src="images/espana.jpg" alt="esp" width="37" height="18" align="right" id="Image1" onmouseover="MM_swapImage('Image1','','images/espanaint.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
</tr>
</table>
</div>
<div id="nav">
<ul>
<li><a href="pag1sp.htm">Home</a></li>
<li><a href="#">Catalogo</a></li>
<li><a href="#">Servicios a empresas</a></li>
<li><a href="pag2sp.htm">Contactar</a></li>
<li><a href="pag3sp.htm">Quienes somos</a></li>
</ul>
</div>
<div id="content">
<table width="635">
<tr>
<td width="627" height="36">
<div align="center" class="Estilo1">Venta, instalación y mantenimiento de ordenadores y redes locales </div></td>
</tr>
</table>
[b]<div id="Layer1" style="position:absolute; width:148px; height:55px; z-index:1; left: 100%; margin-left:-150px; top: 134px; background-color: #E0DFE3; layer -background-color: #E0DFE3; border: 1px none #000000; visibility: visible;"><input type="text" name="buscar" value="Buscar..." />
<input name="submit" type="submit" value="Ir" />
</div>[/b] <p align="left"> </p>
<p><img src="images/apple.JPG" width="321" height="209" /></p>
<p> </p>
<div class="clr"></div>
</div>
<div id="footer">
<p>Copyright © ElevenComponets 2007. <br>
<a href=mailto:daniel@osmosislatina.com>Moises908</a> Production. All rights reserved.
</div>
</div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
</div>
</body>
</html> |
Asignamos a la distancia con la parte izquierda de al pantalla al 100% y luego le pones a la capa un margen izquierdo negativo con el valor de su ancho (Te puse 150px en lugar de 148px para que no se quede pegado completamente al borde derecho de la pantalla)
Un saludo
_________________
Escuchar Musica Online
Aarón - Programador Web |
|
| Volver arriba |
|
|
francoamin
Yo soy el foro
Registrado: 22 Ago 2007
Mensajes: 2846
Ubicación: C:/Archivos De Porgrama/Foroz/FrancoAmin
|
| Publicado: Vie Nov 30, 2007 2:44 am Título del mensaje: |
|
|
| Es inceible donde aprendiste eso r3dd3vil2 ?¿?¿ |
|
| Volver arriba |
|
|
r3dd3vil2
Moderador
Registrado: 19 Nov 2004
Mensajes: 1594
Ubicación: en ninguna parte.
|
|
| Volver arriba |
|
|
lagarteando
Conociendo Foroz
Registrado: 01 Dic 2007
Mensajes: 23
|
| Publicado: Sab Dic 01, 2007 3:00 pm Título del mensaje: |
|
|
| que bien, felicidades |
|
| Volver arriba |
|
|
|
|
|
