Background position en IE8

Citar

Escrito el 31 Ago 2011 04:06 pm

Despues de mucho trabajo pruebas y otros menesteres, Me consegui un servidor de pago y estoy dando forma a una página web, en las que mostraré trabajos mios de diversos tipos y otras cosas, Considerando en que versión escribirla me decidí por HTML5 y asi empezar a conocer a este nueva versión , tambien para aprovechar lo que esta ofrece.

De momento todo bien, estoy trabajando en el diseño y que se vea bien en la majoria de los navegadores (despues de este paso, me dedicaré al contenido en si), lo conseguí en firefox4 , Ei9 , Chrome, no se se el resto de navegadores.

Para lograr un poco de compatibilidad con los otras versiones del Explorer he usado este llamado a una libreria externa :

Código :

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

Esto me soluciono muchos problemas de compatibilidad con HTML5 y los restantes los solucioné con este otro trozo de codigo:

Código HTML :

 <meta http-equiv="X-UA-Compatible" content="IE=9" />

solamente persisten dos problemas:
- el contenedor <aside> todavia se ubica abajo del contenido principal y no al costado (he probado con cambiar la medidas pero nada).
-Y en el Footer no aparece la imagen de fondo (estoy usando una imagen que contiene todos los pedazos de los cuadros redondeados y el árbol .Los coloco en posicion con background position).Se ubican bien en todos los recuadros y en el árbol pero en el footer no solo aparece ese cuadradito amarillo en la esquina.
Desde ya gracias y si alguien encuentra un problemita en otro navegador que me avise(en firefox 3.6 no se ve nada bien.. Ya lo se no soporta html5). saludos

Por maximil13

70 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Programador, estudiante de sistemas.

@mxml13

Citar

Escrito el 31 Ago 2011 05:04 pm

Y la página en cuestión es...?

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 31 Ago 2011 07:15 pm

Disculpas a todos y a ti DriverOP me habian requerido por otras cuestiones ajenas a este asunto y me distraje un poco mucho :oops:

La dirección es:
www.maximilianofernandez.net

Por maximil13

70 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Programador, estudiante de sistemas.

@mxml13

Citar

Escrito el 01 Sep 2011 12:30 pm

Pues por lo que se ve, debes hacer más grande el <div id="contenido">.
El problema se debe a la forma que IE8 calcula el ancho total de la caja y encuentra que no entrará en el espacio a la derecha de "cuerpo_art", entonces produce un salto de línea y manda el <aside> abajo.
Lo que me suena sospechoso es que <aside> está posicionado variando el margin-left. Pero el diseño es tabular. Habría sido mejor usar el modelo de tablas.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 01 Sep 2011 07:38 pm

Gracias DriverOp me pondre a probar tus consejos.La verdad es que CSS me cuesta mucho y es probable que este un poco "chapucero" , Creo que use un ejemplo que me dieron de una maquetación en un curso de PHP y MYSQL que hice hace un año(como el curso no trataban los temas de HTML y CSS estos los archivos estaban hechos ). Lo que realmente me tiene de cabeza es la imagen de fondo del footer tendria que salir un rectangulo amarillo con los borde inferiores redondeados y solo se ve un cuadradito amarillo. Alguna sugerencia.
Saludos

Por maximil13

70 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Programador, estudiante de sistemas.

@mxml13

Citar

Escrito el 01 Sep 2011 09:10 pm

Hola he probado lo que me recomendaste y nada le he dado 100px (dejandolo en 1000px)más a contenido para probar (lo hice en local )y nada todo sigue como lo dejé (en EI8) si le saco el margin-left los botones de twitter, fb y rss quedan en lugar pero mis twitter se esconden bajo el "cuerpo_art"...Busque en internet algo sobre el modelo de tablas y solo me salen busqueda relacionandas con aplicar Css a tablas , y no creo que sea lo que tu te refieres DriverOp. Me podrias pasar un elace a un tutorial? ya que por lo visto tendre que comenzar todo de 0 (Y si de una vez aprendo esto será genial) , o tambien pense hacer un Html para explorer y otros navegadores que no soportan Html5 . Todo consejo será bienvenido
Muchas gracias

Por maximil13

70 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Programador, estudiante de sistemas.

@mxml13

Citar

Escrito el 02 Sep 2011 12:32 pm

Pues si no te importa comenzar de cero, puedes probar lo siguiente.

Código HTML :

<!doctype html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title></title> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css"> 
html, body {
   margin: 0; padding: 0;
}
.tabla {
   display: table;
   margin: 0; padding: 0;
}
.fila {
   display: table-row;
   margin: 0; padding: 0;
}
.celda {
   display: table-cell;
   margin: 0; padding: 0;
}
#contenido {
   width: 70%; /* por decir algo */
   margin: auto;
}
#columna-izquierda {
   width: 50%;
   background-color: red;
}
#columna-derecha {
   width: 50%;
   background-color: blue;
}
</style> 
</head>
<body>
   <div class="tabla" id="contenido">
      <div class="fila">
         <div class="celda" id="columna-izquierda">
            <p>Esto es el contenido</p>
         </div>
         <aside class="celda" id="columna-derecha">
            <p>Esto es el contenido</p>
         </aside>
      </div>
   </div>
</body> 
</html>

Dentro de los divs con class="celda" puedes poner lo que quieras.
Lo que hace este código es generar dos columnas iguales en altura y anchura y puestas al centro de la página.
Funciona tanto en IE como en el resto de los navegadores.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 02 Sep 2011 09:18 pm

Gracias DriverOp !!!!

Ya mismo empiezo te contare más tarde como salió. Me ocupo de otras cosa en casa como la familia y otras cosas y solo trabajo en esto unas horitas a la noche .Ya te contaré de mis progresos lo prometo !!!!!
saludos y gracias de nuevo

Por maximil13

70 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Programador, estudiante de sistemas.

@mxml13

Background position en IE8

Escribe una respuesta rapida