Foros del Web » Creando para Internet » Diseño web »

como hacer que un texto ocupe el 100% de ancho del div

Estas en el tema de como hacer que un texto ocupe el 100% de ancho del div en el foro de Diseño web en Foros del Web. tengo un div rectangular y dentro hay 26 links del mismo tamaño. Tiene que quedar el mismo espacio exactamente entre link y link y abarcar ...
  #1 (permalink)  
Antiguo 13/02/2011, 23:04
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Pregunta como hacer que un texto ocupe el 100% de ancho del div

tengo un div rectangular y dentro hay 26 links del mismo tamaño. Tiene que quedar el mismo espacio exactamente entre link y link y abarcar desde el principio del div hasta el final.
  #2 (permalink)  
Antiguo 14/02/2011, 03:26
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: como hacer que un texto ocupe el 100% de ancho del div

No entiendo tu duda, acaso el texto se baja a la mitad del div??., acaso quieres que cada link sea una fila y no se alineen uno al lado del otro??
__________________
Juguetes Sexuales
  #3 (permalink)  
Antiguo 14/02/2011, 08:14
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

te lo voy a mostrar mas gráfico.
ponele que esto es un div:

|--L---L---L---L---L--------------|

las L serían los links. Como podes ver, llegan hasta la mitad del div, de izquierda a derecha. Yo quiero que esas mismas L (osea, el mismo numero de L) ocupen todo el div pero con el mismo espacio entre L y L. para que quede asi:

|---L-----L-----L-----L-----L-----|


Ahora se entiende?
  #4 (permalink)  
Antiguo 14/02/2011, 08:18
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Si, pero entonces tendrias que mostrarnos el codigo que tienes, pues lo logico es que se ocupe todo el espacio del div a menos que por CSS haya alguna restriccion.
__________________
Juguetes Sexuales
  #5 (permalink)  
Antiguo 14/02/2011, 09:02
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Código:
<div id="menu">
<li><a href="">A</li>
<li><a href="">B</li>
<li><a href="">C</li>
<li><a href="">D</li>
<li><a href="">E</li>
<li><a href="">F</li>
<li><a href="">G</li>
<li><a href="">H</li>
<li><a href="">I</li>
<li><a href="">J</li>
<li><a href="">K</li>
<li><a href="">L</li>
<li><a href="">M</li>
<li><a href="">N</li>
<li><a href="">O</li>
<li><a href="">P</li>
<li><a href="">Q</li>
<li><a href="">R</li>
<li><a href="">S</li>
<li><a href="">T</li>
<li><a href="">U</li>
<li><a href="">V</li>
<li><a href="">W</li>
<li><a href="">X</li>
<li><a href="">Y</li>
<li><a href="">Z</li>
</div>
ese seria el div. Quiero hacer el típico menu horizontal de busqueda alfabético.

esto es en CSS:

Código:
#menu {
height:27px;
float:left;
width:750px;}
#menu li {
font-size:23px;
float:left;
list-style:none;}
  #6 (permalink)  
Antiguo 14/02/2011, 09:07
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Pues probe el codigo en firefox y me sale bien, todas las letras en la misma linea.
__________________
Juguetes Sexuales
  #7 (permalink)  
Antiguo 14/02/2011, 09:08
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

SI, el problema no es que no esten en la misma linea.
El problema es que quiero que las letras lleguen desde la punta izquierda hasta la punta derecha del div.
  #8 (permalink)  
Antiguo 14/02/2011, 09:10
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

intenté hacerlo usando
Cita:
a {margin 0px 10xpx;}
pero en Internet explorer no se por que le da mas margen que en firefox y chrome
  #9 (permalink)  
Antiguo 14/02/2011, 09:16
Avatar de richicasas  
Fecha de Ingreso: abril-2007
Ubicación: Colombia
Mensajes: 692
Antigüedad: 10 años, 8 meses
Puntos: 13
Busqueda Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Pues la unica opcion seria que se maneje un numero determinado de links y se sepa el ancho de los mismos para establecer margenes y abarcar el div. De resto por obra y gracia del espiritu santo eso no abarca.
Ahora, si el problema es que el siguiente link es muy grande y baja dejando un espacio en el lado derecho puedes usar la propiedad text-align:justify;.
__________________
Juguetes Sexuales
  #10 (permalink)  
Antiguo 16/02/2011, 18:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Como tienes un ancho fijo en el div, se puede calcular cuánto debe ocupar cada elemento de la lista. Por cierto, en tu código faltaba la etiqueta <ul> para englobar los <li>.
Yo he cogido la calculadora y me sale un ancho del 3.846% para cada uno de los li.
Puedes hacer el cálculo también si lo prefieres dejar en píxeles.
Además he centrado el texto de los li para que el espacio quede mejor repartido.
Seguro que hay otras opciones.

Código CSS:
Ver original
  1. #menu {
  2.     background: none repeat scroll 0 0 #FFFFFF;
  3.     float: left;
  4.     height: 27px;
  5.     width: 750px;
  6. }
  7. #menu li {
  8.     float: left;
  9.     font-size: 23px;
  10.     list-style: none outside none;
  11.     margin: 0;
  12. }
  13. #menu li {
  14.     background: none repeat scroll 0 0 #DDDDDD;
  15.     margin: 0;
  16.     padding: 0;
  17.     text-align: center;
  18.     width: 3.846%;
  19. }
  20. #menu ul {
  21.     margin: 0;
  22.     padding: 0;
  23. }
  #11 (permalink)  
Antiguo 16/02/2011, 21:14
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

lo solucione empleando el uso de una tabla, cada link lo aloje en cada celda de la tabla (horizontal) y a la tabla le di un width:100%

Gracias por sus respuestas
  #12 (permalink)  
Antiguo 19/02/2011, 04:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Hola:

Cita:
Iniciado por skielz Ver Mensaje
lo solucione empleando el uso de una tabla, cada link lo aloje en cada celda de la tabla (horizontal) y a la tabla le di un width:100%
Mal hecho, las tablas no deben usarse para maquetación.

Saludos.

  #13 (permalink)  
Antiguo 19/02/2011, 10:34
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Cita:
Mal hecho, las tablas no deben usarse para maquetación.
por?
  #14 (permalink)  
Antiguo 19/02/2011, 12:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

Hola:

Porque según los estándares w3c las tablas son para tabular datos, por ejemplo extraidos de una base de datos, para maquetar se utiliza css.

Saludos.

  #15 (permalink)  
Antiguo 19/02/2011, 12:52
 
Fecha de Ingreso: abril-2010
Mensajes: 66
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: como hacer que un texto ocupe el 100% de ancho del div

mmm... pero me quedo como quería! que problema puede haber.?

Etiquetas: ancho
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:59.