Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje11-09-2011, 19:22 (UTC)    
Título del mensaje: Maquetar Nuestras Imagenes

En esta ocasion, les traigo un codigo css Obtenido de Desarrolloweb.com, que hace que al colocar una Imagen nos aparezca con un Marco logrado con Css.
Para empezar, vamos a pegar este codigo css
Cita:
<style type="text/css">
.Marcoparaimagen {
padding:8px;
background-color: #f5f5f5;
width: 200px;
border: 1px solid #999999;
}
.Marcoparaimagen IMG{
border: 1px solid #000000;
}


</style>

en el Editor Html o Por Ensima de la Pagina

Tambien lo pueden editar mediante el css donde esta marcado con Negrita a su Gusto.Yo no lo explicare por que es algo obvio de Entender . Pero si deceas que te Ayude solo deja un Comentario al final .

Y Finalmente pasamos al HTML,
Cita:
<div class="Marcoparaimagen"><img style="width: 201px; height: 133px;" body="" src="http://wtheme.webme.com/img/leute.gif" alt="" /></div>

en el Editor Html o donde queramos que aparezca .

NOTA:
201 : Es el Ancho de la Imagen
133: Es la Altura.

Pero si no lo queremos Colocar al Widtg y al Height colocamos solamente
Cita:
<div class="Marcoparaimagen"><img src="http://wtheme.webme.com/img/leute.gif" body="" alt="" /></div>


Resultado :
http://brianpwg.es.tl/marcocss.htm

Saluds

BrianPwg

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui


Ultima edición por brianpwg el Mie Dic 05, 2012 8:35 pm; editado 2 veces
Mensaje12-09-2011, 04:52 (UTC)    
Título del mensaje:

mas fácil:

Código:
<style type="text/css">
.marco{
background:#fff;
border:1px solid black;
padding:8px;
}
</style>

<img class="marco" src="http://wtheme.webme.com/img/leute.gif" alt="" />


saludos
______________
/* Programador web freelance. */
/* Skype: j.f.delarosa */
Mensaje12-09-2011, 18:26 (UTC)    
Título del mensaje:

hola buen aporte y con lo que quiere desir
xmies0@
Es que el marco no se adapta a la imagen
vista previa:


______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje12-09-2011, 18:56 (UTC)    
Título del mensaje:

ayuda031 escribió:
hola buen aporte y con lo que quiere desir
xmies0@
Es que el marco no se adapta a la imagen
vista previa:



Eso es por que el esta utilizando el siguiente codigo:
Código:
<div class="Marcoparaimagen"><img src="http://wtheme.webme.com/img/leute.gif" body="" alt=""></div>
Por lo cual la imagen saldra en su tamaño normal y no reducido. Ya que el marco tiene como tamaño predeterminado 200px y la imagen tiene 321px.
Por eso queda mal. Por eso, si usan el codigo
Código:
<div class="Marcoparaimagen"><img src="http://wtheme.webme.com/img/leute.gif" body="" alt=""></div>


Lo que tienen que hacer es modificar esto:
Cita:
<style type="text/css">
.Marcoparaimagen {
padding:8px;
background-color: #f5f5f5;
width: 205px;
border: 1px solid #999999;
}
.Marcoparaimagen IMG{
border: 1px solid #000000;
}</style>


En caso de usar:
Código:
<div class="Marcoparaimagen"><img style="width: 201px; height: 133px;" body="" src="http://wtheme.webme.com/img/leute.gif" alt="" /></div>

Y quieren achicar el marco deben reducir lo marcado anterior mente y al igual si la imagen es mas ancha de 200px.

Saludos!
Design-PWG.


Ultima edición por design-pwg el Lun Sep 12, 2011 2:58 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group