Foros del Web » Diseño web » CSS »

Problema con imagenes

Estas en el tema de Problema con imagenes en el foro de CSS en Foros del Web. <buen día. tengo un problema con unas imágenes y creo que el problema lo ocaciona el css. tengo unas imágenes las cuales les quite el ...
  #1 (permalink)  
Antiguo 21/10/2013, 14:55
 
Fecha de Ingreso: mayo-2008
Mensajes: 272
Antigüedad: 6 años, 7 meses
Puntos: 2
Problema con imagenes

<buen día.

tengo un problema con unas imágenes y creo que el problema lo ocaciona el css.
tengo unas imágenes las cuales les quite el fondo blanco y las guarde como png, ya no tienen fondo y cuando las inserto me aparecen con fondo blanco. pero intente con un documento sin css cambiándole solo el fondo negro e inserte las misma imágenes y aparecen sin fondo entonces esto me hace pensar que el css tiene algún error pero la verdad no doy.

dejo aqui el css
Código:
* { margin: 0; padding: 0; outline: 0 }

body {
	background: #000000;
	font: 11px/1.75em Verdana, Tahoma, arial, sans-serif;
	color: #666666; 
	text-align: center;
	margin: 0 0 15px 0;	
}

/* links */
a, a:visited {	
	color: #1AA03C; 
	background: inherit;
	text-decoration: none;		
}
a:hover {
	//*color: #383d44;
	background: inherit;
	padding-bottom: 0;
	border-bottom: 2px solid #dbd5c5;*//
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 	
	color: #333;		
}
h1 {
	font-size: 160%;	
	font-weight: normal;
}
h2 {
	font-size: 130%;
	text-transform: uppercase;	
}
h3 {
	font-size: 130%;	
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

/* images */
img {
	background: #FAFAFA;
    border: 1px solid #DCDCDC;
	padding: 8px;
}
img.float-right {
  	margin: 5px 0px 10px 10px;  
}
img.float-left {
  	margin: 5px 10px 10px 0px;
}

code {
  	margin: 5px 0;
  	padding: 10px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  	/* white-space: pre; */
  	background: #F5F5F5;
	border-left: 3px solid #D4D4D4;
}
acronym {
  cursor: help;
  border-bottom: 1px dashed #777;
}
blockquote {
	font: bold 1.4em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;	
	margin: 10px;
 	padding: 0 0 0 25px;  
   background: #F5F5F5;
	border-left: 3px solid #D4D4D4;	
	color: #444;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #e7e6e6 url(button.jpg) repeat-x;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;	
	text-align: left;
	border-left: 1px solid #f4f4f4;
	border-bottom: solid 2px #fff;
	color: #333;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;		
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	background: #F5F5F5;	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #333;
	background: #e7e6e6 url(button.jpg) repeat-x;
	border: 1px solid #dadada;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0 5px 0 10px; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 100px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	position: relative;
	width: 1110px;	
	margin: 0 auto;
	text-align: left;
	background: #000000 url(content.jpg) repeat-y center top;
}
#content-wrap {
	float: left;
	width: 1050px;
	margin-left: 30px;
	display: inline;
	padding: 0; 	
	border-top: 5px solid #fff;
	background: #000000 url(content-wrap.jpg) repeat-x; 
}
#header {
	position: relative;
	background: #fff url(header-bg.jpg) repeat-y center top;
	height: 35px;
	width:910px;	
	padding: 0;	
	color: #fff;	
}

/* header links */
#header #header-links {
	position: absolute;
	top: 8px; right: 45px;	
	color: #838181;
	font-size: 10px;	
	font-weight: bold;
}
#header #header-links p {	
	padding: 0;	margin: 0;	
}
#header #header-links a {	
	color: #838181;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #444;		
}

/* header-photo */
#header-photo {
	position: relative;
	clear: both;
	margin: 5px auto;
	height: 250px;
	width: 850px;
	background: #fff url(header-photo.jpg) no-repeat center center;
}
#header-photo h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 48px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -1px;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	border: none;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 30px;	
}

#header-photo h2#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 14px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #B6D1F8;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 80px; left: 35px;		
}

/* Navigation */
#nav {
	clear: both;	
	padding: 0;			
}
#nav ul {
	float: left;
	list-style: none;
	background: #E4E4E4 url(nav.jpg) repeat-x;	
	width: 850px;		
	padding: 0;	margin: 0 0 0 30px;
	height: 45px;
	display: inline;
	text-transform: uppercase;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	display: block;
	float: left;
	width: auto;
	margin: 0;
	padding: 0 15px;	
	border-right: 1px solid #dadada;
	border-left: 1px solid #fafafa;	
	border-bottom: none;
	color: #555;
	font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
	text-transform: uppercase;
	text-decoration: none;	
	letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #326ea1;
}
#nav ul li#current a {	
	background: #DBDBDB url(nav-current.jpg) repeat-x;		
}

/* Main Column */
.three-col #main {
	margin: 10px 190px 0 200px;
}
.two-col #main {
	margin: 10px 5px 0 200px;
}

#main h1 {
	margin: 10px 10px 0 10px;
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color: #444;
	padding: 15px 0 2px 0px; 		
	border-bottom: 1px solid #dadada;
}

/* Sidebar */	
#sidebar {
	float: left;
	width: 195px;	
	margin-top: 10px;	
}	
/* right column */
#rightcolumn {
	float: right;
	width: 190px;
	margin-top: 10px;	
}
#rightcolumn h1, #sidebar h1 {
	margin: 10px 5px 0 5px;
	padding: 5px 5px; 
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #444; 		
}

/* sidemenu */
ul.sidemenu {
	text-align: left;
	margin: 7px 8px 8px 10px; padding: 0;			
	border-top: 1px solid #E5E5E5;
	text-decoration: none;	
}
ul.sidemenu li {
	list-style: none;
	padding: 4px 0 4px 5px;
	margin: 0 2px;		
	border-bottom: 1px solid #E5E5E5;
}
* html body ul.sidemenu li {
	height: 1%;
}
ul.sidemenu li a {
	text-decoration: none;	
	color: #326ea1; 
	border: none;		
}
ul.sidemenu li a:hover {	
	color: #383d44;
	border: none;
}

/* footer-wrap */
#footer-wrap {
	clear: both;
	width: 1110px;
	font-size: 95%;
	padding: 20px 0;
	text-align: left;	
	background: url(footer-bottom.jpg) no-repeat center bottom;	
}
#footer-wrap a {
	text-decoration: none;
	color: #666666;
	font-weight: bold;
}
#footer-wrap a:hover {
	color: #000;	
}
#footer-wrap p {
	padding: 10px 0;
}
#footer-wrap h2 {
	color: #666666;
	margin: 0;
	padding: 0 10px; 
}

/* footer */
#footer {
	clear: both;
	color: #000000;	
	margin: 0 auto 10px auto; 
	width: 1000px;
	padding: 5px 0;
	text-align: center;
	background: #000000;
	border-top: 1px solid #F2F2F2;	
}
#footer1 {
	
	
	
		
	
width: 330px;
  float: left;

	border-right: 1px solid  #FFFFFF;
	
	
	
	
}
#footer2 {
	width: 330px;
  float: left;

border-right: 1px solid #FFFFFF;
}
#footer3 {
width: 330px;
  float: left;
}
/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

/* post */
.post-by {
	font-size: .95em;	
	padding-top: 0;
}
.post-footer {
	background: #F5F5F5;
	padding: 5px; margin: 20px 10px 0 10px;	
	font-size: 95%;	
	color: #666666;	
}
.post-footer .date{
	margin: 0 10px 0 5px;	
}
.post-footer a.comments {
	margin: 0 10px 0 5px;	
}
.post-footer a.readmore {
	margin: 0 10px 0 5px;	
}
  #2 (permalink)  
Antiguo 21/10/2013, 15:25
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.470
Antigüedad: 12 años, 4 meses
Puntos: 1734
Respuesta: Problema con imagenes

Mucho código para saber qué es cada cosa.

Seguramente el problema esté en que el fondo que tenga el elemento donde pongas la imagen tenga un fondo blanco, o el elemento que contiene a ese elemento, o el elemento que contiene el elemento de ese elemento, y así hasta llegar a <html>.
  #3 (permalink)  
Antiguo 21/10/2013, 15:34
 
Fecha de Ingreso: mayo-2008
Mensajes: 272
Antigüedad: 6 años, 7 meses
Puntos: 2
Respuesta: Problema con imagenes

disculpa no te entendi muy bien, pero la imagen la inserto en un lugar donde esta el fondo negro
  #4 (permalink)  
Antiguo 21/10/2013, 15:37
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.470
Antigüedad: 12 años, 4 meses
Puntos: 1734
Respuesta: Problema con imagenes

Pues olvida lo que dije.

¿Te pasa en todos los navegadores? ¿Seguro que la imagen que se muestra es a la que le quitaste el fondo? A veces uno se olvida de subir los archivos, o se quedan en la caché.
  #5 (permalink)  
Antiguo 21/10/2013, 17:01
 
Fecha de Ingreso: mayo-2008
Mensajes: 272
Antigüedad: 6 años, 7 meses
Puntos: 2
Respuesta: Problema con imagenes

si, mira por ejemplo meti la misma imagen en un fondo negro con html y si se ve sin el fondo. por eso se me hace muy raro
  #6 (permalink)  
Antiguo 21/10/2013, 17:14
 
Fecha de Ingreso: mayo-2008
Mensajes: 272
Antigüedad: 6 años, 7 meses
Puntos: 2
Respuesta: Problema con imagenes

e quitado esta parte de code

/* images */
img {
background: #FAFAFA;
border: 1px solid #DCDCDC;
padding: 8px;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}


y sale sin fondo pero no se en que afecta
  #7 (permalink)  
Antiguo 22/10/2013, 02:21
Avatar de pzin
Moderatoren
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 9.470
Antigüedad: 12 años, 4 meses
Puntos: 1734
Respuesta: Problema con imagenes



Claro si le pones un color de fondo al elemento img que sea #FAFAFA que es casi blanco, pues lo tendrás con el fondo blanco.

Etiquetas: background, color, hover, html, imagenes
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




La zona horaria es GMT -6. Ahora son las 07:23.
SEO by vBSEO 3.3.2