Ayuda para maquetar contenidos con CSS

pablinff · #1 (**permalink**) 02/11/2006, 23:51

Buenas gente tengo un problema, tengo una página donde quiero recopilar contenidos varios, hasta ahora tengo un poema y una imagen, y quiero poner uno al lado del otro, pero no puedo lograrlo, a la imagen me la manda por debajo de el poema.
Aquí está la página:
www.instintoar.com.ar/instinto.htm

Aquí está el código de la misma:

Código:

<HTML>

 <HEAD>
   <TITLE>::INSTINTO::</title>
<link rel="STYLESHEET" type="text/css" href="estilos.css"></HEAD>
 <BODY bgproperties=fixed>
 <script src="menu.js"></script>
<div class="menu"><script menumaker src="gif/Menu/menu_.js"></script></div>
  <HR>
<div align="center"><img src="gif/titulos/instinto.gif"></div>
  <h1>INSTINTO</h1>
<div class="ins"><table border="3" cellpadding="0" cellspacing="1">
    <tr>
      <td><p class="ins_1">No pierdas de vista lo que hoy el mundo necesita, tal
        vez no estés en la lista, pero seguro no te olvidarán; esto es solo el
        comienzo no te pierdas en mi refrán.&nbsp;</p>
        <p class="ins_1">Tus huellas no desaparecen, pero el camino puede
        cambiar, los que ayer estuvieron pueden hoy no estar.</p>
        <p class="ins_1">&nbsp;&quot;INSTINTO&quot; es tu lado oscuro, y este
        espera actuar. No lo acultes, se que eres debil. &quot;El&quot; no llama
        a tu puerta para pasar.</p>
        <p class="ins_1">Que me pasa veo erroneo, o quizás lo que veo quiero
        ocultar.</p>
        <p class="ins_1">Ya no quiero pensar, se que es inútil, ya no me voy a
        salvar, ya es tarde ya estás solo, tus palabras nadie las oirá, esta
        vez hablará tu &quot;INSTINTO&quot;, él te dominará, es todo lo que
        obviarás.</p>
        <p class="ins_1">Quizás sea cierto, quizás te miento, ya dá igual, yo
        hablaré por vos y nadie lo sabrá, esto siempre a sido así, y así
        seguirá!!!!!&nbsp;</p>
        <p class="ins_1">&nbsp;</p>
  <p class="ins_1"> BUENO, ESTO ES ALGO QUE SE LO
  QUERIA REGALAR POR TODO LO QUE USTEDES DAN POR NOSOTROS, SUS SEGUIDORES, SE QUE
  ES POCO PERO PEOR ES NADA.</p>
<p class="autor">Autor: Arnold Carballo</p></td>
    </tr>
    </table>
     </div>
<div class="ins1"><table border="3" cellpadding="0" cellspacing="1">
 <tr>
      <td><a href="gif/Instintopremio.jpg"><img src="gif/Instintopremio.jpg" width="200"
height="300" border="0"></a></td>
 </tr>
  </table>
 </div>
 
 </body>
</html>

Estos son los estilos:

Código:

ins {
 text-transform:none;
 Margin-top:1.5cm;
 Margin-left:1cm;
 Margin-right:9cm;
 text-indent: 5px;
 line-height: 16px;
 font-size:10pt;
 font-family:"Comic Sans MS", "Copperplate Gothic Bold",arial;
 color:#FFFF00;
 text-align:justify }
.ins_1 {
 Margin-left:5px;
 Margin-right:5px;
 Margin-top:5px;
 Margin-bottom:5px;
 text-indent: 5px;
 line-height: 16px;
 font-size:10pt;
 font-family:"Comic Sans MS", "Copperplate Gothic Bold",arial;
 color:#FFFF00;
 text-align:center }
.ins1 {
 text-transform:none;
 Margin-top:1.5cm;
 Margin-left:11.2cm;
 Margin-right:1cm;
 text-indent: 5px;
 line-height: 16px;
 font-size:10pt;
 font-family:"Comic Sans MS", "Copperplate Gothic Bold",arial;
 color:#FFFF00;
 text-align:justify }

Desde ya agrezco de antemano al que me preste su ayuda.
Saludos!

alexblue · #2 (**permalink**) 03/11/2006, 01:19

Hola pablinff:

Debes poner la imagen en la misma celda que el texto y luego con estilos desplazarla donde tú quieras:

Código HTML:

<HTML>

 <HEAD>
   <TITLE>::INSTINTO::</title>
<link rel="STYLESHEET" type="text/css" href="estilos.css"></HEAD>
 <BODY bgproperties=fixed>
 <script src="menu.js"></script>
<div class="menu"><script menumaker src="gif/Menu/menu_.js"></script></div>
  <HR>
<div align="center"><img src="gif/titulos/instinto.gif"></div>
  <h1>INSTINTO</h1>
<div class="ins"><table border="3" cellpadding="0" cellspacing="1">
    <tr>
      <td>
	  
          <a href="gif/Instintopremio.jpg">
	      <img src="gif/Instintopremio.jpg" width="200" height="300" border="0" style="float:left; margin:0 10px 0 0">
          </a>

	  <p class="ins_1">No pierdas de vista lo que hoy el mundo necesita, tal
        vez no estés en la lista, pero seguro no te olvidarán; esto es solo el
        comienzo no te pierdas en mi refrán.&nbsp;</p>
        <p class="ins_1">Tus huellas no desaparecen, pero el camino puede
        cambiar, los que ayer estuvieron pueden hoy no estar.</p>
        <p class="ins_1">&nbsp;&quot;INSTINTO&quot; es tu lado oscuro, y este
        espera actuar. No lo acultes, se que eres debil. &quot;El&quot; no llama
        a tu puerta para pasar.</p>
        <p class="ins_1">Que me pasa veo erroneo, o quizás lo que veo quiero
        ocultar.</p>
        <p class="ins_1">Ya no quiero pensar, se que es inútil, ya no me voy a
        salvar, ya es tarde ya estás solo, tus palabras nadie las oirá, esta
        vez hablará tu &quot;INSTINTO&quot;, él te dominará, es todo lo que
        obviarás.</p>
        <p class="ins_1">Quizás sea cierto, quizás te miento, ya dá igual, yo
        hablaré por vos y nadie lo sabrá, esto siempre a sido así, y así
        seguirá!!!!!&nbsp;</p>
        <p class="ins_1">&nbsp;</p>
  <p class="ins_1"> BUENO, ESTO ES ALGO QUE SE LO
  QUERIA REGALAR POR TODO LO QUE USTEDES DAN POR NOSOTROS, SUS SEGUIDORES, SE QUE
  ES POCO PERO PEOR ES NADA.</p>
<p class="autor">Autor: Arnold Carballo</p></td>
    </tr>
    </table>
     </div>
<div class="ins1"><table border="3" cellpadding="0" cellspacing="1">
 <tr>
      <td></td>
 </tr>
  </table>
 </div>
 
 </body>
</html>

Te he puesto los estilos directamente en la imagen porque no se que nombre quieres darle al estilo.

Código HTML:

<a href="gif/Instintopremio.jpg">
	      <img src="gif/Instintopremio.jpg" width="200" height="300" border="0" style="float:left; margin:0 10px 0 0">
          </a>

Suerte

bardovich · #3 (**permalink**) 03/11/2006, 01:35

Hay muchas cosas que debes corregir, te recomiendo que empieces a estudiar html.
Pero por ahora prueba con esto:

Código:

<td>
<a href="gif/Instintopremio.jpg"><img src="gif/Instintopremio.jpg" width="200"
height="300" border="0" align="right"></a>
<p class="ins_1">No pierdas de vista lo que hoy el mundo necesita, tal
        vez no estés en la lista, pero seguro no te olvidarán; esto es solo el
        comienzo no te pierdas en mi...

observa el align="right"

iconogt · #4 (**permalink**) 03/11/2006, 10:18

y que tal si usan float?

Código:

#estilo img { float : right;margin : 2px 2px .5em .5em;padding : 0; }

Espero te sirva

pablinff · #5 (**permalink**) 03/11/2006, 11:02

Les comento que tampoco soy tan novato con el tema de HTML, estoy aprendiendo aun eso si!

Bueno con respecto a la respuesta de alexblue: De esa forma no me sirve, puesto que a la imagen me la mete junto al texto dentro de la misma celda, y no es lo que busco, lo que busco es que me lo ponga en otra celda pero al lado.
Respecto a la respuesta de bardovich: Buscando el objetivo que busco, osea que permanezacan el texto y la imagen por separado en celdas individuales, el único efecto que tendría el 'Align="Right' , sería alinearme la imagen a la derecha con respecto a la celda que la está conteniendo, sin resolver mi problema de la ubicación de las misma.
Después la respuesta de Iconogt: Probé eso que me dijiste sin éxito :(
Agradezco toda la ayuda que me prestaron hasta el momento, aunque no resolví el problema. Espero que me puedan ayudar a encontrar una solución a esto.
Saludos!

iconogt · #6 (**permalink**) 04/11/2006, 11:38

Aquí te dejo otra posible solución a tu problema:

Código:

.bloques {
float : left;
width : 200px;
height : 350px;
margin : .5em 0 .5em 0;
padding : 0;
border : 1px solid #0000ff;
}

con eso las dos capas quedarían justo una a la par de la otra, Ya sólo es de crear dos divs y aplicarles la clase.

Le dejé un borde azul para que veas las capas, intenta con esto y si no te sirve mejor si das un ejemplo mas claro de lo que quieres, como por ejemplo algún sitio donde esté el efecto que buscas.

pablinff · #7 (**permalink**) 04/11/2006, 19:22

Funcionó como me dijiste, pero no logro modificar el ancho del primer div, osea creé una clase para cada Div, para el poema es .ins

Código:

.ins {
float : left;
width : 400px;
height : 300px;
margin : .5em 0 .5em 0;
padding : 0;
border : 1px solid #0000ff;
}

y para la imagen es .ins1

Código:

.ins1 {
float : left;
width : 200px;
height : 300px;
margin : .5em 0 .5em 0;
padding : 0;
border : 1px solid #0000ff;
}

Osea modifico el atributo "width", pero no me toma los cambio, queda el div con un ancho de 200px.