Foros del Web » Creando para Internet » CSS »

Estructura CSS

Estas en el tema de Estructura CSS en el foro de CSS en Foros del Web. Buenas. Llevo horas tratando de conseguir hacer una plantilla con las siguientes características... A la izquierda, una zona con un texto determinado escrito (que será ...
  #1 (permalink)  
Antiguo 08/11/2015, 20:54
 
Fecha de Ingreso: marzo-2013
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Estructura CSS

Buenas.
Llevo horas tratando de conseguir hacer una plantilla con las siguientes características...

A la izquierda, una zona con un texto determinado escrito (que será de diferente tamaño según el texto).
A la derecha, ha de haber tres dibujitos, uno encima del otro...
El primero fijo arriba.
El segundo debe llegar desde la parte baja del de arriba hasta la parte superior del de abajo.
El tercero debe estar ubicado en la zona más baja, alineado con el final del texto de la izquierda.

El problema es que no consigo llevar a cabo la colocación de las dos últimas imágenes.
Hay que tener en cuenta que se trata de una plantilla, y que la altura del texto de la izquierda puede ser uno u otro, en según qué ocasión, esa es la gracia.
No pido que me escribais todo el código, no se puede pedir eso, solamente quisiera saber si se puede hacer lo que quiero usando solamente código CSS; y si pudierais darme alguna pista os lo agradeceria.
Saludos!
  #2 (permalink)  
Antiguo 10/11/2015, 02:41
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Estructura CSS

No entiendo qué quieres hacer.
__________________
(:
  #3 (permalink)  
Antiguo 10/11/2015, 07:42
 
Fecha de Ingreso: marzo-2013
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Respuesta: Estructura CSS

Adjunto un dibujo que he hecho para tratar de explicarme mejor:
(Zona de texto no significa que el usuario pueda escribir en ella, sino que esta es una plantilla pensada para rellenar con diferentes contenidos, las imagenes de la derecha serán siempre las mismas pero el texto de la izquierda va a ser distinto en las distintas páginas)

Última edición por hflecha86; 10/11/2015 a las 07:47 Razón: corregir enlace de la imagen + incluir especificación del paréntesis
  #4 (permalink)  
Antiguo 10/11/2015, 10:04
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Estructura CSS

Ok, muy bien ya entendimos que quieres hacer... ahora muéstranos tu código y haz una pregunta concreta.

esto parece una tarea escolar y no me da buena pinta.

Por cierto, esta pregunta quedaría mas en javascript puesto que no se puede hacer con CSS.
  #5 (permalink)  
Antiguo 10/11/2015, 11:46
Avatar de dartcoupli  
Fecha de Ingreso: febrero-2013
Ubicación: España
Mensajes: 13
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Estructura CSS

Hola. ¿Te refieres CSS, sin nada de HTML?.

Última edición por dartcoupli; 10/11/2015 a las 11:53
  #6 (permalink)  
Antiguo 10/11/2015, 12:51
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 9 años, 4 meses
Puntos: 91
Respuesta: Estructura CSS

quizas es algo como esto amigo?

http://codepen.io/AngelKrak/pen/XmygBR
  #7 (permalink)  
Antiguo 10/11/2015, 13:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Estructura CSS

Cuando me refiero a código no pregunto por el HTML ni el CSS, sino a todo el código que tengas para recrear lo que has hecho, de esa forma entenderemos mejor que es lo que has probado o que sabes y/o donde has errado.
  #8 (permalink)  
Antiguo 10/11/2015, 21:07
 
Fecha de Ingreso: marzo-2013
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Respuesta: Estructura CSS

Gracias AngelKrak pero la estructura que propones no se adapta al texto, se agradece igualmente el interés.
ArturoGallegos, no soy estudiante aunque resulta comprensible su sospecha; en realidad ni siquiera pretendo crear una web completa; he de dar de alta muchos anuncios de productos en una web que ofrece un espacio para la introducción de código html en la descripción en los mismos, y estoy tratando de incluir unas imágenes para decorarlo y hacer que el aspecto visual sea un poco más atrayente.
Como ya he dicho, las dificultades son tan solo dos, alinear la tercera imagen a la base del texto de la izquierda y hacer que la segunda imagen se estire ocupando el espacio que hay entre la primera y la segunda.
He hecho muchos intentos hasta empezar a estructurarlo de otra manera, habiendo desistido de conseguirlo; os copio el ultimo intento, a ver si se puede hacer algo:



<div style="position:relative; left:0px; float:left; top:0px; width:100%">
<div style="position:relative; left:0px; float:left; top:0px; width:80%">
<h3>POR QUÉ ELEGIRNOS:</h3>
<p>
En <strong>----CENSURADO----</strong> conocemos ámpliamente el sector de la impresión 3D, y somos conscientes de los inconvenientes que suelen generar los materiales de baja calidad durante el proceso de impresión así como en el resultado final. Por este motivo apostamos por una selección de productos cuyo proceso de FABRICACIÓN, ENVASADO y ALMACENAMIENTO cuente con <strong>los más altos estándares de calidad del mercado.</strong>
</p>
<p>
Asimismo somos conscientes de los contínuos cambios a los que está sometido este sector en expansión, por lo que permanecemos actualizados y a la vanguardia en cuanto a los nuevos productos y las necesidades cambiantes de los consumidores.
</p>
<h3>SU URGÉNCIA ES NUESTRA PRIORIDAD</h3>
<p>
<strong>Envíos peninsulares:</strong>
</p>
<ul>
<li>
<strong>ENVÍO EXPRESS 24H:</strong> Tránsito del envío de 24h laborables (lunes a viernes) para compras efectuadas antes de las 16:00h.
</li>
<li>
<strong>ENVÍO GRATUITO</strong> para cada producto adicional.
</li>
</ul>
<strong>Envíos no peninsulares:</strong> Solicitar presupuesto.

<h3>ESPECIFICACIONES DEL PRODUCTO:</h3>
<ul>
<li>Bobina de plástico <strong>JELLY PLA</strong> TRANSLÚCIDO</li>
<li>Color: <strong>VERDE KRYPTON</strong></li>
<li>Peso: <strong>1Kg</strong></li>
<li>Diámetro: <strong>3mm</strong></li>
</ul>
<h3>INDICACIONES DEL FABRICANTE:</h3>
<p>
El <strong>Jelly PLA de ----CENSURADO---- es un termoplástico de origen vegetal</strong> diseñado para imprimir piezas en 3D con impresoras FFF/FDM. Está compuesto de un polímero obtenido a partir de almidón de maíz con propiedades semejantes a las del tereftalato de polietileno (PET) que se utiliza para fabricar envases pero que, además, es biodegradable.
</p>
<p>
Es de <strong>color translucido con un acabado brillante</strong> con el que se consiguen impresiones en 3d diferentes y llamativas. Lo recomendamos especialmente para piezas huecas, o con paredes finas, donde se aprovecha al máximo su naturaleza translucida.
</p>
<p>
El Jelly PLA de ----CENSURADO---- se presenta en <strong>diferentes tonalidades</strong>.
</p>
<p>
Es considerado el material más <strong>fácil de imprimir</strong> ya que tiene mucha mejor adherencia que el ABS, lo que le permite ser impreso incluso sin cama caliente. Por eso, en ocasiones es el más recomendado para principiantes. Por su origen vegetal, es <strong>respetuoso con el medio ambiente</strong> y desprende un agradable aroma azucarado cuando se imprime con él.
</p>
<p>
Para unos acabados óptimos se recomienda el uso del ventilador de capa.También es favorable el uso de laca y/o cama caliente a 60º para asegurar la adhesión del filamento extruido. Dependiendo del hot-end utilizado sería necesaria la refrigeración del mismo.
</p>
</div>
<div style="position:relative; top:0px; right:0px; bottom:0px; width:80px; height:100%; float:right">
<div style="margin-left:20px; margin-bottom:0px; border:0px; padding:0px">
<img src="http://chupacabras3d.com/wp-content/uploads/2015/10/Extrusor_transparencia.png" width="60px"/>
</div>
<div style="margin-left:10px; margin-bottom:0px; border:0px; padding:0px">
<img src="http://chupacabras3d.com/wp-content/uploads/2015/10/Linia-vermella-3.png" width="80px"/>
</div>
<div style="position:relative; right:0px; bottom:0px">
<img src="http://pixers.es/image/1/400/n8nLuBDR9N1iVZ2LocXUxxUZ0Zc1HVEWhc3LJR0NMiDUS8XMfc UQ8ckSH6kSfNDXw79QhEUQho0RhIkSh72MhF3FqzSKhZkaMR3K hRGKm5dRkRHT0NnasiGaho2F0Rni/53/85/00/0053850000/3/vinilo-sello-censurado-icono.jpg" width="100px" style="position:relative; bottom:0px"/>
</div>
</div>
</div>
  #9 (permalink)  
Antiguo 11/11/2015, 11:10
 
Fecha de Ingreso: marzo-2013
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Respuesta: Estructura CSS

Imagino que no se puede resolver el asunto sin javascript como han dicho anteriormente porque no queda más remedio que almacenar una variable indicando la altura del texto de la izquierda, para poder alinear la imagen de abajo. De todos modos el texto se sale del div. Me vuelvo loco viendo como, cuando los divs parecen estar bien ubicados, aparece el problema que su contenido aparece en ubicaciones muy distintas.
  #10 (permalink)  
Antiguo 11/11/2015, 11:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Estructura CSS

1.- el texto se sale del div porque le pusiste float limpialo y veras que el div se ajusta a su contenido.

2.- la tercera imagen es facil posiconarla al final del div, meter las imagen junto con el texto y a su contenedor darle posicion relativa
1ra imagen posision absoluta con top y right en cero (quedara al inicio)
2da imagen, no se puede con CSS solo con javascript y te enfrentaras tambien al problema de que se distorcione o deforme.
3ra imagen posision absoluta con bottom y right en cero (quedara al final)
  #11 (permalink)  
Antiguo 11/11/2015, 11:46
 
Fecha de Ingreso: marzo-2013
Mensajes: 16
Antigüedad: 11 años
Puntos: 0
Respuesta: Estructura CSS

Muchas gracias Arturo, llevaré a la práctica todo lo que me comentas más tarde.
Y respecto al uso de javascript en la imagen del medio, existe alguna alternativa? Por ejemplo, tratandose de una linea, se puede crear esta de alguna manera que no conlleve el uso de javascript? O como alternativa, se puede dar una longitud a la imagen mucho más larga, haciendo que pase por detrás de la imagen de abajo y no se vea lo que sobra por debajo?
Perdón si hago muchas preguntas; he de mirar si la web que comento acepta el uso de javascript en el código.
Muchas gracias de antemano.
  #12 (permalink)  
Antiguo 11/11/2015, 13:40
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Estructura CSS

Dudo mucho que acepte javascript, ningún sitio serio lo haría ya que es hasta cierto punto peligroso tanto para ellos como para sus visitas.

Sobre alternativas viables y recomendables ninguna o al menos no de mi parte.

Sobre la alternativa que comentas, puedes asignarle un alto de (x)px que tu consideres siempre supere el alto de contenido, flotas el elemento para sacarlo del flujo o bien con posición absoluta. y por ultimo overflow hidden a su contenedor.

Pero resaltese que es algo poco recomendable ya que si o si la imagen se distorsionara siempre y darás mala experiencia al usuario.

Esto ultimo puede conllevar a la suspensión de tu cuenta, según sean las políticas del sitio en cuestión.

Etiquetas: estructura, todo
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 06:05.