Foros del Web » Creando para Internet » CSS »

Posicionamiento y contorneo de texto

Estas en el tema de Posicionamiento y contorneo de texto en el foro de CSS en Foros del Web. Hola a todos. Como no puedo subir imágenes para mostraros lo que estoy intentando y no me sale, os lo explico lo mejor que pueda. ...
  #1 (permalink)  
Antiguo 11/09/2009, 03:38
 
Fecha de Ingreso: septiembre-2009
Mensajes: 17
Antigüedad: 14 años, 7 meses
Puntos: 1
Posicionamiento y contorneo de texto

Hola a todos.

Como no puedo subir imágenes para mostraros lo que estoy intentando y no me sale, os lo explico lo mejor que pueda.

Imaginaos una página con varias columnas hechas a base de <div>. En una de esas columnas, necesito insertar una foto de tamaño variable; debajo de ella, pondré una barra que tendrá el mismo ancho que la imagen y que contendrá controles de "ampliar" y seleccionar otra foto (del 1 al 5). Estos controles pueden ser botones o links (ya veré).

Rodeando a todo esto, hay un texto que se adapta a la forma de los dos elementos anteriores.

Si hiciera esto con tablas, no tendría problema, ya que crearía una tabla de 2 filas X 1 columna, alineada toda ella a la izquierda, para poner la foto y los controles y a su lado escribiría el texto, que contornearía la tabla sin ninguna dificultad.

El problema me viene al hacerlo mediante CSS sin tablas. Creo que he probado de todo.

Lo último que hice fue crear un <DIV> contenedor para la imagen y los controles; dentro de él, un <DIV> para la imagen y otro para los controles.

Tras el código de este <DIV> contenedor de imagen y controles, insertaba el texto.

El resultado es que el texto no contornea el conjunto Imagen - Controles, sino que empieza debajo de ellos.

Otra prueba que hice fue cambiar el <DIV> de los controles por un <SPAN>. De esta forma el texto sí me contornea el conjunto, pero los controles no aparecen debajo de la imagen, sino a su lado.

No sé qué hacer.

¿Alguna sugerencia?

Gracias
  #2 (permalink)  
Antiguo 11/09/2009, 06:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Posicionamiento y contorneo de texto

Hola CidDeMizar
Bien hallado en fdw.
Para solventar el tema de las imágenes (o enlaces) hasta que cumplas con el 30+30 puedes ponerlas sin el http://www para que no te lo rebote el foro. Tal que así: pagina.es

No se si este ejemplo se ajustará al 100% de lo que deseas:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {
  8.     background-color: #444;
  9.     margin:20px;
  10. }
  11. #galeria {
  12.   position: relative;
  13.   width: 40%;
  14.   margin: 0 auto;
  15.   clear: both;
  16.   background-color:#F5F7F9;
  17.   border-bottom:1px solid #A5A7AA;
  18.   border-right:1px solid #A5A7AA;
  19.   overflow: auto;
  20.   padding: 10px;
  21. }
  22. #galeria p {
  23.   font-size: 1em;
  24.   font-family: monospace;
  25.   text-align: justify;
  26.   }
  27. .expositor {
  28.   position: relative;
  29.   border: 1px solid #A5A7AA;
  30.   float:left;
  31.   margin:0 5px 0;
  32.   padding:5px;
  33.   text-align:center;
  34. }
  35. .expositor ul {
  36.   width: 100%;
  37.   display: block;
  38.   overflow: hidden;
  39.   background: #FF6600;
  40.   }
  41. .expositor ul li {
  42.   list-style-type: none;
  43.   float: left;
  44. }
  45. .expositor ul li a {
  46.   text-decoration: none;
  47.   padding: 5px;
  48.   font-size: .9em;
  49.   display: block;
  50.   border: 1px outset #333;
  51.   background: #FF6600;
  52.   color: #444;
  53. }
  54. .expositor ul li a:hover {
  55.   border: 1px inset #333;
  56.   background: #990000;
  57.   color: #cdcdcd;
  58. }
  59.  
  60. </head>
  61.  
  62. <div id="galeria">
  63. <div class="expositor">
  64. <a href="#" title="ver en grande"><img src="http://img299.imageshack.us/img299/9726/96830574.jpg" alt="jardín" /></a>
  65. <ul>
  66.   <li><a href="#" title="Ver ampliada">Ampliar</a></li>
  67.   <li><a href="#" title="anterior">&le;</a></li>
  68.   <li><a href="#" title="foto 1">1</a></li>
  69.   <li><a href="#" title="foto 2">2</a></li>
  70.   <li><a href="#" title="foto 3">3</a></li>
  71.   <li><a href="#" title="foto 4">3</a></li>
  72.   <li><a href="#" title="foto 4">5</a></li>
  73.   <li><a href="#" title="siguiente">&ge;</a></li>
  74. </ul>
  75. </div>
  76. <p>Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.<br/>
  77. Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.
  78. </p>
  79. </div>
  80. </body>

Bueno, lo pruebas y ya comentas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 14/09/2009, 00:41
 
Fecha de Ingreso: septiembre-2009
Mensajes: 17
Antigüedad: 14 años, 7 meses
Puntos: 1
Respuesta: Posicionamiento y contorneo de texto

Compañero: GRACIAS, GRACIAS, GRACIAS, GRACIAS...........

Eso era precisamente lo que me estaba quitando el sueño. Y el código que me has mandado es precisamente la solución.

Me había roto la cabeza de mil formas y la cuestión era, como casi siempre en CSS, el uso equivocado de los elementos que tenemos a nuestra disposición.

Gracias de nuevo.

Cid de Mizar
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 11:24.