image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

Contenido desplazado... porqué??

Volver al foro | Responder | Añadir nuevo tema


De: Rafa
Fecha: 29/08/2006
Mensaje:

Hola!, estoy construyendo una web para una empresa y tengo el siguiente problema: el contenido principal de la web se desplaza demasiado a la derecha y no entiendo el porqué!. He estado revisando el CSS y el PHP(HTML) y no encuentro ningún error. Si podéis echarle un vistazo la dirección en la siguiente (con www delante):

marmolesramia.com/Ramia

y una captura donde se puede ver el error es (con www delante):

marmolesramia.com/Ramia/captura.JPG

Fijaos en la parte inferior derecha.el border-bottom del contenido es demasiado ancho y no tendría porque serlo. (El problema sólo me ocurre con Firefox).

Gracias y hasta pronto!!




Quizás le interese
De: ZeroKilled
Util para: 0 personas

Fecha: 30/08/2006
Mensaje:

el error esta en el CSS, pero no se trata de algun codigo mal escrito sino de como cada navegador implementa el CSS. entonces, ¿cuales son los codigos que estan dando problema? sencillo, la mayor parte de los problemas se deriva de los codigos float y width:100%. no se quien de los dos navegadores (IE y Firefox) esta implementando incorrectamente el CSS, pero como sabras, el width:100% trabaja bien para IE y para Firefox da un resultado no apropiado. de todos modos llevo rato cuestionandome cual es la razon por la que has asignado un ancho de 100% a todas aquellas etiquetas que la has aplicado. si tu intencion es que contenga todo el ancho de la ventana, simplemente no declares el ancho ya que su valor original es auto, lo cual significa que ocupa todo el ancho disponible. lo otro que me cuestione mucho fue porque el constante uso de float:left cuando entiendo yo que tu intencion es mantener una sola columna. nuevamente aqui mi recomendacion es que no utilices float a menos que intentes tener un diseño al estilo de multiples columnas.

la siguiente direccion conduce a tu hoja de estilo pero modificada para que la apliques en tu proyecto de forma tal que puedas ver el resultado. tambien he aplicado otros cambios menores debido a la eliminacion de las propiedades width y float, por lo cual le sugiero que hagas un estudio comparando tu hoja de estilo con la que a continuacion veras.

www.geocities.com/zero_killed2000/temp/estilo.css

queda claro que hay multiples formas de como lograr la diagramacion que buscas, mi intencion es simplemente darte una muestra. por, todavia me revienta la curiosidad de saber porque el constante uso de float con width:100%, puedes explicarlo?



De: Rafa
Util para: 0 personas

Fecha: 30/08/2006
Mensaje:

Antes de nada... muchas gracias por echarle un vistazo al código.

Bueno, la verdad es que tienes razón en lo referente al float: left. Si lo que quiero es una web con sólo un columna sólo he de hacer que las "cajas" ocupen un ancho del 100% y ya está. Pero es que estube pensando en colocar una caja a la derecha del contenido (así, por ejemplo, el contenido sería width: 70% y la otra caja sería width: 30% conteniendo, por ejemplo, algunas imágenes, noticias, o algo por el estilo). De esta forma, teniendo un float: left conseguiría que las cajas se situasen de forma paralela en la web, una al lado de la otra. Supongo que eso ya lo sabrás, de todas formas no creo que se cometa un error al utilizar width: 100% y float: left (aunque repito que tienes razón, es algo redundante porque las "cajas" siempre se situarán una encima de la otra!. Es como definir algo ya definido con el mismo valor"). Es simplemente algo que definí así para ir haciendo pruebas con otra "caja", nada más.

Al igual que ocurre con esto, no sabía que el error pudiese estar donde me has indicado. Podría haber estado probando infinidad de cosas y nunca me habría dado cuenta porque tengo la manía de, aunque no sea necesario, redefinir las propiedades que cumplen los requisitos que quiero por defecto (como por ejemplo poner width: 100% cuando, por defecto, ya tiene ese valor). En el futuro intentaré evitar el uso de esta mala costumbre.

Bueno, muchísimas gracias y hasta pronto!!



De: ZeroKilled
Util para: 0 personas

Fecha: 31/08/2006
Mensaje:

entiendo tu situacion, de paso te voy a mencionar lo que yo haria pero tomando en consideracion adaptarme a tus ideas. si yo realmente quisiera mas adelante añadir un contenido en el lado derecho de mi contenido principal, o sea, tener dos columnas, yo lo que haria es que desde un principio asigno a mi contenido el ancho deseado aunque la segunda columna no este presente:

#mainContent{
float:left;
width:68%;
...
}

#segundaColumna{
float:right;
width:28%;
...
}

no me incomodaria si la pagina principal no contiene la segunda columna (tal como tu pagina) y asignarle el estilo anterior. de este modo me ahorra tener que escribir mas codigo para circunstancias especifica como tu caso donde posiblemente intentes solo poner una segunda columna en algunas paginas.

si planeas en un futuro añadir ese segundo contenido, eso es lo de menos porque esa es la flexibilidad que te ofrece CSS. Ejemplo, si hoy solo tengo el contenido principal, solo hago el estilo para el contenido actual. luego en el futuro, si quieres añadir mas contenido como una segunda columna, el estilo CSS no es necesario que sufra cambios drastico (si es que has aplicado una buena practica), tan solo tienes que añadir los estilos CSS para el nuevo contenido y posiblemente modificar uno que otro.

en resumen, si hoy tu quieres que solo tenga el contenido principal, te puedes quedar con el arreglo CSS que te hice en el post anterior. y si mañana decides añadir la segunda columna, puedes usar el fragmento CSS que antes mostre.


por ultimo, un detalle, mi intencion no era que vieras la redundancia de codigos que tenias, mas bien era que debido a tu practica te creaba un ancho no esperado. y de por cierto, pueden haber casos donde el diseñador requiera asignar un valor que ya esta dado por origen, esto sucede mucho cuando se utiliza javascript para entrar a las CSS. y finalmente, el valor incial de width no es 100% sino auto.



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.