Hola.
Como algunós ya sabéis, poseo un blog y quería saber como se puede "enmarcar" las fotos con una línea.
Quier saber hacer algo timpo Vidaextra, el pequeño enmarca por una línea, eso me parece que se hace con HTML.
Salu2
Es con CSS y es utilizando la propiedad border.
border: solid 1px black; padding: 5px;
Por ejemplo.
Gracias oMega, ;-), estoy aún algo verde con CSS y HTML.
Salu2
Ya te lo comenté por privado pero a fin de que quede en elforo para todo el mundo, el método para colocarle borden a una imagen es el siguiente:
<img src="ruta" style="border: 1px solid #000000; padding:3px;" />
La explicación:
border: 1px -> indica un grosor de borde de 1 píxel.
solid -> el estilo de borde. Otros son ridge, por ejemplo.
#000000 -> el color del borde en hexadecimal. Se puede colocar en nombres, como black, white, goldenrod, green...
padding: 3px -> la distancia desde la imagen hasta el propio borde.
<p align="center"><img src="url" style="border: 1px solid #white; padding:3px;" alt="Texto alternativo" /></p>
¿Ese alt puede ir ahí?
Sí, sin ningún problema. Cada etiqueta tiene determinados atributos, que pueden incluirse todos, o sólo los obligatorios, o algunos sí y otros no... etc. En el caso de img, ese código está correcto salvo por el cuadradillo:
Antes:
<p align="center"><img src="url" style="border: 1px solid #white; padding:3px;" alt="Texto alternativo" /></p>
Después:
<p align="center"><img src="url" style="border: 1px solid white; padding:3px;" alt="Texto alternativo" /></p>
El cuadradillo sólo se utiliza para la denominación en hexadecimal de los colores. No es necesario (y creo que sale mal o no sale si se pone) cuando se utiliza el nombre del color.
Hola.
Bueno, para en wordpress alinear una imagen al texto se utiliza un código, lo vi en una web pero no recuerdo cual era.
¿Cómo añado a ese html el código este de los bordes?
Yo nunca he sabido realmente cómo se "alinea al texto" (supongo que te refieres la imagen pegada a la izquierda y el texto bordeándola).
Para entender esto convendría entender CSS. La propiedad float: left; en un cuerpo hace que lo que va después de él lo rodee por el lado indicado. Ejemplo:
Código:
<img src="..." style="float: left;" />
Esa imagen flotará a la izquierda, y el texto la bordeará por la derecha. Pero claro, el texto quedará muy pegado, por lo que podemos añadirle margin:
Código:
<img src="..." style="float: left; margin: 5px;" />
O incluso un pequeño borde:
Código:
<img src="..." style="float: left; margin: 5px; border: 1px solid black;" />
Y si el margen queda pegado a la imagen y no queremos eso, pongámosle un poco de padding:
Código:
<img src="..." style="float: left; margin: 5px; border: 1px solid black; padding: 2px;" />
Por supuesto se puede acelerar el proceso y automatizar las cosas:
Código:
<img src="..." class="flotante_izq" />
Y en la hoja CSS añadimos lo siguiente:
Código:
img.flotante_izq {
float: left;
border: 1px solid black;
margin: 5px;
padding: 2px;
}
Si, lo que vi era eso.
¿Añadiendo eso a la hoja de estilos CSS se hace solo o que?
Te explico:
Si añades eso a la hoja de estilos, añades una orden que se ejecuta inmediatamente por medio de la "palabra clave"
Código:
img.flotante_izq {
float: left;
border: 1px solid black;
margin: 5px;
padding: 2px;
}
Eso hace que a cualquier elemento que lleve esa oalabra clave que sería img.flotante_izq
Adopte demanera automática las carcterísticas que están incluidas en la orden anterior
Así, ya no tendrás que hacer esto siempre:
Código:
<img src="..." style="float: left; margin: 5px; border: 1px solid black; padding: 2px;" />
Sino que bastará con esto:
Código:
<img src="..." class="flotante_izq" />
Pues adoptará las propiedades ya estipuladas en la hoja de estilos.
Como comenté, estaría bien entender cómo funcionan HTML y CSS.
Con el atributo class lo que haces es llamar a la hoja de estilo CSS. img.loquesea lo que hace es otorgar el estilo definido en la hoja CSS a todos los elementos HTML del tipo img con la clase (atributo class) "loquesea".
Por lo tanto, todas las imágenes que lleven el mismo class tendrán el mismo estilo visual (borde, padding, margin...). Y lo mejor es que: con sólo cambiar eso en la hoja de estilo, TODAS las imágenes de tu blog con la misma class verán modificado su estilo.
¿Entendido?
Bien, ya lo he entendido, y la verdad, es muy útil. Tendré que hacer otra orden de estas en la hoja CSS para las imágenes con borde solo también.
Gracias a ambos.
Por cierto, ¿que nombre tiene la hoja CSS y dónde está? ¿Pueden colocarse estas instrucciones en cualquier lugar de ella o es en un lugar específico?
La hoja CSS creo que te permite editarla en el editor de temas.
Si no, modifica el header e incluye esta línea:
<link rel="stylesheet" type="text/css" href="http://sitio.es/hoja.css" />
Y crea un archivo en la raíz del sitio que se llame hoja.css (o como quieras) y ahí metes "a saco" el código CSS. Ese código se parece a esto:
img.clase {
border: 1px solid black;
}
La sintaxis es siempre la misma. Ahora falta que conozcas las demás propiedades (margin, padding... etc). No sólo sirve para imágenes, sino para texto (<span class="algo">texto formateado</span>) y todas las tags que lo permitan (la mayoría). Pero eso ya es duda de sintaxis CSS y por tanto va (o debería ir) en otro hilo.
En el editor de temas hay un archivo llamado style.css que contiene información del theme, ¿es ahí? Si no haré eso que dices.
oMega_2093 Escribió:La hoja CSS creo que te permite editarla en el editor de temas.
Si no, modifica el header e incluye esta línea:
<link rel="stylesheet" type="text/css" href="http://sitio.es/hoja.css" />
Y crea un archivo en la raíz del sitio que se llame hoja.css (o como quieras) y ahí metes "a saco" el código CSS.
¿Y dónde hay que ponerla? La puse arriba del todo del header.php
Edito: Creo que ya se cual es la hoja en el editor de temas. Puse lo de abajo pero no va a poner <img src="..." class="borde_black" />
img.borde_black {
border: 1px solid black;
padding: 3px;
}
Edito 2: ¡Como iba a ir sin subir la imagen! xd
Pero una cosa, por qué el borde sale distinto si pongo <img src="..." style="border: 1px solid black; padding: 3px;" /> (es lo mismo pero sale una línea negra en el borde y no solo blanco como con el otro código).