Regresar a la página ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Firefox no deja el margen

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    19 feb, 13
    Mensajes
    17
    Poder de Reputación
    13

    Firefox no deja el margen

    Hola!! Tengo un pequeño problema con los márgenes de uno de mis divs en Firefox porque en el Internet explorer me funciona. Veréis, he insertado un div en el que van pasando varias imágenes. El div lo copié de nivo slider (es una web que te da el código para hacer que pasen las imagenes como un slideshow). El caso es que en mi cabecera tengo dos divs, uno que flota hacia la izquierda (que es donde está la imagen con el logo de mi web) y el otro que contiene el nivo slider que hace que pasen las imágenes (he llamado al div "slide"). Mi problema es que no sé cómo darle un margin-top de 10px a ese div "slide" en firefox. Lo que yo he puesto funciona en el Explorer pero no en Firefox.

    Os dejo el cógigo HTML:

    Código HTML:
    <div id="cabecera">
        <div id="logo"><a href="principal.html" title="Inicio"><img src="imagenes/logo1.png" alt="Logo Ferreter&iacutea V&iacutector Delgado"></a></div>
        
        <div id="slide">
          <div class="slider-wrapper theme-default">
           <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" alt="" />
            <a href="http://web.tursos.com/"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a> <!--Imagen link con titulo simple-->
            <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" alt="" title="<strong>Este</strong> es un ejemplo de título en <em>HTML</em> con <a href='#'>un link</a>" /> <!-- Imagen con título en html -->
           </div>
          </div>
        </div>
        
        <div id="vd"><img src="imagenes/titulo1.png"></div>
       
       </div>
    Por cierto el último div "vd" es una imagen pero creo que no afecta para el margen que quiero dar.

    Y aquí el código css:

    Código HTML:
    #cabecera {width:1000px;height:365px; background-color: #A8A9FF; background-image: url(imagenes/rayas.png); background-repeat: repeat-x;}
    #cabecera a {}
    #cabecera a:link {}
    #cabecera a:visited {}
    #cabecera a:hover {}
    #cabecera a:active {}
    
    #logo{float:left;width:267px;height:205px;}
    #logo img{width:267px;height:205px;}
    #logo a {}
    #logo a:link {}
    #logo a:visited {}
    #logo a:hover {background-color: transparent;}
    #logo a:active {}
    
    #slide{width:618; margin:10px 0px 0px 300px;}
    #slide a {}
    #slide a:link {}
    #slide a:visited {}
    #slide a:hover {background-color: transparent;}
    #slide a:active {}
    
    
    #vd{height:100; width:1000; margin-top:20px;}
    #vd img{height:100; width:900;}
    
    
    /* Este es el css respectivo al nivo slider*/
    
    .theme-default .nivoSlider {
    	width: 618px; /* agregamos esta lÃ*nea */
    	position:static;
    	background:#fff url(.../images/loading.gif) no-repeat 50% 50%; /* lo modificamos por background:#fff url(../images/loading.gif) no-repeat 50% 50%;*/
    
    	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    	box-shadow: 0px 1px 5px 0px #4a4a4a;
    }
    .theme-default .nivoSlider img {
    	position:absolute;
    	top:0px;
    	left:0px;
    	display:none;
    }
    .theme-default .nivoSlider a {
    	border:0;
    	display:block;
    }
    
    .theme-default .nivo-controlNav {
    	position:absolute;
    	left:50%;
    	bottom:-42px;
        margin-left:-40px; /* Tweak this to center bullets */
    }
    .theme-default .nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(../images/bullets.png) no-repeat; /* lo modificamos por  background:url(../images/bullets.png) no-repeat;*/
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
    }
    .theme-default .nivo-controlNav a.active {
    	background-position:0 -22px;
    }
    .theme-default .nivo-directionNav a {
        display:block;
        width:30px;
        height:30px;
        background:url(../images/arrows.png) no-repeat; /*lo modificamos por  background:url(../images/arrows.png) no-repeat;*/
        text-indent:-9999px;
        border:0;
    }
    .theme-default a.nivo-nextNav {
    	background-position:-30px 0;
    	right:15px;
    }
    .theme-default a.nivo-prevNav {
    	left:15px;
    }
    
    .theme-default .nivo-caption {
        font-family: Helvetica, Arial, sans-serif;
    }
    .theme-default .nivo-caption a {
        color:#fff;
        border-bottom:1px dotted #fff;
    }
    .theme-default .nivo-caption a:hover {
        color:#fff;
    }
    @media screen and (max-width: 1280px){
    	.theme-default .nivoSlider {	
        	position:relative;
    		background:#fff url(../images/loading.gif) no-repeat 50% 50%;
        	margin: auto 330px;
        	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	box-shadow: 0px 1px 5px 0px #4a4a4a;   
    	}
    }
    @media screen and (max-width: 1024px){
    	.theme-default .nivoSlider {	
        	position:relative;
    		background:#fff url(../images/loading.gif) no-repeat 50% 50%;
        	margin: auto 200px;
        	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	box-shadow: 0px 1px 5px 0px #4a4a4a;   
    	}
    }
    @media screen and (max-width: 800px){
    	.theme-default .nivoSlider {	
        	position:relative;
    		background:#fff url(../images/loading.gif) no-repeat 50% 50%;
        	margin: auto 100px;
        	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
        	box-shadow: 0px 1px 5px 0px #4a4a4a;   
    	}
    }
    Espero que no os asustéis. Yo creo que los estilos que debo cambiar son el de slide y el de .theme-default .nivoSlider la pregunta es cómo lo hago para que me deje margin-top de 10px también en Firefox. Tal y como lo tengo ahora el Firefox no me deja ese margen encima de 10px y el explorer sí.

    Un saludo.

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    10 mar, 13
    Ubicación
    Chiclayo
    Mensajes
    44
    Poder de Reputación
    13
    Bueno no estoy tan seguropero parece que tu problema esta en el .css, S te das cuenta donde dice
    #slide{width:618; margin:10px 0px 0px 300px;}
    en la parte de width le falta sus pixeles:px
    igual sucede en:
    #vd{height:100; width:1000; margin-top:20px;}
    #vd img{height:100; width:900;}
    By Geanco

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    19 feb, 13
    Mensajes
    17
    Poder de Reputación
    13
    No, no es eso. He puesto los px pero sigue igual. Yo creo que el problema está en los atributos position del nivoslider en el CSS. Porque me he dado cuenta que cuando minimizo la pantalla en el firefox el div se me sale incluso del div cabecera...

    Gracias de todas formas. A ver si alguien me da otra solución...

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    10 mar, 13
    Ubicación
    Chiclayo
    Mensajes
    44
    Poder de Reputación
    13
    Bueno Derrepente Te puede interesar esto : http://www.comocreartuweb.com/consul...ma-Auntomatica Echale un vistaso .
    By Geanco

  5. #5
    Recien Llegado! Habitante
    Fecha de Ingreso
    19 feb, 13
    Mensajes
    17
    Poder de Reputación
    13
    Ya lo había visto jeje. No me gusta porque cuando pinchas manualmente para cambiar las imágenes ya no se pasan automáticamente las imágenes.

    De todas formas por aclarar un poco más lo que quiero hacer. Yo me descargué nivo-slider como pone en el siguiente enlace:

    http://web.tursos.com/tutoriales/jav...-tu-pagina-web

    Lo que quiero ahora es poner ese slide donde me dé a mi la gana. Y lo que me pasa es que no lo puedo hacer por algo de las position:relatives o absolutes (o por lo menos yo creo que eso lo que falla).

Temas Similares

  1. ¿Margen Individualmente?
    Por rococo11 en el foro Foro General
    Respuestas: 1
    Último Mensaje: 27/09/2010, 18:50
  2. Problema con el margen o.o
    Por Xdx en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 12/05/2010, 22:01
  3. Creo que es el margen
    Por Jay2k en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 29/04/2010, 20:30
  4. Respuestas: 1
    Último Mensaje: 24/04/2010, 19:39

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •