Muy buenas estoy intentando mejorar mi web hice un curso de iniciacion al diseño web , pero hay cosas que se me olvidaron , al grano .
Estoy intentando que en la barra de menu cuando se hace clik sobre una opccion y vaya a otra pagina se ponga de otro color el enlace visitado mientras estas alli , esto creo que se hace con a:focus , mientras el a:hover funciona bien , el a:focus que he incorporado a las reglas css no me funciona . la pagina todavia no esta colgada en internet.
El codigo de estilos CSS seria este:
#cuerpo {
width: 1000px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#bloque {
margin: 0px;
padding: 0px;
width: 800px;
float: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
height: 400px;
background-image: url(imag/fondobloque.jpg);
}
ul {
float: none;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
text-align: center;
padding-top: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h6 {
margin-top: 7px;
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #000099;
padding: 0px;
font-weight: normal;
}
#cuerpo #barramenu li {
float: left;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
list-style-type: none;
height: 30px;
width: 110px;
background-image: url(imag/boton-menu-sin-pulsar.jpg);
text-align: center;
white-space: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#cuerpo #barramenu li a {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-decoration: underline;
font-size: 14px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#cuerpo #barramenu li a:hover {
margin: 0px;
padding: 0px;
font-size: 14px;
color: #990000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: "Courier New", Courier, monospace;
}
#cuerpo #barramenu li a:focus {
color: #993300;
}
#publi {
background-color: #33FF66;
padding: 0px;
height: 90px;
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
body {
margin: 0px;
padding: 0px;
background-color: #000000;
}
h1 {
font-size: 1px;
color: #000000;
}
#barraizda {
width: 200px;
padding: 0px;
margin: 0px;
float: left;
height: 400px;
background-image: url(imag/fondobarraizda.jpg);
text-align: center;
}
#cuerpo #bloque #imagenes {
margin: 0px;
padding: 0px;
height: 400px;
width: 240px;
float: left;
}
#cuerpo #bloque #Texto {
margin: 0px;
padding: 0px;
float: left;
height: 400px;
width: 560px;
}
#cuerpo #bloque #imagenes #imagen {
padding: 0px;
height: 100px;
width: 100px;
margin-top: 150px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
#cuerpo #barraizda h5 {
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#cabecera {
margin: 0px;
padding: 0px;
height: 100px;
width: 1000px;
background-image: url(imag/cabecera-quiroshome.jpg);
}
.pesito {
margin: 0px;
padding: 0px;
clear: both;
}
#barramenu {
margin: 0px;
height: 50px;
width: 1000px;
background-image: url(imag/barra-menu.jpg);
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mapa {
padding: 0px;
height: 500px;
width: 600px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #0033FF;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 350px;
}
h4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
width: 500px;
border-bottom-width: thin;
border-bottom-style: groove;
border-bottom-color: #666666;
}
Y el codigo html seria este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quiroshome</title>
<link href="quiroshome.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="imag/favicon.ico" />
</head>
<body>
<div id="cuerpo">
<div id="cabecera">
<h1>quiroshome,masajes a domicilio</h1>
</div>
<div id="barramenu">
<ul>
<li>
<h6><a href="inicio.html">Inicio</a></h6>
</li>
<li>
<h6><a href="domicilio.html">Domicilios</a></h6>
</li>
<li>
<h6><a href="empresa.html">Empresa</a></h6>
</li>
<li>
<h6><a href="regalo.html">Regala masaje</a></h6>
</li>
<li>
<h6><a href="estetica.html">Esteticien</a></h6>
</li>
<li>
<h6><a href="contacto.html">Contacto</a></h6>
</li>
<li>
<h6><a href="mapa.html">Mapa</a></h6>
</li>
</ul>
</div>
<div id="barraizda">
<p>¿Que es el masaje?</p>
<h5>Tipos de masaje:</h5>
<p>Drenaje Linfatico Manual</p>
<p>Quiromasaje</p>
<p>Masaje Deportivo </p>
</div>
<div id="bloque">
<div id="imagenes">
<div id="imagen"></div>
</div>
<div id="Texto"></div>
</div>
<div class="pesito" id="peso"></div>
</div>
<div id="publi"></div>
</body>
</html>
