Comunidad de diseño web y desarrollo en internet online

Posicionamiento varia en cada navegador...que hago?

Citar            
MensajeEscrito el 23 Feb 2008 06:29 pm
Llevo pocos dias leyendo acerca de CSS tratando de aprender lo basico asi que a quien me ayude, ademas de agradecerle inmensamente le pido que me responda como si le estuviera hablando a un nino de 7 anos, ya que soy bastante novata...

Estoy haciendo un Layout para una pagina que contiene: (encabezado, barra de navegacion vertical, contenido, pie y algunos elementos del diseno).

lo hice por medio de divs anidadas pero al principio no podia ubicar la barra de navegacion a la izquierda, el contenido al centro y un div de diseno a la derecha..se ubicaban en la posicion correspondiente, pero uno abajo de otro, como si no pudieran compartir el espacio horizontal...Luego lei acerca de la propiedad float y la aplique a ver si funcionaba....lo hizo aunque no se porque tuve que empezar a poner top-margin en numeros negativos...en fin con todo y eso, logre empezar a posicionar mis elementos. Pero solo estaba probando en firefox...cuando probe en otros navegadores (opera, explorer) los elementos se acomodaron de una forma distinta...
Porque y si alguien me ayuda con la solucion le estare eternamente agradecida....
el codigo esta asi:

Código :

<body>
<div id="Wrap">
      <div id="encabezado"></div>
      <div id="fdo-adentro"><!--abierto-->
            <div id="expertos"></div>
            <div id="para-barnav">   
                 <ul id="navi"> 
                 <li ><a href="#">Quienes somos </a></li>
                 <li><a href="#">Mision</a></li>
                 <li><a href="#">Vision</a></li>
                 <li><a href="#">Servicios</a></li>
                 <li><a href="#">Recursos</a></li>
                 <li><a href="#">Clientes</a></li>
                 <li><a href="#">Empleo</a></li>
                 <li><a href="#">Inicio</a></li>
                 <li><a href="#">Consultas</a></li>
                 </ul>
                 <div id="phone"> </div>   
                 <div id="abajo-phone"> </div>
             </div><!--para barnav-->
             <div id="adentro-der">
                   <div id="contenido">
                       <div id= "titulo"><h2>Quienes Somos</h2></div>
                       <div id= "par">
                       <p>texto</p>
                       </div><!--par-->
                   </div><!--contenido-->
              </div>
              <div id="barra-derecha-"></div>
              <div id="barra-abajo">
                  <div id="pie">
                        <p>informacion de la compania</p>
                  </div><!--pie-->   
              </div><!--barra abajo-->
       </div><!--fondo adentro-->
</div>      
</body>
</html>


y el css:

Código :


body {
   
   background-color: #2d3440;
   text-align:center;
}

#Wrap{
   width:800px;
   margin:0 auto;
   text-align:left;
   top:0px;
   height:922px;
   margin:0 auto; 
   color: #4B5361;
}

#titulo {
   height: 40px;
   font-family:Arial, Helvetica, sans-serif;
   color: #2d3440;
   margin-top: 0px;
   background:#a0a2a5;
   text-align: center;
   font-size: 18px;
   }
   
#par {
   margin-top: 5px;
   margin-bottom:auto;
   margin-left: 20;
   margin: 20px;
   padding: 0px;
   font-family:Arial, Helvetica, sans-serif;
    color: #2D3440;
   }
   
#encabezado {
   left:0px;
   top:10px;
   width:800px;
   height:160px;
   background-image:url(Images/encabezado.gif);
}

#expertos {
   left:0px;
   top:160px;
   width:780px;
   height:45px;
   background-image:url(Images/expertos.gif);
}

#expcob-04 {
   left:749px;
   top:204px;
   width:10px;
   height:628px;
}

#barra-derecha- {
   float:right;
   margin-right:10px;
   margin-top:-667px;
   width:39px;
   height:625px;
   background-color:#FBDB4C;

}

#expcob-06 {
   left:798px;
   top:204px;
   width:2px;
   height:718px;
}

#fdo-adentro {
   left:0px;
   top:100px;
   width:800px;
   height:621px;
   background-color:#4F5765;
}

#para-barnav {
   float:left;
   margin-left:px;
   top:70px;
   width:138px;
   height:410px;
   background-color:#616876;
}

#navi {
   left:0px;
   top:30px;
   width:138px;
   list-style:none;
   margin:0;
   padding:0;
   font-family: Arial, Helvetica, sans-serif;
   color: #787C84;
   }

#navi li {
   padding:0px;
   border:1px;
   border-color: #a0a2a5;
   border-style:solid;
   font-family: Arial, Helvetica, sans-serif;
   color:#CCCCCC;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 5px;
   margin-bottom: 5px;
   border-color: #a0a2a5;

   }

#navi li a {
   margin:0px;
   display:block; 
   border:1px;
   padding:5px;
   text-decoration:none;
   text-align:left;
   text-decoration:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   font-weight: normal;
   color: #FFFF99;
}

#navi li a:hover {
   background-color:#FBDB4C;
   text-align:center;
   color: #2d3440;
   font-weight: bold;
}

#phone {
   left:11px;
   margin-top:10px;
   width:138px;
   height:185px;
   background-image:url(Images/phone.png);
   border:none;
}

#abajo-phone {
   left:11px;
   margin-top:0px;
   width:138px;
   height:85;
   background-color: #616876;
   top: -5px;
}
#fdo-adentro {
   padding:0px;
   left:0px;
   top:205px;
   width:800px;
   height:625px;
   background-color:#4F5765;
}

#adentro-der {
   width: 445px;
   margin-left: 0px;
   margin-top: 0px;
}

#contenido {
   margin-top:-20px;
   margin-left:150px;
   width:590px;
   height:621px;
   background-color:#787C84;
}

#barra-abajo {
   left:0px;
   margin-top:-50px;
   width:759px;
   height:90px;
   background-color:#FBDB4C;
   text-align:center;
}
#pie {
   margin-top: 6px;
   font-family:Arial, Helvetica, sans-serif;
   font-weight:bold;
   color: #2d3440;
}
[/code]

Por paola

24 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 23 Feb 2008 07:05 pm
el problema son los valores default de los navegadores. los márgenes internos y externos son los que dificultan más la labor.
busca en google un "css reset" o ie7.js, esto te ahorrará muchas horas de trabajo.

suerte

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 23 Feb 2008 07:15 pm
:crap: Si asi le hablas a un nino de 7 anos como le hablaras a los adultos...voy a buscar igual :?

Por paola

24 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 23 Feb 2008 07:31 pm
es eso un archivo css que vinculo a mi html ademas de los otros css?...parece segun lo poco que he leido pero nadie da instrucciones de nada. :?

Por paola

24 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 23 Feb 2008 07:59 pm
éjem... si, de nada.

la verdad es que dudo que un niño de 7 años pueda entender un concepto similar. sabes qué es margen? interno? externo? default?
qué te parece si intentas hacer algo con eso que encontraste. seguramente no serviría de mucho si sólo los bajaras a tu pc o los subieras al servidor. tienes que vincularlos, si no, no va a funcionar.

te recomiendo tengas un poco más de consideración, aquí estamos para ayudar, y si no agradeces la ayuda y pones un poco de tu esfuerzo, difícilmente se te va a volver a dar.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 23 Feb 2008 08:06 pm
No, no soy desagradecida, disculpame si eso parecio..lo que pasa es que estoy en estado de desesperacion, porque cada vez que encuentro algo me emociono lo pruebo y al principio parece funcionar y luego resulta que no... ya puse en mi css algo de esos codigos para resetear y al parecer funciono pero solo en un par de cosas...tengo un div que aparece en el centro en explorer y opera pero en firefox esta muy a la izquierda....para nada soy desagradecida...Cristalab me ha sacado de muchos apuros...solo espero que entiendas que me he atrasado dias en mi proyecto por causa de este problema.

Por paola

24 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 24 Feb 2008 03:53 pm
Veamos... en ocasiones abarcamos más de lo que podemos morder...
Es muy difícil dar con la "solución total" en esto.
No existe una "panacea" del CSS, y es muy difícil que encuentres a alguien con el tiempo suficiente como para poder arreglar en un segundo toda una página WEB.

Quizá, sería mejor su pusieses aquí sólo el esquema, con un CSS mucho más reducido, y sólo lo esencial dentro de tu problema.

Por lo demás, si quieres agilidad, lo mejor será que uses algún layout ya probado (montones en google)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 25 Feb 2008 05:44 am
Bueno, veamos....
yo no soy una experta en el tema de las css, pero algo he aprendido en este tiempo =)
Si alguien más "pro" que yo puede verlo y corregirme si he hecho algo mal, se agradece =)

paola:
estuve analizando el código que posteas, modificandolo (porque a estas alturas todavía sólo puedo solucionar cosas "tocandolas, rompiendolas y arreglandolas" :P) y te encontré varios errores comunes al comenzar, y algunas cosas innecesarias.

No estoy segura de haber logrado lo que vos querías con la visualización, pero lo que te paso funciona perfectamente en ie6, ie7, Firefox y Opera

tanto del html como del css borré cosas que me parecieron innecesarias, al menos para la confección de lo que se veía en lo que vos posteaste. Vos verás qué tenés que agregar nuevamente y que no =)

ahi va el html:

Atención que cambié de lugar el div "para-barnav", porque dejandolo abajo realmente no supe como ponerlo a la derecha correctamente sin tener que recurrir a otras herramientas innecesarias.

Código :

<body>
   <div id="Wrap">
        <div id="barra-derecha-"></div>
      <div id="para-barnav">   
             <ul id="navi"> 
                 <li ><a href="#">Quienes somos </a></li>
                 <li><a href="#">Mision</a></li>
                 <li><a href="#">Vision</a></li>
                 <li><a href="#">Servicios</a></li>
                 <li><a href="#">Recursos</a></li>
                 <li><a href="#">Clientes</a></li>
                 <li><a href="#">Empleo</a></li>
                 <li><a href="#">Inicio</a></li>
                 <li><a href="#">Consultas</a></li>
             </ul>
        </div><!--para barnav-->
         
        <div id="contenido">
           <div id= "titulo"><h2>Quienes Somos</h2></div>
           <div id= "par">
               <p>texto</p>
           </div><!--par-->
        </div><!--contenido-->


        <div id="barra-abajo">
           <div id="pie">
               <p>informacion de la compania</p>
            </div><!--pie-->   
      </div><!--barra abajo-->
   </div>      
</body>



Y la CSS con algunos comentarios al margen para que entiendas algunas de las correcciones =)
Tené en cuenta que borré todo lo que no afectaba los objetos con los que estaba trabajando, para que sea más facil la visualización, y también cambié de lugar muchas cosas.
Te recomiendo trabajar un poco más ordenada, porque has duplicado varios atributos totalmente innecesario.


Código :

/* GENERAL */
BODY {
   background-color: #2d3440;
   text-align:center;
   font-family:Arial, Helvetica, sans-serif; /* Si vas a usar la misma tipografía en toda la página, te conviene ponerla directamente acá y asi no te hará falta aclararla en cada lugar, a menos que quieras cambiarla claro =) */
}

*{ padding:0; margin:0;} /* Como en la mayoría de los casos usás margin y padding de 0px, conviene ponerlo aqui. Los atributos que pongas en *{} son iguales a todos, a menos que aclares lo contrario donde quieras =)
Cuando usás valores 0 (cero) no es necesario poner la unidad (px, em, etc) y ahorrás algunos bytes ;) */

#Wrap{
   width:800px;
   margin:0 auto;
   text-align:left;
   color: #4B5361;
   background:#4F5765;
}

/* NAVBAR */

#para-barnav {
   float:left;
   width:138px;
   height:410px;
   background-color:#616876;
}

#navi li {
/*   border:1px;
   border-color: #a0a2a5;
   border-style:solid;*/
   border:#a0a2a5 solid 1px; /* Para no ocupar tantas lineas innecesarias, podés poner más de un atributo en la misma linea =) */
   color:#CCCCCC;
/*   margin-left: 0px;
   margin-right: 0px;
   margin-top: 5px;
   margin-bottom: 5px;*/
   margin:5px 0; /* para acortar el código, es conveniente esta forma, aplicable a margin, padding y border por igual:
                  ejemplo: margin: 1px 2px 3px 4px; los valores son equivalentes a top-right-bottom-left.
               Para hacerlo aún más resumido, cuando los valores top-bottom y los valores left-right, son iguales:
               ejemplo: margin:5px 3px; el primer valor corresponde a top y bottom, mientras que el segundo corresponde a left y right
               En caso de que fuera el mismo margin para los 4 lados, te conviene directamente poner (por ejemplo) margin: 10px;
               esto significa que todos los margenes (top-left-right-bottom) valdrán 10px.
               */
   list-style:none;

   }

#navi li a {
   display:block;
   border:1px;
   padding:5px;
   text-decoration:none;
   text-align:left;
   font-size:14px;
   font-weight: normal;
   color: #FFFF99;
}

#navi li a:hover {
   background-color:#FBDB4C;
   text-align:center;
   color: #2d3440;
   font-weight: bold;
}

/* CONTENIDO */

#contenido {
   margin-left:150px;
   width:584px;
   height:621px;
   background-color:#787C84;
}

#titulo {
   height: 40px;
   color: #2d3440;
   background:#a0a2a5;
   text-align: center;
   font-size: 18px;
   }

   
#par {
   margin: 20px;
   color: #2D3440;
   }
   

#barra-derecha- {
   float:right;
   width:60px;
   height:620px;
   background-color:#FBDB4C;

}

#barra-abajo {
   width:800px;
   height:90px;
   background-color:#FBDB4C;
   text-align:center;
}

#pie {
   font-weight:bold;
   color: #2d3440;
}

Por angel_eskarlata

68 de clabLevel



Genero:Femenino  

Baires City

opera
Citar            
MensajeEscrito el 25 Feb 2008 05:46 am
Bueno, espero haberte servido de ayuda aunque sea en algo, creo que las cosas relevantes las expliqué, si algo más se me pasó o no entendés, avisa =)

Saludos y suerte!

Por angel_eskarlata

68 de clabLevel



Genero:Femenino  

Baires City

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.