Duda con salto de línea extraño en css y grid960

Polakoooo

He estado buscando un lugar para poner esta duda sin necesidad de abrir un post (creo que la solución debe de ser una tontería bastante grande). Tal vez estaría bien tener un recopilatorio de dudas chorras, pero bueno ese es otro tema. Al lío.

Tengo un menú con esta pinta:

La web en cuestión es una plantilla hecha con grid960 y css y estoy metiéndole mano para hacerme con el lenguaje.
Como veis, la altura del botón del menú donde están las palabras viene definido por el interlineado. Si le defino un interlineado más pequeño, el botón empequeñece. Aunque eso en principio no tiene nada que ver con la duda.

Una vez definida la anchura del div donde están metidos los botones con el comando auto, puedo alargar las palabras y automáticamente el resto de los botones se van desplazando hacia la derecha, tal y como se puede ver aquí:

Pero aquí viene el problema: a la hora de poner un par de palabras separadas por un espacio, me hace un salto de línea que me desconfigura todo. Y me queda así:

¿Por qué pasa eso y cómo puedo evitarlo? No doy con la tecla.

Espero haberme explicado decentemente. Gracias por todo.

Pd: soy un noob de estas cosas. Si necesitáis que os copie el código css que define las características de los botones, me decís.

SicKneSs

en el css:

ul.navlink li {
line-height: 1em;
}

1 1 respuesta
Polakoooo

#2 Te doy manita y las gracias por ayudar, pero no me lo ha solucionado. Si hago eso, me pasa esto:

Y aun así, me sigue haciendo un salto de línea cuando meto un espacio.

Os hago captura de esa parte del código css (no sé cómo se hace para hacer un copypaste del código en condiciones):

RaymaN

Prueba con display: block en ul.navlink li a. Para poder ayudarte mejor podrías crear la cabecera aquí: http://jsfiddle.net/

1 respuesta
Pyronhell

Como tú mismo has explicado, la altura viene definida por el interlineado. Por lo que a nueva línea, la separación es lo que le hayas dado (que es la altura que quieres que tenga el botón).

Prueba a darle la altura que necesites al botón (en lugar de line-height) y meter el texto en algún contenedor con vertical-align: middle.

1 respuesta
SicKneSs

#1 creo que el problema está cuando declaras el tamaño del font.

en el css modifica la linea 53 por esto (quita el "/110px")

font: normal 14px Georgia, "Times New Roman", Times, serif;

ya nos dices, saludos.

Polakoooo

Ahora en breves pruebo las respuestas, muchas gracias.

#5 Eso no es problema, lo que sucede es que me cambia de línea cuando le meto un espacio, es decir cuando escribo dos palabras. Fijate en las dos últimas capturas de #1, en la última entre "el" y "home" sólo hay un espacio.

EDIT: Me sigue sin funcionar.... He probado en la web que ha puesto #4 y ahí no me pasa... lo cual es un poco raro.

#8 tampoco... al menos poniendo eso en el ul.navlink li a. no lo soluciona

1 respuesta
Pyronhell

#7 Ah, pues si es eso, white-space: nowrap; y listo.

Edit: #7 prueba a poner white-space: nowrap !important;

No es lo normal y prefiero no usarlo, pero lo más probable es que te esté haciendo herencia de algún atributo del grid360, y como no lo he usado ni idea. Sin con el important te lo sigue sin mostrar decentemente usa el inspector web para ver que te puede estar cogiendo que no quieres que esté ahí.

2 respuestas
Polakoooo

#8 Pues tampoco xDDDD.

Yo me voy esta tarde y hasta mañana seguramente no pueda trastear.

Por cierto, hablando de que estoy heredando de otro lado. Hay otro archivo css llamado text y por si acaso lo he borrado pero me seguía pasando de todas formas... :S

1 respuesta
glolg

#9 Elimina la propiedad width y prueba. El salto de línea te lo hace al detectar una anchura limitada en el div, aunque no lo entiendo ya que según la captura está en auto. Igualmente, quita la propiedad width y cuéntanos.

1 respuesta
Polakoooo

#10 Quitada la propiedad width... sigue pasando :S

Os pongo link para que os bajeis el site completo si quereis probar: http://www.mediafire.com/?zw0no5nt4ttctyi

#12 Chrome y tienes razón.................. me da vergüenza decir que no había probado a abrirlo con el explorador, pero ahí se me ve en condiciones :S

Doy por hecho entonces que no hay ningún problema de lenguaje, que es producto de una mala visualización del DW?

2 respuestas
RaymaN

#11 en Firefox, IE y Chrome no hay ningún fallo metiendo espacios. Creo que va a ser la mierda de navegador interno que usa el programa ese. Qué IE tienes instalado?

#11 si has empezado a desarrollar webs para aprender y no por necesidad, te recomiendo que tires a la basura el DW y empieces a usar simplemente Notepad++ o similares y un navegador con inspector de elementos como Chrome o Firefox.

1 2 respuestas
eXtreM3

Qué rayada, y yo que le pedí el site para mirárselo directamente más rapido. Pongo dos palabras y veo que no salta, pongo lo que me sale del nardo en el menú y está todo ok... me meto aqui y veo que es porque ha usado el visor del DW, gl xD

#11 Lección aprendida, no vuelvas a usar la pestaña Diseño, y menos cuando metas php xD

1 1 respuesta
Polakoooo

#13 Muchas gracias tio, y gracias al resto también... Bueno, por lo menos ya he aprendido a probar las cosas siempre en el explorador y no en el dw...

#12 Es un poco mezcla de ambas, empecé a verme el html para poder meterle mano a algunas cosillas y ahora si puedo mas o menos a un ritmo tranquilo aprender a pasar el diseño de PS a html y css pues genial. Ya te digo que si lo aprendo pues eso que gano pero tampoco me lo estoy tomando en plan serio de meterle 3 horas al día ni nada de eso.

1 respuesta
BLZKZ

#14 si estas aprendiendo empieza a desterrar el DW, como consejo vaya, porque no sirve para nada (tu mismo lo acabas de ver), y como editor los hay mejores (de hecho hasta el notepad es mejor)

1 respuesta
Polakoooo

#15 Pero el autocompletar y las listas desplegables las veo muy útiles para aprender, no sé...

#17 gracias por los consejos probaré el notepad++ y ya, porque no aspiro a ganarme la vida de esto ni nada por el estilo, solo a saber 4 cosas por si algún día me toca meterle caña de verdad que no me pille de nuevas... pero sí, entiendo que para los que sabéis de esto el DW sea un poco ful.

1 respuesta
BLZKZ

#16 y crees que eso solo lo tiene dw? XDDD lo que te queda entonces :P

Windows: notepad++ y sublimetext son ejemplos buenos. Si eres masoca puedes usar la version de emacs en windows, y creo que la version de vim en windows tambien tiene plugin para eso. Si usas eclipse para otras cosas pruebalo junto al plugin para desarrollo web.

Linux: gedit, kate, anjuta, eclipse, vim, emacs....

Como digo los hay mejores y 100% personalizables, yo probaría dado que el dw no solo te lleva a errores de visualización sino que tiendes a usar algunas veces por "comodidad" la pestaña de diseño para otros menesteres, y la mierda de codigo que genera es del nivel de mierda seca :)

Eso si, ahora usa lo que quieras obviamente xD

#16 yo no me gano la vida con esto y con 16 años me di cuenta que el dw no era la mejor opcion xD

1 respuesta
eXtreM3

Tampoco desestiméis el DW para siempre. Para hacer áreas es de lo mejorcito que hay ^^ :si:

y para... para... para... /trollface.jpg

Usuarios habituales

  • eXtreM3
  • BLZKZ
  • Polakoooo
  • RaymaN
  • glolg
  • Pyronhell
  • SicKneSs