Foros del Web » Creando para Internet » CSS »

Alinaer imagen y texto...

Estas en el tema de Alinaer imagen y texto... en el foro de CSS en Foros del Web. Hola gente del foro CSS, recurro a su ayuda para ver si me dan una mano para poder dejar estas cosas alineadas bien, tanto en ...
  #1 (permalink)  
Antiguo 18/06/2009, 15:00
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Alinaer imagen y texto...

Hola gente del foro CSS, recurro a su ayuda para ver si me dan una mano para poder dejar estas cosas alineadas bien, tanto en IE como en FF

Primero las screens de lo que pasa y como lo quiero yo, y luego les paso los códigos...




style-sepa.css

Código PHP:
/* RESET */

htmlbodydivspanappletobjectiframeh1h2h3h4h5h6pblockquotepreaabbracronymaddressbigcitecodedeldfnemfontimginskbdqssampsmallstrikestrongsubsuptt, var, dldtddolullifieldsetformlabellegendtablecaptiontbodytfoottheadtrthtdcenterub{
    
margin0;
    
padding0;
    
border0;
    
outline0;
    
font-weightnormal;
    
font-stylenormal;
    
font-size100%;
    
font-familyinherit;
    
vertical-alignbaseline;
    }

body line-height1; }

:
focus outline0; }

olul { list-stylenone; }

table border-collapsecollapseborder-spacing0; }

inputtextarea margin0padding0; }

/* COMIENZO */

body {
    
background-color#050;
    
font-family"Trebuchet MS"Arial;
    
font-size16px;
    
color#FFF;
    
}

{
    
font-weightbold;
    }

#home p {
    
padding-bottom10px;
    }

small {
    
font-size12px;
    }

#contenido {
    
width950px;
    
padding5px;
    
margin:  0px auto;
    
positionrelative;    
    }

#cabecera {
    
width950px;
    
height105px;
    
padding5px 0;
    
margin:  0px auto;
    
positionrelative;    
    }

#cabecera img {
    
displayblock;
    
marginauto;
    
bordernone;
    }


#separador {
    
width100%;
    
height25px;
    
positionrelative;    
    
background-color#020;
    
border-top#fff solid 4px;
    
border-bottom#fff solid 4px;
    
padding0px 2px;
    }
    
#separador ul li {
    
width157px;
    
floatleft;
    
height25px;
    }

#separador ul li a {
    
color#FFF;
    
text-decorationnone;
    
displayblock;
    }

#separador ul li a:hover {
    
color#FC0;
    
displayblock;
    }

#separador p {
    
margin-top3px;
    }

#separador img {
    
margin-right3px;
    }

#home {
    
width930px;
    
padding10px 10px 30px 10px;
    
margin:  0px auto;
    
positionrelative;    
    
min-height350px;
    } 
separador.php

Código PHP:
<?php
$time
=date('j M Y H:i:s');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>GO</title>
<link rel="stylesheet" href="style-sepa.css" type="text/css" media="screen" />

<script language="JavaScript" type="text/JavaScript">
    var Hoy = new Date("<?php echo $time?>");
function Reloj(){ 
    Hora = Hoy.getHours() 
    Minutos = Hoy.getMinutes() 
    Segundos = Hoy.getSeconds() 
    if (Hora<=9) Hora = "0" + Hora 
    if (Minutos<=9) Minutos = "0" + Minutos 
    if (Segundos<=9) Segundos = "0" + Segundos 
    var Mes = new Array("Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"); 
    var Anio = Hoy.getFullYear(); 
    var Fecha = Hoy.getDate() + " " + Mes[Hoy.getMonth()] + " "; 
    var Inicio, Script, Final, Total 
    var Inicio, Script, Final, Total 
    Inicio = "" 
    Script = Fecha + Hora + ":" + Minutos + ":" + Segundos 
    Final = "" 
    Total = Inicio + Script + Final 
    document.getElementById('Fecha_Reloj').innerHTML = Total 
    Hoy.setSeconds(Hoy.getSeconds() +1)
    setTimeout("Reloj()",1000) 

</script>
</head>

<body onload="Reloj()">
<div id="contenido">
<div id="cabecera">
</div>

<div id="separador">
<ul>
<li><img align="left" src="images/turnos.gif" /><p>Turno</p></li>
<li><p><div id="Fecha_Reloj"></div></p></li>
<li><a href="logout.php"><img align="left" src="images/logout.gif" /><span>Log-out</span></a></li>
</ul>
</div>
El problema que no logro que los textos queden alineados al centro del ul li junto con las imagenes o cuando sólo hay texto...

¿Saben que estoy haciendo mal?

Gracias...
__________________
elGastronomo
  #2 (permalink)  
Antiguo 18/06/2009, 15:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Alinaer imagen y texto...

¿has probado a añadir un padding-top a '#separador ul li a' ?
Y para la imagen de los ¿dados? un 'display: inline'
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 18/06/2009, 16:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Alinaer imagen y texto...

Podrías empezar por estos cambios:
eliminas cosas que te sobran (como las P) del HTML
Cita:
<div id="separador">
<ul>
<li><img align="left" src="images/turnos.gif" />Turno</li>
<li><div id="Fecha_Reloj"></div></li>
<li><a href="logout.php"><img align="left" src="images/logout.gif" /><span>Log-out</span></a></li>
</ul>
</div>
Y cambia esto en la CSS:
Cita:
#separador img {
margin-right: 3px;
vertical-align: middle;
}
A partir de ahí vemos cómo va.
  #4 (permalink)  
Antiguo 18/06/2009, 16:06
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Alinaer imagen y texto...

Bueno, poniendo esto...

#separador ul li span {
padding-top: 3px;
display: block;
}

Logro que el texto que dice Log-out baje para quedar alineado, el problema es que en IE pega un salto de linea...

Si le pongo a todo display: inline; no pega el salto de linea, pero tampoco queda centrado...
__________________
elGastronomo
  #5 (permalink)  
Antiguo 18/06/2009, 16:30
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Alinaer imagen y texto...

Bueno, Mikmoro, es lo que me pasa a veces pienso que por poner Spans o P y darles propiedades solucionare el tema, pero veo que no hago más que complicarla, para la proxima seguiré tu metodo, deshacernos de lo innecesario y tratar de solucionarlo con lo básico...

Gracias por la respuesta, podemos decir que quedo quasi-perfecto, estamos hablando de unos 2px de diferencia, pero a lo que era antes, ahora está hermoso...



Dejé como decías vos y al div que contiene fecha y hora le puse

#Fecha_Reloj {
padding-top: 3px;
}
__________________
elGastronomo

Última edición por American2010; 18/06/2009 a las 17:20
  #6 (permalink)  
Antiguo 18/06/2009, 23:27
 
Fecha de Ingreso: septiembre-2004
Mensajes: 9
Antigüedad: 19 años, 6 meses
Puntos: 0
Exclamación Respuesta: Alinaer imagen y texto...

Hola:

No se si aun pueda servirte o solo queda como comentario general, estoy haciendo un portal y en el diseño y desarrollo tuve problemas con la orientacion de las listas y sus elementos, problema que resolvi quitando lo siguiente:

Código:
 
 margin:0;
 padding:0;
y asignando a la lista la posicion en la que deseaba apareciera

Código:
 position:absolute; 
 left:390px;
 top:30px;
con eso logre que quedaran en la posicion deseada y se ve exactamente igual en FireFox, IExplorer, Opera entre otros.... saludos y ojala sirva de algo si no pues ni modo
  #7 (permalink)  
Antiguo 19/06/2009, 03:47
 
Fecha de Ingreso: junio-2009
Ubicación: Madrid
Mensajes: 402
Antigüedad: 14 años, 9 meses
Puntos: 20
Respuesta: Alinaer imagen y texto...

Una pregunta ya que estamos hablando del IE

vosotros para probar el css en IE 5, 6, 7, 8 (saldra pronto) los instalais en el PC, o teneis algun software simulador de eso??
  #8 (permalink)  
Antiguo 19/06/2009, 05:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Alinaer imagen y texto...

ie5: ya es historia (de la mala)
ie6: esperando a que dentro de un año ya sea historia (de la mala) pero todavía tiene su cuota.
ie7: muy alta cuota
ie8: ya hace un tiempo que está lanzado

Tienes varios "emuladores", como "múltiple ie".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 19/06/2009, 14:42
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Alinaer imagen y texto...

Yo testeo contra IE 6... Ya si en IE7 u 8 mi sitio se verá mal será trabajo para más adelante, aunque quizás deba ya instalarme el 7, pero me resisto...


Gracias por el dato TUX2003, lo tendré en cuenta...
__________________
elGastronomo
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 17:58.