Comunidad de diseño web y desarrollo en internet online

Modificar el tamaño WIDTH

Citar            
MensajeEscrito el 11 Ene 2011 01:29 am
Tengo una sub pagina que es para hacer un listado de eventos el cual se divide en NOMBRE, DIA & HORA, el problema es que todo se junta y no tiene una estructura correcta:

la web es esta:
http://www.limanightzone.com/eventos/

quedo que quede cada uno en una sola fila para que se vea mas ordenado, he probado esto pero no me da:

CODIGO HTML:

Código PHP :

<div id="datos">
<p class="name"><span class="evento" id="size_evento">INTI FEST 2011 | PLAYA ASIA</span><span class="dia">12 FEBRERO 2011</span><span class="hora">01:00 P.M</span></p>
<p class="name"><span class="evento">WHITE SENSATION | XCESS</span><span class="dia">13 ENERO 2011</span><span class="hora">09:00 P.M</span></p>
<p class="name"><span class="evento">ASIA REGGAE | FESTIBAL 2011</span><span class="dia">15 ENERO 2011</span><span class="hora">10:00 P.M</span></p>
<p class="name"><span class="evento">HAWAIIAN PARTY | SAN BORJA</span><span class="dia">15 ENERO 2011</span><span class="hora">10:00 P.M</span></p>
<p class="name"><span class="evento">WILD ON | CABASH SUR</span><span class="dia">15 ENERO 2011</span><span class="hora">10:00 P.M</span></p>
</div>


CODIGO CSS:

Código PHP :

#datos p
{
   font-size: 12px;
}

#datos p span
{
   text-shadow: #04141c 4px 4px 2px;
}

#datos p span.evento
{
   font-size:13px;
   color: #f59532;
   text-transform:uppercase;
}

#datos p span.dia
{
   font-size:13px;
   color: #33c5f4;
   text-transform:uppercase;
}


#datos p span.hora
{
   font-size:13px;
   color: #33c5f4;
   text-transform:uppercase;
}


Estaba probandole darle un tamaño WIDTH a "#datos p span.evento", "#datos p span.dia", "#datos p span.hora"

Por miguelsirna

315 de clabLevel



Genero:Masculino  

Hacker & Programmer

firefox
Citar            
MensajeEscrito el 11 Ene 2011 03:59 pm
Hola, por la naturaleza de la etiqueta SPAN, aunque establezcas la propiedad width en tu css, no separara el espacio que señalas a menos que tambien indiques que la propiedad display como inline-block, de esa manera cambias la manera como se visualiza en tu pagina web, y le indicas al browser que separe el espacio que estableces como width, en resumen añade esta linea a todas tus reglas CSS para span [css]display:inline-block;[/css] y asunto resuelto.
Cualquier duda pergunta por esta via, de ahi nos cuentas como te fue.

COPY, PASTE, PLAY AND ENJOY

Por NeoCesar

Claber

1415 de clabLevel

14 tutoriales

Genero:Masculino  

Algun lugar dentro de la Matrix (Lima - Perú)

chrome
Citar            
MensajeEscrito el 11 Ene 2011 07:00 pm
Muchas gracias men :D te pasaste mil gracias.

Por miguelsirna

315 de clabLevel



Genero:Masculino  

Hacker & Programmer

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.