las imagenes al verlas x el movil?

santi2892009 · #1 (**permalink**) 23/12/2013, 08:02

buenas tardes explico un poco lo que pasa:AL ver mi pagina web en internet,firefox se ven bien estan colocadas perfectamente pero el problema esta cuando veo esa pagina web con el movil el cual tengo 2 imagenes una a la izquierda y otra central y se desplazan las 2 a la derecha descolocandose,dejo el css que e puesto:

#apDiv2 {
position:absolute;
left:175px;
top:177px;
width:185px;
height:460px;
z-index:2;
border:groove;
}
#apDiv21 {
position:absolute;
top:-2px;
left:210px;
border:groove;
width:620px;
height:380px;
border:groove;
-------------------------
alguien sabe el problema como lo puedo arreglar??muchas gracias x su ayuda.

alzacon · #2 (**permalink**) 23/12/2013, 08:08

Estas centrando con posición absoluta y left, lo raro es que se te centrasen al cambiar la resolución de pantalla.

santi2892009 · #3 (**permalink**) 23/12/2013, 08:27

entonces q tendria que hacer??

jonni09lo · #4 (**permalink**) 23/12/2013, 08:31

No maquetes con con PA (posiciones absolutas) es un error común entre novatos y quienes usan Dreamweaver... Si maquetas de esa manera rompes el flujo natural de los elementos y causan estos comportamientos impredecibles...

Saludos

santi2892009 · #5 (**permalink**) 23/12/2013, 08:36

si el tema que lo hice con dreamweaver,que tendria que poner entonces para que no pasase esto?,
agradezco si me puedes hechar una mano.pero claro use pa para meter una imagen encima del background ...

jonni09lo · #6 (**permalink**) 23/12/2013, 08:39

Cita:

Iniciado por jonni09lo

No maquetes con con PA (posiciones absolutas)

Repito no maquetes con posiciones absolutas, has tu diseño sin tener que recurrir a position:absolute y cuéntanos que pasa.

Saludos

santi2892009 · #7 (**permalink**) 23/12/2013, 08:44

okss voy a ver si quitando posicion absolute valdria y te comento

santi2892009 · #8 (**permalink**) 23/12/2013, 08:55

bueno x ahora se me a descolocado del centro una imagen de ellas intentare colocarlo sin añandir absolute y os comento,de todas formas graciass x vuestra ayuda

santi2892009 · #9 (**permalink**) 23/12/2013, 08:59

nada no consigo que la imagen se mueva a la derecha,se desplazo a la izquierda abajo y de hay no se mueve:
puse esto pero nada aun cambiando los numeros nada ni se mueve a ningun lado

#apDiv21 {
top:-2px;
left:210px;
border:groove;
width:620px;
height:380px;
border:groove;

jonni09lo · #10 (**permalink**) 23/12/2013, 09:01

Muestra todo el código css y el html generado (sin nada de php)

PD: por favor cuando postees código usa el select que dice Hightlight para envolver el código

Saludos

santi2892009 · #11 (**permalink**) 23/12/2013, 09:05

perdona eso de select con highlight q es?? es q m lo han dicho muchos

santi2892009 · #12 (**permalink**) 23/12/2013, 09:07

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="estilo/temas/default/templates/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="estilo/temas/default/templates/menu.js" type="text/javascript"></script>
<script>
function opencharpopup(){
var popurl='index.php?ir=verpj'
winpops=window.open(popurl,'','width=250,height=50 0,scrollbars')
}
function openmappopup(){
var popurl='index.php?ir=mapa'
winpops=window.open(popurl,'','width=501,height=50 1,scrollbars')
}
</script>
<script type="text/javascript">
document.onkeyup = KeyCheck;

function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;

switch(KeyID)
{
case 104:
document.navi.keydir.value = "north";
document.navi.submit();
break;
case 100:
document.navi.keydir.value = "west";
document.navi.submit();
break;
case 102:
document.navi.keydir.value = "east";
document.navi.submit();
break;
case 98:
document.navi.keydir.value = "south";
document.navi.submit();
break;
case 103: // numpad 7
document.navi.keydir.value = "north_west";
document.navi.submit();
break;
case 105: // numpad 9
document.navi.keydir.value = "north_east";
document.navi.submit();
break;
case 99: // numpad 3
document.navi.keydir.value = "south_east";
document.navi.submit();
break;
case 97: // numpad 1
document.navi.keydir.value = "south_west";
document.navi.submit();
break;
}
}
</script>
<link rel="stylesheet" type="text/css" href="estilo/temas/default/templates/style2.css">
<style>
#header {
background: url(estilo/temas/{{tema}}/imagenes/login/new1_02.png) no-repeat;
display: block;
height: 124px;
width: 895px;
}

#inter-menu {
background: url(estilo/temas/{{tema}}/imagenes/login/new1_04.png) no-repeat;
display: block;
height: 38px;
width: 895px;
}

#nav {
padding-left: 175px;
padding-top: 68px;
}

#nav-menu {
padding-left: 175px;
padding-top: 37px;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
margin-left: -21%;
margin-top: -8%;
padding: 0;
}

* html #nav ul {
margin-right: 40px;
}

#nav-menu ul {
float: left;
list-style: none;
margin: 0;
margin-left: -4%;
margin-top: -4%;
padding: 0;
}

* html #nav-menu ul {
margin-right: 40px;
}

#nav li {
float: left;
list-style: none;
margin: 0;
margin-right: 30px;
padding: 0;
}

#nav-menu li {
float: left;
list-style: none;
margin: 0;
margin-right: 5px;
padding: 0;

}
#nav a:link {
color: #F1D6AC;
font-weight: bold;
text-decoration: none;
}

#nav-menu a:link {
color: #F1D6AC;
font-weight: bold;
text-decoration: none;
}

#nav a:visited {
color: #F1D6AC;
font-weight: bold;
text-decoration: none;
}

#nav-menu li {

height: 28px;
width: 101px;
}

#nav-menu a:visited {
color: #F1D6AC;
font-weight: bold;
text-decoration: none;
}

#nav a:hover, #nav a:active {
color: yellow;
font-weight: bold;
text-decoration: underline;
}

#nav-menu a:hover, #nav-menu a:active {
color: yellow;
font-weight: bold;
text-decoration: underline;
}
body {
background: #000000;
color: #534834;
font-family: tahoma, arial;
font-size: 14px;
line-height: 14px;
margin: 0;
padding: 0;
text-align: center;
}

.boton{

background: url("estilo/temas/{{tema}}/imagenes/login/new_24.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 solid rgba(0, 0, 0, 0);
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-weight: bold;
height: 29px;
line-height: 27px;
text-align: center;
text-decoration: none;
width: 101px;
}

#apDiv1 {

left:100px;

}
#apDiv3 {

left:10px;
width:180px;
border:groove;
}
#apDiv4{
width:180px;
border:groove;
}

#apDiv2 {

left:175px;
top:177px;
width:185px;
height:460px;
z-index:2;
border:groove;
}
#apDiv21 {

top:12px;
right:34px;
border:groove;
width:620px;
height:380px;
border:groove;
}
</style>

</head>
<body>

<table id="Table_01" width="957" height="671" border="0" cellpadding="0" cellspacing="0" style="position:relative;margin: 0 auto;">
<tr>
<td colspan="3">
<img src="estilo/temas/{{tema}}/imagenes/login/new1_01.png" width="957" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2">
<div id="header">
<div id="nav">
<ul>
<li style=" margin-left: 13px; "><a href="index.php?ir=index">HOME</a></li>
<li style=" margin-left: -6px; "><a href="">MAPA</a></li>
<li style=" margin-left: -10px; "><a href="index.php?ir=clan">ALIANZA</a></li>
<li><a href="index.php?ir=ranking">RANKING</a></li>
<li style=" margin-left: 10px; "><a href="">TRABAJOS</a></li>
<li><a href="">GANANCIA</a></li>
<li><a href="index.php?ir=perfil">PERFIL</a></li>
<li style=" margin-left: 5px;"><a style="color:red;" href="">PREMIUM</a></li>
<li style=" margin-left: 26px; "><a href="index.php?ir=salir">SALIR</a></li>
</ul>
</div>
</div>
</td>

<td rowspan="5">
<img src="estilo/temas/{{tema}}/imagenes/login/new1_03.png" width="62" height="670" alt=""></td>
</tr>
<tr>
<td colspan="2">
<div id="inter-menu">
<div id="nav-menu">
<ul>
<li style=" margin-left: -6px; "><a class="boton" href="">PUNTOS</a></li>
<li style=" margin-left: -3px; "><a class="boton" href="">PETROLEO</a></li>
<li style=" margin-left: -2px; "><a class="boton" href="">GASOLINA</a></li>
<li><a class="boton" href="">DIESEL</a></li>
<li style=" margin-left: -1px; "><a class="boton" href="">MUNICION</a></li>
<li><a class="boton" href="">ORO</a></li>
<li><a class="boton" href="">TICKET</a></li>

</ul>
</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="estilo/temas/{{tema}}/imagenes/login/new1_05.png" width="213" height="494" alt=""></td>
<td>
<img src="estilo/temas/{{tema}}/imagenes/login/new1_06.png" width="682" height="433" alt=""></td>
</tr>
<tr>
<td>
<img src="estilo/temas/{{tema}}/imagenes/login/new1_07.png" width="680" height="61" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="estilo/temas/{{tema}}/imagenes/login/new1_08.png" width="895" height="14" alt=""></td>
</tr>
</table>


<div id="apDiv2"></div>

<div id="apDiv2">

<div id="apDiv3"><DIV><a href='index.php?ir=mensajero'>mensajes</a></div></div>
<div id="apDiv4"><DIV><input type="text" name="textfield" id="textfield" /></div></div>
<DIV> AQUI SALDRAN LOS TIMER DEL JUEGO,que seran de un tama単o ancho
ancho y demas
el cual sera en css </DIV>
<div id="accordian">
<div align="left">

<ul>
<li>
<h3><span class="icon-dashboard"></span>misiones</h3>
<ul>
<li><a href="#">Reports</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Graphs</a></li>
<li><a href="#">Settings</a></li>
</ul>
</li>

<li class="active">
<h3><span class="icon-tasks"></span>informes</h3>
<ul>
<li><a href="#">AQUI SALDRAN LOS INFORMES DE COMBATE</a></li>

</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>notas</h3>
<ul>
<li><a href="#">AQUI TENDRIA QUE SALIR LAS NOTAS</a></li>
<h3><span class="icon-calendar"></span>SOPORTE</h3>
<li><a href="#">多COMO SE JUEGA</a></li>
<li><a href="#">CONTACTA CON NOSOTROS</a></li>
<li><a href="#">FORO</a></li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>TABLAS DE ARMAS</h3>
<ul>
<li><a href="#">TABLA ARMAS</a></li>
<li><a href="#">TABLA EDIFICIOS</a></li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>LISTA DE AMIGOS</h3>
<ul>
<li><a href="#">SE HARA UNA LISTA DE AMIGOS</a></li>
</ul>
</li>

</div>

<div id="apDiv21">{{content}}</div>

</body>
</html>

santi2892009 · #13 (**permalink**) 23/12/2013, 09:24

Si siempre pongo esa opcion pero sale asi

alzacon · #14 (**permalink**) 23/12/2013, 09:47

para centrar los div horizontalmente usa

Código CSS:

Ver originalmargin: 0 auto;

PD: no vale con dejar "highlight" tienes que elegir el tipo de código que vas a poner dentro de las etiquetas.

santi2892009 · #15 (**permalink**) 23/12/2013, 09:51

Código HTML:

Ver original<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="estilo/temas/default/templates/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="estilo/temas/default/templates/menu.js" type="text/javascript"></script>
<script>
function opencharpopup(){
var popurl='index.php?ir=verpj'
winpops=window.open(popurl,'','width=250,height=500,scrollbars')
}
function openmappopup(){
var popurl='index.php?ir=mapa'
winpops=window.open(popurl,'','width=501,height=501,scrollbars')
}
</script>
   <script type="text/javascript">
      document.onkeyup = KeyCheck;       
      
      function KeyCheck(e)
      {
         var KeyID = (window.event) ? event.keyCode : e.keyCode;
         
         switch(KeyID)
         {
            case 104:
               document.navi.keydir.value = "north";
               document.navi.submit();
               break;
            case 100:
               document.navi.keydir.value = "west";
               document.navi.submit();
               break;
            case 102:
               document.navi.keydir.value = "east";
               document.navi.submit();
               break;
            case 98:
               document.navi.keydir.value = "south";
               document.navi.submit();
               break;
            case 103: // numpad 7
               document.navi.keydir.value = "north_west";
               document.navi.submit();
               break;
            case 105: // numpad 9
               document.navi.keydir.value = "north_east";
               document.navi.submit();
               break;
            case 99: // numpad 3
               document.navi.keydir.value = "south_east";
               document.navi.submit();
               break;
            case 97: // numpad 1
               document.navi.keydir.value = "south_west";
               document.navi.submit();
               break;
         }
      }
   </script>
<link rel="stylesheet" type="text/css" href="estilo/temas/default/templates/style2.css">
<style>
#header {
    background: url(estilo/temas/{{tema}}/imagenes/login/new1_02.png) no-repeat;
    display: block;
    height: 124px;
    width: 895px;
}
 
#inter-menu {
    background: url(estilo/temas/{{tema}}/imagenes/login/new1_04.png) no-repeat;
    display: block;
    height: 38px;
    width: 895px;
}
 
#nav {
    padding-left: 175px;
    padding-top: 68px;
}
 
#nav-menu {
    padding-left: 175px;
    padding-top: 37px;
}
 
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    margin-left: -21%;
    margin-top: -8%;
    padding: 0;
}
 
* html #nav ul {
    margin-right: 40px;
}
 
#nav-menu ul {
    float: left;
    list-style: none;
    margin: 0;
    margin-left: -4%;
    margin-top: -4%;
    padding: 0;
}
 
* html #nav-menu ul {
    margin-right: 40px;
}
 
#nav li {
    float: left;
    list-style: none;
    margin: 0;
    margin-right: 30px;
    padding: 0;
}
 
#nav-menu li {
    float: left;
    list-style: none;
    margin: 0;
    margin-right: 5px;
    padding: 0;
 
}
#nav a:link { 
    color: #F1D6AC;
    font-weight: bold;
    text-decoration: none;
}
 
#nav-menu a:link { 
    color: #F1D6AC;
    font-weight: bold;
    text-decoration: none;
}
    
#nav a:visited { 
    color: #F1D6AC;
    font-weight: bold;
    text-decoration: none;  
}
 
#nav-menu li {
 
    height: 28px;
    width: 101px;
}
 
#nav-menu a:visited { 
    color: #F1D6AC;
    font-weight: bold;
    text-decoration: none;  
}
    
#nav a:hover, #nav a:active { 
    color: yellow;
    font-weight: bold;
    text-decoration: underline;
}
 
#nav-menu a:hover, #nav-menu a:active { 
    color: yellow;
    font-weight: bold;
    text-decoration: underline;
}
body {
    background: #000000;
    color: #534834;
    font-family: tahoma, arial;
    font-size: 14px;
    line-height: 14px;
    margin: 0;
    padding: 0;
    text-align: center;
}
 
    .boton{
 
        background: url("estilo/temas/{{tema}}/imagenes/login/new_24.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 0 solid rgba(0, 0, 0, 0);
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
        height: 29px;
        line-height: 27px;
        text-align: center;
        text-decoration: none;
        width: 101px;
    }
 
#apDiv1 {
    
left:100px;
 
}
#apDiv3 {
 
left:10px;
width:180px;
border:groove;
}
#apDiv4{
width:180px;
border:groove;
}
 
#apDiv2 {
    
    left:175px;
    top:177px;
    width:185px;
    height:460px;
    z-index:2;
border:groove;
}
#apDiv21 {
 
top:12px;
right:34px;
border:groove;
width:620px;
height:380px;
border:groove;
}
</style>
 
</head>
<body>
<!-- Save for Web Slices (new.psd) -->
<table id="Table_01" width="957" height="671" border="0" cellpadding="0" cellspacing="0" style="position:relative;margin: 0 auto;">
    <tr>
        <td colspan="3">
            <img src="estilo/temas/{{tema}}/imagenes/login/new1_01.png" width="957" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="header">
        <div id="nav">
            <ul>
                <li style=" margin-left: 13px; "><a href="index.php?ir=index">HOME</a></li>
                <li style=" margin-left: -6px; "><a href="">MAPA</a></li>
                <li style=" margin-left: -10px; "><a href="index.php?ir=clan">ALIANZA</a></li>  
                <li><a href="index.php?ir=ranking">RANKING</a></li>
                <li style=" margin-left: 10px; "><a href="">TRABAJOS</a></li>
                <li><a href="">GANANCIA</a></li>    
                <li><a href="index.php?ir=perfil">PERFIL</a></li>
                <li style=" margin-left: 5px;"><a style="color:red;" href="">PREMIUM</a></li>   
                <li style=" margin-left: 26px; "><a href="index.php?ir=salir">SALIR</a></li>            
            </ul>
        </div>
    </div>
            </td>
        
        <td rowspan="5">
            <img src="estilo/temas/{{tema}}/imagenes/login/new1_03.png" width="62" height="670" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <div id="inter-menu">
                <div id="nav-menu">
            <ul>
                <li style=" margin-left: -6px; "><a class="boton" href="">PUNTOS</a></li>
                <li style=" margin-left: -3px; "><a class="boton" href="">PETROLEO</a></li>
                <li style=" margin-left: -2px; "><a class="boton" href="">GASOLINA</a></li>
                <li><a class="boton" href="">DIESEL</a></li>
                <li style=" margin-left: -1px; "><a class="boton" href="">MUNICION</a></li>
                <li><a class="boton" href="">ORO</a></li>
                <li><a class="boton" href="">TICKET</a></li>
                            
            </ul>
        </div>
            </div>
            </td>
    </tr>
    <tr>
        <td rowspan="2">
<img src="estilo/temas/{{tema}}/imagenes/login/new1_05.png" width="213" height="494" alt=""></td>
        <td>
            <img src="estilo/temas/{{tema}}/imagenes/login/new1_06.png" width="682" height="433" alt=""></td>
</tr>
    <tr>
        <td>
            <img src="estilo/temas/{{tema}}/imagenes/login/new1_07.png" width="680" height="61" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="estilo/temas/{{tema}}/imagenes/login/new1_08.png" width="895" height="14" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
 
<div id="apDiv2"></div>
 
 
 
<div id="apDiv2">
 
<div id="apDiv3"><DIV><a href='index.php?ir=mensajero'>mensajes</a></div></div>
<div id="apDiv4"><DIV><input type="text" name="textfield" id="textfield" /></div></div>
<DIV> AQUI SALDRAN LOS TIMER DEL JUEGO,que seran de un tama単o ancho
ancho y demas
el cual sera en css  </DIV>
<div id="accordian">
<div align="left">
 
    <ul>
        <li>
            <h3><span class="icon-dashboard"></span>misiones</h3>
            <ul>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Search</a></li>
                <li><a href="#">Graphs</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </li>
        <!-- we will keep this LI open by default -->
        <li class="active">
            <h3><span class="icon-tasks"></span>informes</h3>
            <ul>
                <li><a href="#">AQUI SALDRAN LOS INFORMES DE COMBATE</a></li>
                
            </ul>
        </li>
        <li>
            <h3><span class="icon-calendar"></span>notas</h3>
            <ul>
                <li><a href="#">AQUI TENDRIA QUE SALIR LAS NOTAS</a></li>
                <h3><span class="icon-calendar"></span>SOPORTE</h3>
                <li><a href="#">多COMO SE JUEGA</a></li>
                <li><a href="#">CONTACTA CON NOSOTROS</a></li>
                <li><a href="#">FORO</a></li>
            </ul>
        </li>
        <li>
            <h3><span class="icon-heart"></span>TABLAS DE ARMAS</h3>
            <ul>
                <li><a href="#">TABLA ARMAS</a></li>
                <li><a href="#">TABLA EDIFICIOS</a></li>
          </ul>
        </li>
        <li>
        <h3><span class="icon-heart"></span>LISTA DE AMIGOS</h3>
            <ul>
                <li><a href="#">SE HARA UNA LISTA DE AMIGOS</a></li>
          </ul>
        </li>
                <!-- prefix free to deal with vendor prefixes -->
</div>
 
<div id="apDiv21">{{content}}</div>
 
 
</body>
</html>

santi2892009 · #16 (**permalink**) 23/12/2013, 09:56

X fin salio lo q m dijiste d etiquetarlos con highlight

santi2892009 · #17 (**permalink**) 23/12/2013, 10:21

Me imagino q
margin:0 auto;
Sera para centrarlo en el medio y si pongo 120auto se ira para la derecha y si pongo -2auto se aproximara a la izquierda nop?,el caso q yo tengo uno central y otro en la izquierda,
Tambien tengo q subirlos y pomerlos a una altura determinada?