Global
Argentina
Chile
Colombia
España
México
Perú
Uruguay
Venezuela
Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Photoshop, Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky
Ver más- 13,065 Miembros
- 9,531 Temas
- 3,449 Seguidores
Problema con efecto CSS
les dejo el codigo html y el css
Ok disculpas por no haber aclaradoo el punto
Tengo una lista donde cree dos enlaces el error o el efecto que sale mal es en el css puesto que al situar el mouse por encima de uno de los links en este caso Español el link de english se corre un poco a la derecha y no se si esto se pueda solucionar
si debo aclarar algo mas haganmelo saber
de antemano muchas gracias
<div id="links">
<ul>
<li><a href="">Español</a></li>
<li><a href=""> English </a></li>
</ul>
</div>
CSS
#links {
clear: both;
float: none;
width: 300px;
height: auto;
position: relative;
top: 400px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
right: 0px;
left: 9px;
}
li {
font-family: Arial, Helvetica, sans-serif;
color: #9f1c22;
font-size: 18px;
list-style-type: none;
float: left;
padding-right: 20px;
text-align: center;
text-indent: 0px;
width: auto;
}
li a {
font-family: Arial, Helvetica, sans-serif;
color: #9f1c22;
font-size: 18px;
list-style-type: none;
float: left;
padding-right: 30px;
text-align: center;
text-decoration: none;
}
li a:hover {
font-family: Arial, Helvetica, sans-serif;
color: 9e1b21;
font-size: 18px;
list-style-type: none;
float: left;
padding-right: 30px;
text-align: center;
font-weight: bold;
height: auto;
width: auto;
right: 20px;
}
ok mi problema fue este
ahora va la solucion que obtuve
en el body puse un div en el cual iban a ir los links
<div id="container">
<div id="idioma">
<span id="es"><a href="http://www.nextcontact.com.mx/">Español</a></span>
<span id="en"><a href="http://www.next-contact.com/">English</a></span>
</div>
y el CSS
asi:
#container{
background:url(../images/background.jpg) no-repeat;
height:744px;
width:1200px;
margin-left:auto;
margin-right:auto;
}
a:link{
color:#9E1D22;
text-align:center;
text-decoration:none;
}
a:hover{
font-weight: bold;
text-align:center;
text-decoration:none;
}
a:visited{
color:#9E1D22;
text-align:center;
text-decoration:none;
}
#idioma{
position:relative;
font-size: 18px;
}
#es{
position:absolute;
top:407px;
left:481px;
}
creo que esta solución fue mas viable si conocen otra, talves siga utilizando css de mas pero com voy empezando pues se me hizo un poco mas correcta que la anterior
- 1Calificación
- 1Seguidores
- 184Visitas
- 0Favoritos
16 respuestas
te sale un error css ? podrías explicarte un poco mejor? porque no se entiende ni que querés hacer, ni que te lo impide.
ya esta lo eh editado mil disculpas si no lo especifique antes cualquier otra duda empiezo a sacar capturas
idem, css no tira errores como php :B sólo no te muestra el div o lo muestra mal.
no probablemente el error es mio
bueno pero con lo que nos das no sabemos que es lo que tenes mal porque no nos dijiste que queres hacer, o como querés que se vea...
ah ok se supone que debe estar un link y cuando pasas por encima la letra se hace bold el efecto esta bien pero hay un ligero movimiento con en otro elemnto li que es este caso es english que se mueve unos pixeles a la derecha y yo quiero que mientras pases el cursor por encima no se mueva el segundo elemento li
Se debe estar moviendo porque al hacer bold la tipografía se hace más ancha, si no entiendo mal.
exacto mejor ni yo lo huebiera explicado
ahora esto se puede corregir o tengo que hacer otra cosa
Mmm probá ponerle un ancho fijo en px a los li
ok lo intentare y cuento como va
Igual, si no miro mal, tenes mil y una propiedad al pedo ahi en ese css
#links {
clear: both; /*Este depende de como este lo que rodea a este div, pero como el float es nonte dudo para que.*/
float: none; /*Tenes que pisar otros estilos? para que pondrias float:none?*/
width: 300px;
height: auto;
position: relative;
top: 400px;
margin-top: 0px; /*Todos los margin los podes simplificar con margin: 0 auto;*/
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
right: 0px; /*Si pones right no funciona left, si pones left no funciona right, entonces cual no funciona aca?*/
left: 9px; /*Si pones right no funciona left, si pones left no funciona right, entonces cual no funciona aca?*/
}
li {
font-family: Arial, Helvetica, sans-serif; /*Este no lo declaras de forma global?*/
color: #9f1c22;
font-size: 18px;
list-style-type: none; /*Este no lo declaras de forma global?*/
float: left;
padding-right: 20px;
text-align: center;
text-indent: 0px;
width: auto;
}
li a {
font-family: Arial, Helvetica, sans-serif; /*Este no lo declaras de forma global?*/
color: #9f1c22;
font-size: 18px;
list-style-type: none; /*No es una lista, este no hace falta esta de mas*/
float: left;
padding-right: 30px; /*A veces para los link, el padding no esta tan bueno. Depende que quieras hacer es mejor margin.*/
text-align: center; /*Este o el del li estan de mas*/
text-decoration: none; /*Este no lo declaras de forma global?*/
}
li a:hover {
font-family: Arial, Helvetica, sans-serif; /*si ya lo tenes en el a, el hover ya lo toma*/
color: 9e1b21; /*si ya lo tenes en el a, el hover ya lo toma*/
font-size: 18px; /*si ya lo tenes en el a, el hover ya lo toma*/
list-style-type: none; /*si ya lo tenes en el a, el hover ya lo toma*/
float: left; /*si ya lo tenes en el a, el hover ya lo toma*/
padding-right: 30px; /*si ya lo tenes en el a, el hover ya lo toma*/
text-align: center; /*si ya lo tenes en el a, el hover ya lo toma*/
font-weight: bold;
height: auto; /*y esto porque?*/
width: auto; /*y esto porque?*/
right: 20px;
}
No te lo tomes a mal, pero CSS tambien tiene su teoria. Las cosas no son proque si. Tenes mucho css de mas.
o dios que catedra mas importante lo tomare mucho en cuenta ahora que vuelva a editar ese CSS
es muy buena tu observacioin creo que la mejor que eh tenido, tambien yo no no me supe explicar muy bien, muchas gracias a todos ire al codigo lo edito cuento y modifico el tema para que pueda ser leido por los demas