Foros del Web » Creando para Internet » HTML »

separacion img

 Estas en el tema de separacion img en el foro de HTML en Foros del Web. Hola compañeros, tengo un problema, tengo un pie de pagina, y en el he colocado varias img, dentro de hipervinculo ( son de empresas de ...
  #1 (permalink)  
Antiguo 29/06/2012, 20:07
Usuario no validado
  
Fecha de Ingreso: abril-2012
Mensajes: 134
Antigüedad: 12 años
Puntos: 0
separacion img
Hola compañeros, tengo un problema, tengo un pie de pagina, y en el he colocado varias img, dentro de hipervinculo ( son de empresas de colaboracion), pero automaticamente me las separa unos 5px mas o menos, independientemente del margen que le aplique, la unica forma que me queda bien es meterlas dentro de un div.
¿es posible quitar ese espacio entre img?, he comprobado y ese margen no es de otra etiqueta, ni clase ni nada.
GRACIAS
  #2 (permalink)  
Antiguo 29/06/2012, 21:33
 
Fecha de Ingreso: diciembre-2011
Ubicación: Medellín
Mensajes: 68
Antigüedad: 12 años, 3 meses
Puntos: 7
Respuesta: separacion img
Bueno, en esté caso caería algo bien el código. Intenta en css con

Código: 
img {
     margin:0;
     padding:0;
     border:0;
     outline:0;
}
Si con eso te funciona, ve borrando de a una, y así por descarte sabrás cual es el error (aunque puede que el error no radique ahí).
  #3 (permalink)  
Antiguo 30/06/2012, 05:09
Usuario no validado
  
Fecha de Ingreso: abril-2012
Mensajes: 134
Antigüedad: 12 años
Puntos: 0
Respuesta: separacion img
Que va tio, no funciona, de todas formas le tengo un reset( comprobado que todo esta a 0), no se si en alfuna funcion de JS, aparece algo, pero nada ya lo he mirados.
Solo pasa cuando pongo varias etiquetas img juntas. Ni idea tio. No me molesa porque las metos en un div cada una y listo. Pero no veia la necesidad y a parte quiero saber que es lo que ocurre. dejo el codigo. a ver i ves algo.

Es en el FOOTER.

<html>
<head>
<title></title>
<meta charset="ISO-8859-1, UTF-8">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="img/favicon.ico">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="js/jquery-1.7.min.js" ></script>
<script src="js/mi_script_galeria.js" ></script> <!-- Script Propio de Transcición de Imagenes con Efecto -->
<script src="js/mi_script_menu.js" ></script> <!-- Script Propio para Menu Tipo Acordeon -->
<script src="js/mi_script_musica.js" ></script> <!-- Script Propio para Activar/Desactivar Musica -->

</head>
<body>
<div id="container">

<div id="header">
<div id="logo"></div>
</div>
<div id="LeftSidebar">
<ul id="navlist">
<li><a href="index.html" class="active">Portada</a></li>
<li><a href="#">Espectáculos</a>
<ul>
<li><a href="infantiles.html">Infantiles</a></li>
<li><a href="adultos.html">Adultos</a></li>
</ul>
</li>
<li><a href="company.html">La Compañía</a>
<ul>
<li><a href="filosofia.html">Filosofía</a></li>
<li><a href="trayectoria.html">Trayectoria</a></li>
</ul>
</li>
<li><a href="director.html">El Director</a></li>
<li><a href="eventos.html">Eventos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>

<div id="content">
<div id="contCent">
<div id="gallery">
<div id="logoOficial"></div>
<img src="img/slideshow/1.jpg" width="800" height="500" alt="" class="actual" />
<img src="img/slideshow/2.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/3.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/4.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/5.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/6.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/7.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/8.jpg" width="800" height="500" alt="" />
<img src="img/slideshow/9.jpg" width="800" height="500" alt="" />
</div>
</div>
<div id="contDer">
<div id="siguenos">
<div id="facebook"><a href="http://www.facebook.com/profile.php?id=100000897455909"></a></div>
<div id="blogger"><a href="http://labarataria.blogspot.com.es/" alt="Blogspot"></a></div>
<div id="youtube"><a href="http://www.youtube.com/CIABARATARIA"></a></div>
<!-- Le he puesto una imagen transparente para que no se vean los bordes blancos que aparecen en background image vuando esta de input -->
<input type="image" id="onOff" value="play" style="border:0" src="img/invisible.png"/>
<audio id="audio" loop="loop">
<source src="path/file.ogg" type="audio/ogg" >
<source src="music/sleepAway.mp3" type="audio/mp3" >
</audio>
</div>
</div>
</div>
<div id="footer">
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
<img src="img/merendarte.jpg" width="140" height="35" alt="" />
</div>
</div>
</body>
</html>


css

Código: 
* {
margin: 0px;
padding: 0px;
}

body {
	background-color: #222222;
	font-family: Verdana, Arial, sans-serif;
	font-size: 16px;
	color: #ffffff;
	background-image: url('../img/textura.png');
}
 
#container {
	position: relative;
	width: 1000px;
	height: 650px;
	margin: auto;
}

img {
     margin:0;
     padding:0;
     border:0;
     outline:0;
}

/***********************Header*********************/
#header{
	position: relative;
	float: left; 
	width: 1000px;
	height: 90px;
}

#logo{
	position: relative;
	float: left; 
	width: 295px;
	height: 90px;
	margin-left: 5px;
	background-image: url('../img/logo.png');
}

/*********************Fin Header********************/

/********************Left Sidebar*******************/
#LeftSidebar{
	position: relative;
	float: left; 
	width: 150px;
}

#navlist{
	position: relative;
	float: left; 
	width: 150px;
}

#navlist ul li, #navlist li:last-child{
	border:none
}	

#navlist a{
	display: block;
	height: 25px;
	width: 100px; 
	padding: 10px;
	margin: 5px;
	line-height: 25px;
	background: inherit;
	border-right: 4px solid #444444;
	color: #f4f4f4;
	font-size: 0.9em;
	text-decoration: none;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	
}
#navlist a:hover{
	color: #f4f4f4;
	background: #333333;
	border-right: 4px solid #D01A71;
}

#navlist li .active {
	cursor: default;
	color: #f4f4f4;
	background: #333333;
	border-right: 4px solid #D01A71;
	margin-top: 0;
}

#navlist ul a{
	background: #333333;
}

ul{
	display:block;
	list-style:none;
}

#navlist li ul {
	display:none;
}

/*******************Fin Left Sidebar******************/

/***********************Content***********************/
#content{
	position: relative;
	float: left; 
	width: 850px;
	height: 520px;
}

/*** Contenedor Central ***/

#contCent{
	position: relative;
	float: left; 
	width: 820px;
	height: 520px;
	background-color: #333333;
	border-radius: 5px;
	box-shadow: inset 0px 0px 2px 1PX #111111;
    -moz-box-shadow: inset 0px 0px 2px 1PX #111111;
    -webkit-box-shadow: inset 0px 0px 2px 1PX #111111;
	margin-left: 5px;
}

#logoOficial{
	position: relative;
	float: right; 
	width: 100px;
	height: 90px;
	margin-top: 10px;
	background-image: url('../img/logoOficial.png');
	opacity: 0.4;
	z-index: 100;
}

#gallery{
	position: relative;
	float: left; 
	width: 800px;
	height: 500px;
	margin-top: 10px;
	margin-left: 10px;
	background-image: url('../img/loading.gif') no-repeat;
	
}

#gallery img
{
   position:absolute;
   top:0;
   left:0;
   z-index:1;
}

#gallery img.actual
{
	z-index: 3;
}

#gallery img.ultima-actual
{
	z-index: 2;

}

/*** Contenedor Derecho ***/

#contDer{
	position: relative;
	float: left; 
	width: 25px;
	height: 520px;
}

#siguenos{
	position: relative;
	float: left; 
	width: 25px;
	height: 120px;
	margin-top: 10px;
}

#facebook a{
	position: relative;
	float: left; 
	width: 25px;
	height: 25px;
	background-image: url('../img/facebook.jpg');
}

#blogger a{
	position: relative;
	float: left; 
	width: 25px;
	height: 25px;
	background-image: url('../img/blogger.jpg');
	margin-top: 4px;
}

#youtube a{
	position: relative;
	float: left; 
	width: 25px;
	height: 25px;
	background-image: url('../img/youtube.jpg');
	margin-top: 4px;
}

#audio{
	position: relative;
	float: left; 
	width: 25px;
	height: 25px;
	margin-top: 4px;
}

#onOff{
	position: relative;
	float: left; 
	width: 25px;
	height: 25px;
	background-image: url('../img/on.jpg');
	margin-top: 4px;
	cursor: pointer;
	border: 0;
	outline: none;
	color:transparent;
}

#onOff.activo{
	background-image: url('../img/on.jpg');
	cursor: pointer;
	border: 0;
	outline: none;
}

#onOff.inactivo{
	background-image: url('../img/off.jpg');
	cursor: pointer;
	border: 0;
	outline: none;
}

/*********************fin Content*********************/

/*********************Inicio Footer*********************/

#footer{
	position: relative;
	float: left;
	width: 1000px;
	height: 35px;
	margin-top: 5px;
}


/*********************fin Footer*********************/

Etiquetas: img, separacion, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:00.