Los roll-overs no se ven en safari ni en mozilla!
4 seguidores
Tengo un problema estoy con una web que tiene los roll-overs en la hoja de estilos pero en mozilla o safari no se ven...como lo puedo arreglar:
http://www.artipubli.com/
Gracias
Tengo un problema estoy con una web que tiene los roll-overs en la hoja de estilos pero en mozilla o safari no se ven...como lo puedo arreglar:
http://www.artipubli.com/
Gracias
Seguro que tienes mucho que decir, te estamos esperando.
Violeta
Codigo de la hoja para el submenu:
a.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
vertical-align: middle;
}
a.menu:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration:none;
background-color:#00CC00;
display:block;
height:24px;
font-weight: bold;
vertical-align: middle;
}
a.menu:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
vertical-align: middle;
}
a.menu:visited;actived{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
vertical-align: middle;
}
cbp
¿cómo está hecho el roll-over? ¿puedes poner el código?
editado: juer, qué rapidez :P
cbp
tienes un id y una clase con el mismo nombre (menu). mejor elimina la clase menu y pon esto:
<code>
#menu a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
vertical-align: middle;
}
#menu a:hover {
background-color:#00CC00;
}
...
</code>
Violeta
buffse me ha descononao todo!
Es que tengo una hoja de estilos para los textos no lo estoy maquetando todo con CSS
kokito
Violeta, porque no poner mejor la foto del fondo en l ahoja de estilo y asi puedes decirle que no se repita, tengo un monitor grande y se ve repetido, y no queda muy bien, por ejemplo:
<code>
#contenido{
position: absolute;
top: 0px;
width: 1220px;
height: 800px;
padding: 0px;
background: transparent url("../pics/bg.jpg") no-repeat left top;
}
</code>
kkt
cbp
¿y si le cambias el id al "div" que tiene el menú?
Violeta
kokito
Violeta, porque no poner mejor la foto del fondo en l ahoja de estilo y asi puedes decirle que no se repita, tengo un monitor grande y se ve repetido, y no queda muy bien, por ejemplo:
<code>
#contenido{
position: absolute;
top: 0px;
width: 1220px;
height: 800px;
padding: 0px;
background: transparent url("../pics/bg.jpg") no-repeat left top;
}
</code>
kkt
Si eso ya se que pasa, entonces meto en # contenido en la hoja de estilos pero luego en el index donde meto #contenido??
en la etiqueta del body?
kokito
<code>
<body>
<div id="contenido">
<table>o <div id="menu">, segun lo que vayas a utilizar</table>
</div>
</body>
</code>
kkt.
Violeta
http://www.aireretro.com/artipubli/
Mira creo q ya no se repite...me lo puedes echar un vistazo Kokito..
Mil graciasssssss
helviox
Violeta
display:block;
¿Alguien me explica qué realiza esta línea? :oops:
Y por cierto, ¿el orden de los a. no debe ser link, visited, hover & active?
Violeta
helviox
<div class="quote">
Violeta
<blockquote>
display:block;
</blockquote>
</div>
¿Alguien me explica qué realiza esta línea? :oops:
Y por cierto, ¿el orden de los a. no debe ser link, visited, hover & active?
El orden??
kokito
No ya no se repite, queda guay.
Y el orden es:
#menu a:link {
}
#menu a:visited {
}
#menu a:hover {
}
#menu a:active {
}
o tb un atajo:
#menu a:link, #menu a:visited {
}
#menu a:hover, #menu a:active {
}
kkt.
helviox
A eso me refería... :D
Violeta
pero influye el orden en algo?
helviox
Tengo entendido de que en algunos navegadores si no se sigue el orden puede dar errores...
kokito
En una hoja de estilo, el elemento de abajo predomina sobre el de arriba, o cuanto mas bajo mas importante, entonces si pongo primero visited(sin subrayar) y despues hover(subrayado), nunca se me subrayaria al pasar el raton por encima porque visited anularia a hover.
kkt.
Violeta
Ah vale! no tenia ni idea!
Voy a ver si consigo q me salgan los rollovers en todos muchas gracias, mañana os dare un poco mas la vara...es q essto de las css es un poco lioso al principio...
cbp
helviox
<div class="quote">
Violeta
<blockquote>
display:block;
</blockquote>
</div>
¿Alguien me explica qué realiza esta línea? :oops:
Y por cierto, ¿el orden de los a. no debe ser link, visited, hover & active?
el display es una propiedad que tienen todos los elementos de un documento. por defecto algunos tienen "inline", como el "span" por ejemplo, con lo cual los elementos se van situando uno a continuación del otro a no ser que se provoque un salto de línea, y otros lo tienen a "block", por ejemplo el "div", que lleva el salto de línea implícito. también está el "none" en cuyo caso el elemento no se muestra y el espacio que debería ocupar se pone a disposición del resto de elementos de la página. esta propiedad se puede especificar en el css y modificarla cuando se desee.
¿es correcto esto, señores?
Violeta
Bueno pues creo q los rollovers funcionan bien...aunke aun no tengo puesto los comportamientos de los botones...
http://www.aireretro.com/artipubli/
En Mozilla y Explorer se ven, alguien me puede decir si lo ve bien en Safari...solo el rollover ...
helviox
Gracias cbp. :wink:
Violeta
Entonces que etiqueta tengo que usar si quiero q me salgal dos capas a la misma altura? El block, el inline? q lio !!
Es q estoy intentando hacerlo todo con css y la capa del sub menu me sale mas abajo q la otra:
http://www.aireretro.com/artipubli/css/
y esto es la hoja
/***** GENERALES ******/
#contenido{
position: absolute;
top: 0px;
width: 1220px;
height: 800px;
padding: 0px;
background: transparent url("pics/bg.jpg") no-repeat left top;
}
#new{
position:relative;
top: 0px;
width: 162px;
height: 104px;
padding: 0px;
background: transparent url("pics/new.jpg") no-repeat left top;
}
#undercons {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #00B300;
}
#men {
position:absolute;
top: 12px;
left: 575px;
width: 162px;
height: 260px;
padding: 0px;
visibility: visible;
}
#men1 {
position:relative;
top: 24px;
left: 413px;
width: 162px;
height: 144px;
padding: 0px;
display: block;
}
#men2 {
position:relative;
top: 12px;
left: 251px;
width: 162px;
height: 260px;
padding: 0px;
}
#fotoproducto {
position:absolute;
top: 12px;
left: 89px;
width: 162px;
height: 260px;
padding: 0px;
}
/**********MENU*************/
a.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
}
a.menu:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
}
a.menu:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
background-color:#003399;
display:block;
height:24px;
font-weight: bold;
}
a.menu:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration:none;
background-color:#00CC00;
display:block;
height:24px;
font-weight: bold;
}
/***********SUBMENU*********/
a.submenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#FF6600;
display:block;
height:24px;
font-weight: bold;
}
a.submenu:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#FF66OO;
display:block;
height:24px;
font-weight: bold;
}
a.submenu:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#FFCC00;
display:block;
height:24px;
font-weight: bold;
}
a.submenu:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration:none;
background-color:#FFCC00;
display:block;
height:24px;
font-weight: bold;
}
a.submenu:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration:none;
background-color:#FFCC00;
display:block;
height:24px;
font-weight: bold;
}
/************ SUB SUB MENU ***********/
a.subsubmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#99CC00;
display:block;
height:24px;
font-weight: bold;
}
a.subsubmenu:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#99CC00;
display:block;
height:24px;
font-weight: bold;
}
a.subsubmenu:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
background-color:#789F00;
display:block;
height:24px;
font-weight: bold;
}
a.subsubmenu:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration:none;
background-color:#789F00;
display:block;
height:24px;
font-weight: bold;
}
a.subsubmenu:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration:none;
background-color:#789F00;
display:block;
height:24px;
font-weight: bold;
}
/***********PRODUCTO******/
a.producto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
display:block;
height:24px;
font-weight: bold;
}
Violeta
ya ta!
Violeta
bueno he maquetado ya lo que tenia con css, TODO, es mi primera vez que ilusion aunque habre quemado una buena traca...en fins
necesitaba contarselo a alguien jejej!
Solo me falta poner los menus y q funcionen
http://www.aireretro.com/artipubli/