Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Texto de Forma paralela y/o al lado

Estas en el tema de Texto de Forma paralela y/o al lado en el foro de CSS en Foros del Web. Hola a todos! necesito de su ayuda! quiero poner un texto en forma paralela o al lado de otro texto pero no puedo D: aqui ...
  #1 (permalink)  
Antiguo 26/06/2014, 01:33
Avatar de Nao_Leviathan  
Fecha de Ingreso: junio-2014
Mensajes: 3
Antigüedad: 9 años, 9 meses
Puntos: 0
Pregunta Texto de Forma paralela y/o al lado

Hola a todos!

necesito de su ayuda!

quiero poner un texto en forma paralela o al lado de otro texto pero no puedo D:

aqui les dejo una imagen de referencia de como deberia quedar:

Cita:
y aqui estan los codigos si hay algo malo o si me falta algo estaria agradecido de su corrección :)

Código:
<div id="informacion">
  
  <h4 class="Tipografias"> <span class="tip-info"><span class="izquierdo">Nuevo Album "Relentless"</span></span> </h4>
  <h4 class="tip-info"> Lanzamiento: 25.06.2014 </h4>
  
  <img src="Images/Cover01.jpg" align="left" </img> 
  
<p class="centrado"> 
<span class="izquierdo">
<ul>ALBUM “Relentless” </ul>
<ul>TrackList:</ul>
<ol>
  <span class="tamañotxt">1. Relentless(intro)</span>
</ol>
<ol>
  <span class="tamañotxt">2. Full Of Lies</span>
</ol>
<ol>
  <span class="tamañotxt">3. What Are You Fighting For</span>
</ol>
<ol>
  <span class="tamañotxt">4. Sickness</span>
</ol>
<ol>
  <span class="tamañotxt">5. Time To Say Goodbye</span>
</ol>
<ol>
  <span class="tamañotxt">6. Get Up</span>
</ol>
<ol>
  <span class="tamañotxt">7. Take Control Of You</span>
</ol>
<ol>
  <span class="tamañotxt">8. Jealous</span>
</ol>
<ol>
  <span class="tamañotxt">9. Once</span>
</ol>
<ol>
  <span class="tamañotxt">10. Pain Of March</span>
</ol>
<span class="tamañotxt">
<ol>
11. Life</span></span></p>
     
</div>
  #2 (permalink)  
Antiguo 26/06/2014, 05:07
Avatar de dreamkarkayu  
Fecha de Ingreso: junio-2010
Mensajes: 22
Antigüedad: 13 años, 9 meses
Puntos: 2
Respuesta: Texto de Forma paralela y/o al lado

Para eso debes usar CSS. ¿Tienes el CSS para ese codigo?
Puedes hacerlo de varias formas, pero la mas sencilla es colocar dos bloques (<div>): uno que flote a la izquierda y otro a la derecha con la propiedad float.
Y en cada bloque metes lo que te haga falta (imagenes, listas, texto...)

Por otro lado, no estas estructurando bien las etiquetas HTML. Tienes varios fallos como el poner dos span seguidos para usar dos clases o englobar listas con un span
Pero el mas destacable (y donde puedes tener mas problemas) es que no estas usando bien ninguna de las listas que has creado: <ul> <ol>

Las listas en HTML se definen asi:
Código HTML:
 <ol>
  <li> elemento 1</li>
  <li> elemento 2</li>
  <li> elemento 3</li>
  <li> elemento 4</li>
  . . .
</ol>

 <ul>
  <li> elemento 1</li>
  <li> elemento 2</li>
  <li> elemento 3</li>
  <li> elemento 4</li>
  . . .
</ul> 
Toda lista esta compuesta de elementos que se definen entre etiquetas <li> y tu no los has puesto. Además, las listas ordenadas <ol> ya colocan la numeración automáticamente, no hace falta que escribas tú los números.

Te lo digo porque eso es lo primero que debes solucionar antes de empezar con el CSS, si no, vas a tener problemas de visualización dependiendo del navegador que uses.

Última edición por dreamkarkayu; 26/06/2014 a las 05:13
  #3 (permalink)  
Antiguo 26/06/2014, 12:58
Avatar de Nao_Leviathan  
Fecha de Ingreso: junio-2014
Mensajes: 3
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Texto de Forma paralela y/o al lado

Muchas Gracias por la correción! :)

soy un novato aún jeje estoy recien empezando a manejar el tema jeje

pude alinear 2 div pero el 3ro no se porque se ve tan pequeño D:
cual es el problema? o:

Imgan de referencia:


Codigo HTML
Código:
<div id="informacion">
  
  <div id="contenido1" style="float:left">
  </div>
  
  <div id="contenido2" style="float:left">
  </div>
  
  <div id="contenido3" style="float:left">
  </div>
  
</div>
Codigo CSS

Código:
#informacion {
	width:800px;
	height:300px;
	background-image:url(Images/fondoinformacion.png);
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:medium;
}

#contenido1 {
	width: 250px;
	height: 295px;
	background-color:#000;
	padding: 5 5 5 5;
}

#contenido2 {
	width: 250px;
	height: 295px;
	background-color:#000;
	padding: 5 5 5 5;
	margin-left: 25px;
}

#contenido3 {
	width: 250 px;
	height: 295 px;
	background-color:#000;
	padding: 5 5 5 5;
	margin-left: 25px;
	float:left;
}

Última edición por Nao_Leviathan; 26/06/2014 a las 14:27
  #4 (permalink)  
Antiguo 26/06/2014, 15:10
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: Texto de Forma paralela y/o al lado

Corrige 295 px por 295px.

Más fácil es hacer una clase, usar style es generalmente mala práctica y el relleno debería de tener alguna medida, además de que no hace falta repetirlo si para los cuatro lados es el mismo valor:

Código CSS:
Ver original
  1. <div id="contenido1" class="caja"></div>
  2.   <div id="contenido2" class="caja"></div>
  3.   <div id="contenido3" class="caja"></div>

Código CSS:
Ver original
  1. .caja {
  2.   width: 250px;
  3.   height: 295px;
  4.   background-color:#000;
  5.   padding: 5px;
  6.   margin-left: 25px;
  7. }
__________________
(:
  #5 (permalink)  
Antiguo 26/06/2014, 16:45
Avatar de Nao_Leviathan  
Fecha de Ingreso: junio-2014
Mensajes: 3
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Texto de Forma paralela y/o al lado

Muchas Gracias chico! por su ayuda y tiempo :)
me ha resultado a la perfección :)

Saludos!

Etiquetas: forma, lado
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 18:37.