Foros del Web » Creando para Internet » CSS »

Ayuda para maquetar contenidos con CSS

Estas en el tema de Ayuda para maquetar contenidos con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/11/2006, 23:51
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
Ayuda para maquetar contenidos con CSS

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!
__________________
I'm gonna start a revolution from my bed...

Última edición por pablinff; 07/11/2006 a las 01:28 Razón: Actualización de la Url.
  #2 (permalink)  
Antiguo 03/11/2006, 01:19
Avatar de alexblue  
Fecha de Ingreso: enero-2006
Ubicación: Londres
Mensajes: 71
Antigüedad: 11 años, 10 meses
Puntos: 0
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
__________________
Alex
alexamine.co.uk
Mi profile en Linked In
  #3 (permalink)  
Antiguo 03/11/2006, 01:35
 
Fecha de Ingreso: agosto-2005
Mensajes: 53
Antigüedad: 12 años, 3 meses
Puntos: 0
De acuerdo solución por el momento

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"
__________________
"el cliente siempre tiene la razón":arriba::stress:
  #4 (permalink)  
Antiguo 03/11/2006, 10:18
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
y que tal si usan float?

Código:
#estilo img { float : right;margin : 2px 2px .5em .5em;padding : 0; }
Espero te sirva
__________________
_______
Jorge Rojas.
  #5 (permalink)  
Antiguo 03/11/2006, 11:02
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
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!
__________________
I'm gonna start a revolution from my bed...
  #6 (permalink)  
Antiguo 04/11/2006, 11:38
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola pablinff,

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.
__________________
_______
Jorge Rojas.

Última edición por iconogt; 04/11/2006 a las 11:44 Razón: Se me olvido agregar otra explicaciòn
  #7 (permalink)  
Antiguo 04/11/2006, 19:22
Avatar de pablinff  
Fecha de Ingreso: diciembre-2005
Ubicación: Argentina
Mensajes: 383
Antigüedad: 12 años
Puntos: 7
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.
__________________
I'm gonna start a revolution from my bed...
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 15:21.