Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-09-2011, 19:22 (UTC)    
Título del mensaje: Maquetar Nuestras Imagenes
Responder citando
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:
Responder citando
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. */
/* twitter: @jfdelarosa */
↑
Mensaje12-09-2011, 18:26 (UTC)    
Título del mensaje:
Responder citando
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:
Responder citando
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.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


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

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.