[Ovillo] Estructuracion de CSS
Hola, Hasta ahora mis encuentros con CSS se han limitado a páginas individuales (un par de blogs al que cambiar la plantilla, una página personal con mis datos, etc). En breve me voy a enfrentar al reto de poner un poco al día un sitio web completo, y pasar de HTML y tablas a CSS. El sitio en cuestión se divide en varios sub-sitios independientes, pero con estilos similares. Es decir, que las diferencias principales serán en cuanto a colores de fondo y colores de algunos elementos. Y cada sub-sitio es como un sitio web completo, con sus secciones. Habrá secciones de estructura similar, y otras en las que cambie. La cuestión es: ¿cómo creeis que es la mejor manera de organizar las CSS? Un archivo CSS en el raíz lo veo casi imposible porque a la larga tendría muchás cosas casi duplicadas, y un archivo para documento HTMl es completamente ineficiente. Perdón si la pregunta es de novata total, pero es que realmente soy una novata total. No ando buscando tanto una 'respuesta google' única como oir la opinión de varias personas y poder tratar del tema. Muchas gracias, y un saludo. -- Nidia Fernández Martínez Alhana, Alhanita, Nahriah... http://alhanita.blogspot.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
[Ovillo] IE no dibuja bien las capas
Hola,
Estoy trabajando en la siguiente web:
http://www.efeyl.org/pruebas/EFEYLBATALLITAS/index.php
En Firefox se ve perfectamente, tal y como debería verse según el código
escrito. La estructura del sitio es más o menos así:
Sin embargo en IE ignora la capa "menuycuerpo" por completo. Se nota porque
el menú no tiene separación con el banner, y el cuerpo está a otra altura
distinta. Además, no sé por qué misteriosas razones, no se dibujan los
bordes superiores del contenido bien. Copio y pego aquí la hoja de estilos,
por si a alguien le interesa:
* html,body {
height:100%;
margin:0px;
padding:0px;
}
body {
background-color:#44;
background-image:url(imagenes/fondo.gif);
color:#f1e9c9;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
}
#todo {
height:100%;
min-height:100%;
position:relative;
margin: 0px auto;
}
#banner {
width:100%;
background-color:#4C0909;
text-align:center;
}
#borde_cuadros{
background-image: url(imagenes/fondo_cuadros.gif);
background-repeat:repeat;
height:16px;
}
#pie {
bottom:0;
position:absolute;
height:100px;
width:100%;
}
#pie_inferior {
background-color:#4C0909;
padding: 5px 0px 5px 0px;
bottom:0;
}
#menuycuerpo{
padding-bottom:120px;
}
#cuerpo{ /*Lo que suele ser en otros diseños 'principal*/
margin-left:160px;
}
.contenedor { /*La caja que contiene texto y demases */
background-color:#004400;
border: 3px double #d0af34;
margin: 20px;
}
.texto { /*El interior de la caja contenedor*/
padding: 10px 15px 10px 15px;
}
.subtit {
color: #99FF66;
}
.importante {
font-weight:600;
}
#pie h2 {
color: #d0af34;
font-family : Georgia, "Times New Roman", Times, serif;
}
#pie_inferior .elemento {
margin:20px 90px 20px 90px;
font-size:75%;
}
A:link{
color:#D0AF34;
text-decoration: none;
}
A:active{
color:#D0AF34;
text-decoration: none;
}
A:visited{
color:#D0AF34;
text-decoration: none;
}
A:hover{
color:#8A8AFF;
text-decoration: none;
}
.contenedor h2 {
color:#d0af34;
background-color:#4c0909;
border-bottom:3px double #d0af34;
margin: 0px;
padding: 5px 15px 5px 15px;
text-transform:uppercase;
font-family:felix titling, georgia, "times new roman", times, serif;
text-align:center;
}
.contenedor h4 {
color:#d0af34;
font-family:felix titling, georgia, "times new roman", times, serif;
}
.proximo {
margin:40px 60px 40px 60px;
font-style:italic;
}
p {
margin:12px 0px 12px 0px;
}
li {
margin:12px 0px 12px 0px;
}
.gallerytitle {
color:#d0af34;
font-family:felix titling, georgia, "times new roman", times, serif;
font-size:120%;
}
/* ESTILO DEL MENU */
.menu {background-image:url(imagenes/menu/fondo.gif);}
.menu img {border:0px; margin-bottom:-4px; padding:0px;}
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#fff;
background-image:url(imagenes/menu/fondo.gif); background-color:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:147px;
width:150px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;
width:150px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute;
left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px;
background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e;
color:#fff;}
--
Nidia Fernández Martínez
Alhana, Alhanita, Nahriah...
http://alhanita.blogspot.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] IE no dibuja bien las capas
2006/11/6, Maikel Naigt <[EMAIL PROTECTED]>:
>
> Hola Nidia. Veamos tus problemas tras tu solicitud de ayuda.
>
> On 11/3/06, Nidia Fernandez Martinez <[EMAIL PROTECTED]> wrote:
> >
> > Hola,
> >
> > Estoy trabajando en la siguiente web:
> > http://www.efeyl.org/pruebas/EFEYLBATALLITAS/index.php
> >
> > En Firefox se ve perfectamente, tal y como debería verse según el código
> > escrito. La estructura del sitio es más o menos así:
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> >
> > Sin embargo en IE ignora la capa "menuycuerpo" por completo. Se nota
> > porque
> > el menú no tiene separación con el banner, y el cuerpo está a otra
> altura
> > distinta. Además, no sé por qué misteriosas razones, no se dibujan los
> > bordes superiores del contenido bien. Copio y pego aquí la hoja de
> > estilos,
> > por si a alguien le interesa:
>
>
> El problema que te surge de que el menú te aparezca pegado a la cenefa de
> cuadros superior se debe a que no le indicas ningún margen. Te pego la
> parte
> de la hoja de estilos más o menos por el final de la misma.
>
> /* common styling */
> ...
> .menu ul {padding:0; margin:0;list-style-type: none; }
> .menu ul li {float:left; position:relative; padding:0; margin:0;}
> ...
>
> Evidentemente, estos 'margin:0' nos sobreescriben cualesquiera que hubiera
> con anterioridad, haciendo que el bloque del menú este junto a la cenefa.
>
> En cuanto al segundo problema es un poco más complicado de comprender, y
> está relacionado directamente con una propiedad 'Made in M$' denominada
> 'hasLayout' [1] y que le indica al motor de IE cuándo un bloque es etéreo
> como las nubes del anuncio de las compresas (valor false) y cuándo deberá
> ser sólido y fuerte como la espada del Cid (valor true). Seguramente ya
> hayas adivinado que tu bloque "fantasma" ha sido elegido como 'hasLayout'
> en
> 'false'. Necesitaremos pues revertir esta situación, aunque existe un
> problemilla, y es que la propiedad 'hasLayout' no es 'escribible' si no
> que
> se sitúa en uno u otro estado dependiendo de las propiedades de estilo que
> tenga asignado el bloque. Afortunadamente, M$ nos da una lista de estas
> propiedades [2] para que elijamos la que más nos guste. Simplemente
> deberás
> poner una de estas propiedades en, por ejemplo, el bloque '#contenedor'
> (prueba con 'display: inline-block' para ver el resultado) y problema
> resuelto.
>
> [1] http://www.satzansatz.de/cssd/onhavinglayout.html
> [2]
>
> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
>
> Un saludo,
> David Merino Ogando
Muchas gracias por la ayuda. El problema principal es que como relacionaba
el fallo con ningún elemento de la página, no sabía por donde empezar a
investigar. En cuanto tenga un rato lo pruebo y cuento el resultado.
Un saludo :)
--
Nidia Fernández Martínez
Alhana, Alhanita, Nahriah...
http://alhanita.blogspot.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Pegar DIV al bottom de la ventana
Hola, Yo utilicé la solución expuesta en http://bidwell.textdrive.com/pipermail/ovillo/2006-July/010551.html y me funcionó bastante bien. -- Nidia Fernández Martínez Alhana, Alhanita, Nahriah... http://alhanita.blogspot.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Pegar DIV al bottom de la ventana
Yo también tuve ese problema! Espera, que voy a ver como lo solucioné... El día 7/11/06, webmaster <[EMAIL PROTECTED]> escribió: > > Ok, esto funciona bien, pero tiene un problemita, > Has una página Web, donde el contenido sea mayor (en el alto) al tamaño de > un pantallaza en el navegador, entonces, lamentablemente por alguna razón, > position:absolute; no funciona bien, y te deja el footer, a la mitad de la > pantalla, o donde terminaba la pantalla original. > > Pruebalo, pero si no tienes páginas con tanto contenido, en hora buena > solucionaste tu problema :) Yo también tuve el mismo problema, lo que no recuerdo es qué hice exactamente para solucionarlo... juraría que fue algo tan absurdo como sustituir la declaración inicial por esta: http://www.w3.org/TR/html4/loose.dtd";> porque tengo el recuerdo de haber hecho un cambio global en dreamweaver, pero no estoy segura 100%. Por si acaso, te paso la dirección de la hoja de estilos que yo usé: http://www.efeyl.org/pruebas/nidia/batallas/estilo.css Un saludo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Pegar DIV al bottom de la ventana
El día 7/11/06, Reynier Perez Mira <[EMAIL PROTECTED]> escribió: > Hola Nidia: > Yo tengo una estrctura en mi HTML como la que sigue: > > http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > http://www.w3.org/1999/xhtml"; xml:lang="sp" lang="sp"> > >Portal de Simuladores y Realidad Virtual >http://simpro.uci.cu/themes/simpro/css/style.css"; /> > > > > >Texto > >Aqui el contenido del Portafolio > >Aqui promociones > > >Contenido de la columna derecha > > >Contenido del pie de pagina > > > > > > Entonces si hago cambios en el #footer poniendole position: absolute y en > el #wrapper poniendole position: relative todo se me deforma. ¿Qué solucion > le darias a esto? Nu se, yo cree un contenedor que me englobara el menú y el contenido, que serían aproximadamente el equivalente a tus "right column" y "left column"... pero me temo que en estos temas aún estoy muy verde :S Nidia ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
