Foros del Web » Creando para Internet » CSS »

Float left... diseño

Estas en el tema de Float left... diseño en el foro de CSS en Foros del Web. Tengo una pregunta. Soy muy nuevo en css (antes en realidad hacia tablas para maquetar las páginas, pero ya me pasé a esta nueva era, ...
  #1 (permalink)  
Antiguo 20/09/2009, 03:28
Avatar de Eskombro  
Fecha de Ingreso: septiembre-2009
Ubicación: Colombia
Mensajes: 437
Antigüedad: 8 años, 2 meses
Puntos: 22
Float left... diseño

Tengo una pregunta. Soy muy nuevo en css (antes en realidad hacia tablas para maquetar las páginas, pero ya me pasé a esta nueva era, jejeje). Para el encabezado de mi página pongo dos cosas: un logo y un texto. A ambos les pongo float left para que se paren en la parte mas alta, uno seguido del otro. Cuando pruebo la pg en cualquier navegador, entonces funciona bien. Pero si reduzco el tamaño de la ventana del navegador, el texto, que está después del logo, se baja a una nueva línea. Igual como todo está dentro de un div con fondo, el fondo de ese div se amplia haciua abajo y por lo tanto el texto sigue sobre el fondo. Pero esto no me acaba de gustar. Puedo hacer algo para que se quede arriba?

Un saludo. Eskombro.
  #2 (permalink)  
Antiguo 20/09/2009, 04:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Float left... diseño

No es muy claro lo que explicas, pero si metes tanto la imagen como el texto en una caja a la que das un ancho fijo (width), al reducir la ventana aparecerá el scroll vertical cuando haga falta, en lugar de saltar el texto abajo.
  #3 (permalink)  
Antiguo 20/09/2009, 05:05
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: Float left... diseño

Hola:

El texto se te baja cuando el ancho (del logo + el texto + padding + margin + border) supera al ancho del div que lo contiene. Para evitar eso puedes utilizar min-width.

Saludos.

  #4 (permalink)  
Antiguo 20/09/2009, 14:19
Avatar de Eskombro  
Fecha de Ingreso: septiembre-2009
Ubicación: Colombia
Mensajes: 437
Antigüedad: 8 años, 2 meses
Puntos: 22
Respuesta: Float left... diseño

No entiendo muy bien. Voy a explicarme un poco más.
Tengo una etiqueta div. Dentro de esta etiqueta tengo 2 etiquetas p. Una etiqueta p tiene un logo. La otra etiqueta p tiene un texto. a ambos les digo que se muestren como elementos de línea, para que uno aparezca seguido del otro en la misma línea. Esto forma el encabezado visual de mi página. A la etiqueta div le doy un color de fondo. A ambas etiquetas p le digo float:left.

Todo funciona bien, pero mi pantalla es un poco ancha. Reduzco el tamaño de la ventana del navegador para ver como se adapta cuando la ventana de visualización es más pequeña. Como dice jomaruro, cuando el ancho de la ventana es más pequeño que ambos elementos, el elemento p que contiene el texto pasa a la siguiente linea. es decir: el texto se ubica a la izquierda, pero debajo del logo, y hace que el encabezado de la página se vuelva mucho más ancho, con fondo y todo. Pero el efecto visual no me gusta para nada. Entonces quisiera que el texto no se bajara. Que se quede arriba!!!
  #5 (permalink)  
Antiguo 20/09/2009, 14:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Float left... diseño

Asigna un ancho mínimo a la caja contenedora de los dos elementos (logo y texto)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 20/09/2009, 14:33
Avatar de Eskombro  
Fecha de Ingreso: septiembre-2009
Ubicación: Colombia
Mensajes: 437
Antigüedad: 8 años, 2 meses
Puntos: 22
Respuesta: Float left... diseño

Cita:
Iniciado por kseso? Ver Mensaje
Asigna un ancho mínimo a la caja contenedora de los dos elementos (logo y texto)

Un saludo
esto sería asi?

#contenedor{min-width:30em}

por ejemplo?

Pero exactamente cual es la función del ancho mínimo?

Gracias por las respuestas y perdonad la novatada. Esuqe entiendo que cuando doy float estos elementos se "salen" de la etiqueta div, por lo que no se como funcionaría...

Un saludo, eskombro
  #7 (permalink)  
Antiguo 20/09/2009, 14:37
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: Float left... diseño

Hola:

Por eso te indicaba que utilizaras min-width que define un ancho mínimo a partir del cual la página no se deforma, es decir, el texto no se bajaría.

Léete este capítulo de la Introducción a CSS de www.librosweb.es.

Saludos.

  #8 (permalink)  
Antiguo 20/09/2009, 14:53
Avatar de Eskombro  
Fecha de Ingreso: septiembre-2009
Ubicación: Colombia
Mensajes: 437
Antigüedad: 8 años, 2 meses
Puntos: 22
Respuesta: Float left... diseño

Jajaja, me quedó clarisimo, mil gracias. La verdad me rio porque leí este libro creo que hasta el capítulo 8 o 9, y lo que me muestras es del 12, jajaja, eso es por no terminar de leer.

Gracias, un saludo.
Eskombro
  #9 (permalink)  
Antiguo 20/09/2009, 16:03
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: Float left... diseño

Hola:

Me alegro de que lo hayas entendido. En cuanto al libro tenlo a mano, siempre necesitarás algo de él.

Saludos.

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 09:56.