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

[Nao_Leviathan]

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:

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>

[dreamkarkayu]

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.

[Nao_Leviathan]

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;
}

[pzin]

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:

<div id="contenido1" class="caja"></div>
  <div id="contenido2" class="caja"></div>
  <div id="contenido3" class="caja"></div>
 

Código CSS:

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

[Nao_Leviathan]

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

Saludos!