Problema con CSS flotadores (imágenes) en el diseño.

Bueno, yo estoy teniendo problemas graves con flotadores CSS.

He creado un diseño en Photoshop, en rodajas y todo lo importado en Dreamweaver. Hasta ahora, todo bien. Sin embargo, cuando el tramo con Photoshop, se obtiene una CSS con "position: absolute", que estoy tratando de evitar.

Sin embargo me las arreglé para obtener la cabecera parcialmente correctamente a flote, pero por alguna razón, no se muestra correctamente en Firefox y IE8.

Alguien puede tener una rápida mirada y ver lo que estoy haciendo mal aquí? Y si es posible corregir los errores o decirme lo que estoy haciendo mal?

Porque yo soy realmente golpear una pared de ladrillos en el momento.

Aquí está la página: vínculo

Gracias de antemano.

Oye HHawk,
Bienvenido a Ozzu. Creo que la cabecera se ve bien en FF3.5 en OSX, excepto la imagen de la derecha que sólo necesita una almohadilla o margen que se le añadirá en el lado derecho. También hay algunas cosas extrañas espaciamiento pasa en IE6. Es posible que desee ejecutar un css restablecer primero en iniciar todos los navegadores en el mismo lugar. Yahoo tiene un muy buen uso de un i aquí . ¿Te importa si me preguntan por qué se rompió la imagen en tantas secciones?

También por qué estás tratando de evitar la posición absoluta?

Gracias por la bienvenida.

Sí, todo parece bien, a excepción de la parte derecha española.
He intentado todo, de relleno, margen de / etc, pero todo lo que hacen lucir bien en Firefox, el fichero es arruinado en Internet Explorer y viceversa. : S

Bueno, no esta parte (la cabecera), pero el principal (cuerpo) de la página web será ampliable mediante columnas, sin embargo cuando se utiliza "position: absolute" las columnas no se expandan y el pie de página se interpone en el camino. No sé cómo explicarlo mejor, pero he estado ocupado con este diseño para el pasado varios días y me estoy haciendo nada. : S

Ya de nuevo en rodajas todo, con el fin de hacerlo funcionar correctamente.

Bueno este es el culpable, no puedo solucionarlo: vínculo

Alguien tiene una idea?

Im que no está seguro de lo que usted está tratando de construir aquí. Los métodos que veo en el enlace que has publicado anteriormente son análogas a las ideas que se han utilizado para los diseños presentados. Creo que necesitamos un nuevo enfoque. Youve esencialmente tiene un gran gráfico, sólo en picado hasta los bits.

Si el área roja de la cabecera son un DIV con una imagen de fondo, usted podría simplemente flotar un recipiente con la inserción de imágenes a la derecha y fuera del margen de que no pare de contenedores. Thats uno o dos y dos DIVs gráfico sin embargo frente a muchos que está utilizando aquí. Por no hablar de que el trabajo en condiciones de igualdad en todos los navegadores.

A continuación, la siguiente fila - su menú. Esto puede ser simplemente una UL con una amplia imagen de 1px de repetir en el fondo.

Además, está utilizando el formato de imagen incorrecto. PNG es muy bueno (woohoo.), y todos, cuando se utiliza en el contexto adecuado. Sin embargo, no hay ninguna buena razón para usarlos dogmáticamente universalmente. Theres apenas ninguna ventaja aquí.

Lo mejor que se nos muestran para obtener ayuda es su diseño de conjunto. Lamentablemente, el enfoque que está utilizando no es más que lo que increíblemente más difícil de lo que tiene que ser.

En primer lugar gracias por la respuesta, yo estoy usando png causa en comparación con gif y jpg, png fue la menor.

El círculo verde parte tendrá un script php, que muestra imágenes aleatorias, thats la razón por la que se arriba en rodajas al igual que en el primer lugar. También en el marco de la parte de texto, se cita al azar de texto de los clientes. Una vez más el script php.

Y yo siempre pensé 1 cargando imagen grande en lugar de 10 pequeñas imágenes de su página web hace más lento y, por tanto, la carga tarda más tiempo en pantalla? O al menos esa es mi experiencia.

Para crear su menú bien, sólo tiene un 1 x 15 píxeles gráficos de la pendiente en la parte inferior. Como un archivo GIF que 94 bytes, como PNG sería 210 bytes. Actualmente, está utilizando 11 gráficos creo.

El uso de secuencias de comandos del lado del servidor no debería afectar a su marcado aquí. Incluso si los contenidos que se insertan dinámicamente es de longitud variable o diferentes dimensiones en píxeles. Al final, la salida seguirá siendo HTML.

¿Quién en el mundo te dijo eso? La diferencia entre uno y diez 100kb gráfico 10kb es de 9 viajes al servidor.

Por su tono, supongo que se están acercando a mi consejo con un cierto grado de incredulidad.

En primer lugar no me significa ningún delito, Inglés no es mi idioma nativo, pues, algunas palabras pueden sonar diferente (hostiles) a usted, mientras no se entiende así. Por ejemplo yo no entiendo "incredulidad", pero supongo que su dissbelieve? Y que no sería el caso, la causa que hago es tomar en consideración.




Uhm...Quiero decir que como que causa Internet Explorer o Firefox utilizar varias conexiones HTTP de todas formas para conectarse a un sitio web, lo que significa que cada conexión de carga varias imágenes / texto / es / flash / etc de un sitio web. O estoy mal aquí.



Muy bien, ahora entiendo lo que quieres decir con el menú. Didnt entender en primer lugar; mi HTML / CSS competencias no son las más grandes. En cuanto a las imágenes, yo uso la configuración alta para ambos GIF / PNG (Photoshop), quizá esa es la razón por la que GIF fue mayor para mí que PNG.



Bien gracias, yo no estaba seguro acerca de eso. Eso me recuerda a otro problema, en el diseño anterior en rebanadas, fui utilizando el 1 imagen de fondo para la altura total. Por supuesto, esto funciona perfectamente cuando el contenido del sitio web no se amplía. Sin embargo cuando se expanda (más texto) que se expanden, pero la imagen de fondo había una altura fija, de modo que el contenido no se suman más con el fondo (la esperanza de que entiende lo que quiero decir, intentando mi mejor para explicar aquí).

Una vez más, no significa ningún tipo de delito. : S

Tratando de entender todo esto, he usado para crear páginas web HTML, con tablas y tal. Luego se trasladó a CSS, son causa de cuadros de datos, pero todavía encontramos difícil de utilizar CSS, incluso difíciles que he leído muchos tutoriales sobre el mismo (incluso htmldog).

Voy a intentar subir el diseño completo de lo que estoy tratando de conseguir más adelante. Tienen que salir por una hora o así. Tendrá una mejor idea de lo que estoy tratando de lograr y tal vez incluso unos pocos enlaces y asesoramiento.

Igualmente mi culpa en el tono de los puestos. Su realmente difícil saber a veces. Sé Ive leer mis propios mensajes de vez en cuando y pensé que sonaba como una sarcástica culo.

Realmente creo que podría trabajar de una mejor estrategia para su diseño de conjunto. También creo que, al hacerlo, obtendrá una idea más global para el diseño y la construcción que puede incorporar todos sus deseos.

Espero que continúe la publicación aquí y darnos una oportunidad de ayudar a usted. Tal vez se considere, también, mirando a través de mi tutorial sobre flotaba diseños. ( html-tutorials/tutorial-multi-column-layout-using-css-float-part-t85704.html )

Pax!

No hay problema; su difícil a veces para encontrar las palabras correctas, no me causa Inglés, que se traducen en mala elección de palabras, que son mal entendidas.

Bueno no tengo todo el diseño de los sitios dispuestos, por lo que enviar un enlace a su "hermana" del sitio, que también tiene los mismos problemas (DOH). Este sitio fue creado en rodajas cuando todo el primer tiempo (y usa position: absolute un LOT).

Sitio Web

En la página de índice, no voy a correr en un montón de problemas con la altura fija, causa nada realmente se expande el contenido...Por lo tanto, no estropear el diseño.

Los verdaderos problemas en este inicio página , Estoy muy limitado con el tamaño de las áreas de texto de contenido y si escribo mucho, la columna no se amplía. Y si en torno a engañar y hacer las columnas más grande estoy frente a un problema con la imagen de fondo y / o el pie de página se mantiene fijo y no se mueve a lo largo.

También voy a revisar su tutorial sobre flotaba diseños. Ya he comprobado que por un minuto o dos, pero se necesita más tiempo para leerlo más detenidamente y que sea comprensible para mí.

/ / actualización #1

Por cierto, estoy tratando de obtener la disposición de trabajo como en su tutorial, voy a mantenerlo actualizado.

/ / actualización #2

Parece que estoy haciendo bien, yo entiendo que se ejecutará en problemas. Pero actualmente su curso bien. Seguiré lunes, habrán desaparecido para el fin de semana.

Hasta el momento gracias por su ayuda hasta el momento! Muy apreciada y su guía de aprendizaje es mejor y más detallada para una comparación con el de htmldog. Si me quedo en los nuevos problemas lunes, voy a publicar en el foro.

Algún consejo o asesoramiento? Por ejemplo, ¿Cómo puedo obtener el fondo de las columnas completamente amarillo y de color marrón?

Bueno después de que el fin de semana, empecé de nuevo con el diseño.

Su va bastante bien hasta el momento, comprobar que aquí .

Sin embargo tengo algunas preguntas y problemas;

Pregunta 1 = RESOLVER!

Pregunta 2
¿Cómo puedo obtener el fondo de trabajo, como en este ejemplo como aquí

Porque con esa "antigua" disposición todo estaba fijo, lo que significa que no se expanda. Con el nuevo diseño, el diseño "puede" ampliar (probablemente no va a pasar, pero nunca se sabe) y cuando eso sucede, la imagen de fondo, probablemente busque desordenados, porque tiene un tamaño fijo.

Pregunta 3 = RESOLVER!
Pregunta 4 = RESOLVER!

Por favor, asesoramiento. Entre tanto voy a continuar mi trabajo.
Gracias hasta ahora!

/ / editar

Eliminado las cuestiones que se resolvieron. El único problema es de fondo.
Actualización enlaces.

Parece que he resuelto todo!
Validado el código HTML y CSS sin errores!

El diseño y ahora se expande. Gran!

Gracias por la ayuda. Si me encuentro con nuevos problemas, voy a estar de vuelta!

Awesome! Lo siento, yo no era más ayuda. Ive sido inundado esta semana.

No hay problema, gracias a ti he logrado rehacer correctamente.
Y, por supuesto, gracias a su awasome tutorial. Comprensible incluso para un noob como yo.

Gracias una vez más.

Tengo una pregunta nueva.
¿Cómo se puede ampliar una línea vertical (o la imagen de la línea) a su contenido?

Echa un vistazo a este ejemplo: aquí

Vea la línea marrón medio? Si el contenido de cada lado se expande, ¿cómo puedo hacer la línea de (auto) ampliar así? ¿Puedo usar un 2-diseño de columnas, o si tengo que utilizar un 3-diseño de columnas para lograr esto y cómo?

Quiero aprovechar aquí, por ejemplo: aquí

Uno de los problemas más me chocó, es el pie de página. Aunque se ve y funciona muy bien en grandes páginas de contenido, no se ve a los grandes a corto páginas de contenido (por ejemplo, la página de contacto). También quiero que el pie de página a la estancia (adheridas en el fondo). ¿Es esto posible cuando se utiliza flotadores?

Esto también sucede para el resto de las páginas cuando se ve en una resolución como 1920x1440. Usted recibe una parte blanca en el pie de página. Si es posible atenerse al pie de página en el fondo, sería fijar un montón de problemas.

Y por último, pero no menos importante, estoy teniendo varios espacios en blanco entre sin ninguna razón. : S

Por favor, asesoramiento.

Recuerdos,
HHawk