Problema con divs, en ie se ve bien y en FF, opera, no...

khima · #1 (**permalink**) 01/01/2009, 20:01

Bueno soy bastante novato con esto del css asi que no tengo mucha idea, el caso es que en internet explorer se me ve bien, tal y como quiero que se vea ya la pagina, pero en firefox y opera no

Creo que se ve bien en todas las resoluciones, el problema esta a la hora de "instalar" el glider ese. En iexplorer funciona todo perfectamente, pero en firefox me oculta los menus (van con el glider) y no se por que, a ver si podeis echarme una mano.

Este es el codigo, seguramente haya muchas cosas mal pero ya digo que soy novato:

Código:

<style type="text/css">
*{
	background:no-repeat;
	overflow:hidden;
	padding:0px;
	margin:0px;
}
body{
	font:11px "Verdana",sans-serif;
	background-color: #030303;
}
div#page {
	height:813px;
	width:1400px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-700px;
	margin-top:-350px;
	background:none;
} 

div#arriba {
	height: 242px;
    background-image:url(images/header.jpg);
}
	
div#main {
	height: 290px;
	background-image: url(images/bg.jpg);
	text-align:center;
}

div#abajo {
	height: 281px;
	background-image:url(images/footer.jpg);
}
	
div#contenido {
	height: 280px;
	width: 704px;
	position:relative;
	top:5px;
	*top:6px;
	left:50%;
	margin-left:-352px;
	*margin-left:-1400px;
	background-image:url(images/main.png);
	
}

div#menu {
	margin-top:254px;
	margin-left:156px;
	*margin-left:0px;
	height:27px;
	width:382px;
	text-align:center;
}

a img {
	border:0px; !important
	text-decoration:none;
}

.controls {
margin-top: 254px;
clear:both;
}



</style>
</head>

<body> 

    <div id="page">
		<div id ="arriba"></div>
		<div id ="main">	  
			<div id ="contenido">			
				<div id="my-glider">
        			<div class="controls">
            			<a href="#section1"><img src="images/home.gif" alt="Inicio" width="79" height="27" border="0" /></a><a href="#section2"><img src="images/bio.gif" width=				"55" height="27" alt="Bio" /></a><a href="#section3"><img src="images/gal.gif" width="127" height="27" alt="Gallery" /></a><a href="#section4"><img src="images/contact.gif" width="121" height="27" alt="Contact" /></a>
       				</div>
        			<div class="scroller">
            			<div class="content">
               				 <div class="section" id="section1">
                     				PRUEBA 1
                			 </div>
                			 <div class="section" id="section2">
                     				PRUEBA 2
                			 </div>
                			 <div class="section" id="section3">
                     				PRUEBA 3
               				 </div>
                			 <div class="section" id="section4">
               		 				PRUEBA 4
                			 </div>
           			    </div>
        		    </div>     
       </div>
	    <script type="text/javascript" charset="utf-8">
        var my_glider = new Glider('my-glider', {duration:1});
    </script>
			</div>
		</div>

	  <div id ="abajo"></div>
</div>
	
</body>
</html>

Calizman · #2 (**permalink**) 01/01/2009, 21:51

Saludos khima!!

Mira... porque no intentas quitar la palabra div antes de los divs!
creo que eso ayudara bastante...

un div se declara asi: #ejemplo.
y un class asi: .ejemplo

Tomalo en cuenta! arregla ese pequeño detalle y si no funciona sigues posteando! y te sigo ayudando si?

Saludos!

3tp · #3 (**permalink**) 01/01/2009, 22:04

mm aver, no me manejo muxo en este tema ::D

pero ubo un tiempo en el que me intereso bastante crear una pag web...
y dentro de los foros y tutoriales que lei ( que fueron muxos )
ee aprendi que hay veces que se te veran una buena imagen cuadrada y con todo lo demas
en ciertos navegadores, Pero en otros, estas aplicaciones saldran tal y como mencionas :/

creo qeu ese es el problema en si.... los navegadores
y para resolverlo, pues no te podria ayudar en eso
losiento espero que de todas maneras te haya servido esta informacion ^^

nflamel · #4 (**permalink**) 02/01/2009, 07:37

Cita:

Iniciado por khima

Bueno soy bastante novato con esto del css asi que no tengo mucha idea, el caso es que en internet explorer se me ve bien, tal y como quiero que se vea ya la pagina, pero en firefox y opera no

CSS funciona de forma diferente en cada navegador... es lógico lo que te pasa. Yo normalmente desarrollo las cosas primero para Firefox por que así te aseguras más compatibilidad con navegadores como Opera o Safari. Una vez que funcione puedes adaptarlos para Internet Explorer 6-7 o lo que sea.

Cita:

Creo que se ve bien en todas las resoluciones, el problema esta a la hora de "instalar" el glider ese. En iexplorer funciona todo perfectamente, pero en firefox me oculta los menus (van con el glider) y no se por que, a ver si podeis echarme una mano.

Qué es Glider? Tienes algún enlace sobre él o que nos sirva para probar el ejemplo?

Saludos.

khima · #5 (**permalink**) 02/01/2009, 08:11

si yo normalmente voy mirando en firefox y despues ya la miro en ie, pero aqui ha pasado esto :S

Esto es el glider

http://code.google.com/p/missingmethod-projects/wiki/Glider

Mikmoro · #6 (**permalink**) 05/01/2009, 03:44

¿Dónde cargas el script glider.js? en tu código de muestra no está.