Volver al Foro de Diseño de páginas Web

posición compatibilidad para IE y Firefox

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 8th, 2008, 12:08 pm

Hice la búsqueda de posicionamiento en el foro, pero theyre todos diciéndome no utilizar position: absolute; en lugar de usar en línea, por desgracia, no creo que pueda hacer esto porque necesito un div contenedor alrededor de todos mis contenidos a la posición de todo en el centro. El problema es mi "contenido" y "navbar" divs son demasiado altos en IE, pero se colocan donde deben estar en Firefox.


html:
Código: [ Select ]
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BorgBand.com We Are Borg!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="loadContent.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="loadContent('page_home.html', 'content');">
    <div id="horizon">
    <div id="inset">
        <div id="imghorizon">
        <img src="images/background.jpg" id="bgimage" />
        </div>
    <div id="container">
        <table cellspacing="0" cellpadding="0">
        <tr>
        <td rowspan="2">
            <div id="content">            </div>        </td>
        </tr>
        <tr>
        <td>
            <div id="navbar">
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_home.html', 'content');">Home</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_events.html', 'content');">Upcoming Events</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_about.html', 'content');">About The Band</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
            <p>-----------</p>
            </div>        </td>
        </tr>
        </table>
    </div>
    </div>
    </div>
</body>
</html>
 
  1.      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>BorgBand.com We Are Borg!</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. <script src="loadContent.js" type="text/javascript"></script>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. </head>
  10. <body onload="loadContent('page_home.html', 'content');">
  11.     <div id="horizon">
  12.     <div id="inset">
  13.         <div id="imghorizon">
  14.         <img src="images/background.jpg" id="bgimage" />
  15.         </div>
  16.     <div id="container">
  17.         <table cellspacing="0" cellpadding="0">
  18.         <tr>
  19.         <td rowspan="2">
  20.             <div id="content">            </div>        </td>
  21.         </tr>
  22.         <tr>
  23.         <td>
  24.             <div id="navbar">
  25.             <p>-----------</p>
  26.             <p><a href="#" onclick="loadContent('page_home.html', 'content');">Home</a></p>
  27.             <p>-----------</p>
  28.             <p><a href="#" onclick="loadContent('page_events.html', 'content');">Upcoming Events</a></p>
  29.             <p>-----------</p>
  30.             <p><a href="#" onclick="loadContent('page_about.html', 'content');">About The Band</a></p>
  31.             <p>-----------</p>
  32.             <p><a href="#" onclick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
  33.             <p>-----------</p>
  34.             <p><a href="#" onclick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
  35.             <p>-----------</p>
  36.             </div>        </td>
  37.         </tr>
  38.         </table>
  39.     </div>
  40.     </div>
  41.     </div>
  42. </body>
  43. </html>
  44.  


CSS:
Código: [ Select ]
*{
    margin: 0;
    padding: 0;
    z-index: 1;
}
 
body{
    background-color:#000066;
    color: #CCCCCC;
    overflow: hidden;
    background-image: url(images/bgstripe.jpg);
}
 
a{
    color: #CCCCCC;
}
 
a:hover{
    color: #CC6633;
}
 
#horizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
}
 
#inset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    overflow: visible;
}
 
#bgimage{
    overflow: visible;
    z-index: -1;
    width: 800px;
    height: 600px;
}
 
#imghorizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
    z-index: -2;
}
 
#container{
    width: 800px;
    height: 100%;
    padding-left: 30px;
    padding-top: 190px;
    margin-left: 0px;
    margin-top: 10%;
}
 
#content{
    padding-left: 10px;
    margin-top: 40px;
    width: 510px;
    height: 400px;
    margin-right: 30px;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
 
.contentcell{
    margin-top: 20px;
    overflow: scroll;
    height: 235px;
    width: 500px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    background-color: transparent;
}
 
#navbar{
    padding-left: 10px;
    padding-top: 0px;
    width: 180px;
    margin-left: 10px;
}
 
#navbar a:link, a:visited{
    color:#CCCCCC;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
 
#navbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
}
 
#aboutnavbar a:link, a:visited{
    color:#CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
 
#aboutnavbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
    text-align: center;
}
 
#abouttext{
    padding-top: 15px;
}
 
.abouttextcell{
    height: 233px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    padding-left: 15px;
}
 
.aboutpics{
    height: 234px;
    width: 124px;
    border: #B4B4B4 medium solid;
}
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     z-index: 1;
  5. }
  6.  
  7. body{
  8.     background-color:#000066;
  9.     color: #CCCCCC;
  10.     overflow: hidden;
  11.     background-image: url(images/bgstripe.jpg);
  12. }
  13.  
  14. a{
  15.     color: #CCCCCC;
  16. }
  17.  
  18. a:hover{
  19.     color: #CC6633;
  20. }
  21.  
  22. #horizon{
  23.     position: absolute;
  24.     top: 50%;
  25.     width: 100%;
  26.     height: 1px;
  27.     overflow: visible;
  28. }
  29.  
  30. #inset{
  31.     width:800px;
  32.     height: 200px;
  33.     position: absolute;
  34.     left: 50%;
  35.     margin-left: -400px;
  36.     top: -400px;
  37.     overflow: visible;
  38. }
  39.  
  40. #bgimage{
  41.     overflow: visible;
  42.     z-index: -1;
  43.     width: 800px;
  44.     height: 600px;
  45. }
  46.  
  47. #imghorizon{
  48.     position: absolute;
  49.     top: 50%;
  50.     width: 100%;
  51.     height: 1px;
  52.     overflow: visible;
  53.     z-index: -2;
  54. }
  55.  
  56. #container{
  57.     width: 800px;
  58.     height: 100%;
  59.     padding-left: 30px;
  60.     padding-top: 190px;
  61.     margin-left: 0px;
  62.     margin-top: 10%;
  63. }
  64.  
  65. #content{
  66.     padding-left: 10px;
  67.     margin-top: 40px;
  68.     width: 510px;
  69.     height: 400px;
  70.     margin-right: 30px;
  71.     padding-top: 0px;
  72.     font-family: Arial, Helvetica, sans-serif;
  73.     background-color: transparent;
  74. }
  75.  
  76. .contentcell{
  77.     margin-top: 20px;
  78.     overflow: scroll;
  79.     height: 235px;
  80.     width: 500px;
  81.     overflow: scroll;
  82.     overflow-x: hidden;
  83.     overflow-y: inherit;
  84.     background-color: transparent;
  85. }
  86.  
  87. #navbar{
  88.     padding-left: 10px;
  89.     padding-top: 0px;
  90.     width: 180px;
  91.     margin-left: 10px;
  92. }
  93.  
  94. #navbar a:link, a:visited{
  95.     color:#CCCCCC;
  96.     font-weight: bold;
  97.     font-family: Arial, Helvetica, sans-serif;
  98.     font-size: small;
  99. }
  100.  
  101. #navbar a:hover{
  102.     background-color: #993300;
  103.     border: dashed thin #FF0000;
  104.     color: #CCCCCC;
  105. }
  106.  
  107. #aboutnavbar a:link, a:visited{
  108.     color:#CCCCCC;
  109.     font-family: Arial, Helvetica, sans-serif;
  110.     font-size: 12px;
  111.     text-align: center;
  112. }
  113.  
  114. #aboutnavbar a:hover{
  115.     background-color: #993300;
  116.     border: dashed thin #FF0000;
  117.     color: #CCCCCC;
  118.     text-align: center;
  119. }
  120.  
  121. #abouttext{
  122.     padding-top: 15px;
  123. }
  124.  
  125. .abouttextcell{
  126.     height: 233px;
  127.     overflow: scroll;
  128.     overflow-x: hidden;
  129.     overflow-y: inherit;
  130.     padding-left: 15px;
  131. }
  132.  
  133. .aboutpics{
  134.     height: 234px;
  135.     width: 124px;
  136.     border: #B4B4B4 medium solid;
  137. }


alguna idea?

Heres un enlace para que pueda ver en ambos navegadores http://mindfullsilence.angelfire.com/#
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 8th, 2008, 12:08 pm

  • gonzoka
  • Student
  • Student
  • No Avatar
  • Registrado: Jul 30, 2005
  • Mensajes: 75
  • Loc: Bristol, UK
  • Status: Offline

Nota Agosto 11th, 2008, 2:03 am

Puede colocar los elementos centro sin necesidad de utilizar absoluta - (más difícil de centro vertical aunque, por lo que soy la esperanza de que no están pidiendo para eso).

Usar CSS, tales como:

Código: [ Select ]
body { text-align:center; }
#container {
    text-align:left;
    width:800px;
    margin:0 auto;
    border:1px solid red;
    height:200px; }
}
  1. body { text-align:center; }
  2. #container {
  3.     text-align:left;
  4.     width:800px;
  5.     margin:0 auto;
  6.     border:1px solid red;
  7.     height:200px; }
  8. }


y HTML, tales como:
Código: [ Select ]
<body>
    <div id="container">
        <!-- All of your content here -->
    </div>
</body>
  1. <body>
  2.     <div id="container">
  3.         <!-- All of your content here -->
  4.     </div>
  5. </body>


Ive añadido una altura y frontera para el div contenedor sólo para poder ver dónde está, pero esas normas no son necesarias.

Espero que esto ayude - Si utiliza este código puede encontrar que es necesario volver a escribir el código de los demás aspectos del contenido de su sitio, pero una vez que su hecho usted lo encontrará mucho más fácil de mantener y actualizar.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 11th, 2008, 6:00 am

gracias gonzoka, lamentablemente yo necesidad de centrar el contenedor div verticalmente. No se preocupe si bien, centrado verticalmente era algo que yo ya había figurado. Todo lo que necesitaba dentro de la div que se centra verticalmente para que en el mismo lugar en ambos navegadores, me imaginé que fuera aunque, realmente estúpido error. He configurado todos los divs en el interior del contenedor para div absoluta y ahora theyre coloca donde deben estar en ambos navegadores.
Use your words like arrows to shoot toward your goal.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 3 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 137 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC