Menu con CSS
Publicado por Martin (4 intervenciones) el 10/11/2014 18:44:45
Hola a todos,
estoy intento hacer diferentes páginas en CSS para ir cogiéndole el truco a esto (solo llevo unos meses) y no se si lo siguiente se puede hacer con CSS.
En la siguiente dirección: http://zweiterweltkrieg.org/css/foro.html
He copiado una web utilizando CSS pero quisiera que los menus de la izquierda, cuando el ratón pasa por encima (a:focus, a:hover) el blanco que aparece por debajo, llegue hasta la línea de la derecha.
Estoy utilizando un padding, pero claro, no todos los enlaces no tienen la misma longitud.
Solo se me ocurre aplicarle a cada enlace una id con un padding-right diferente para que llegue hasta el final, pero estoy seguro que se puede hacer de una forma más sencilla.
¿Alguien me puede ayudar?
estoy intento hacer diferentes páginas en CSS para ir cogiéndole el truco a esto (solo llevo unos meses) y no se si lo siguiente se puede hacer con CSS.
En la siguiente dirección: http://zweiterweltkrieg.org/css/foro.html
He copiado una web utilizando CSS pero quisiera que los menus de la izquierda, cuando el ratón pasa por encima (a:focus, a:hover) el blanco que aparece por debajo, llegue hasta la línea de la derecha.
Estoy utilizando un padding, pero claro, no todos los enlaces no tienen la misma longitud.
Solo se me ocurre aplicarle a cada enlace una id con un padding-right diferente para que llegue hasta el final, pero estoy seguro que se puede hacer de una forma más sencilla.
¿Alguien me puede ayudar?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<body>
<img id="img_1" src="img/phpbb_logo.gif" alt="Logo phpBB" title="Logotipo phpBB">
<div id="contenedor">
<div id="barra_lateral">
<p>Se identificó como:</p>
<ul id="menu_1">
<li><strong>ParadiseLost</strong></li>
<li><a href="#">Desconectarse</a></li>
<li><a href="#">Desconectarse del ACP</a></li>
</ul>
<h2>Acceso rápido</h2>
<ul class="menu_2">
<li><a href="#">Administrar usuarios</a></li>
<li><a href="#">Administrar grupos</a></li>
<li><a href="#">Administrar foros</a></li>
<li><a href="#">Registro de moderadores</a></li>
<li><a href="#">Spiders/Robots</a></li>
<li><a href="#">Información de PHP</a></li>
</ul>
<h2>Configuración del sitio</h2>
<ul class="menu_2">
<li><a href="#">Configuración de adjuntos</a></li>
<li><a href="#">Configuración del sitio</a></li>
<li><a href="#">Características del sitio</a></li>
<li><a href="#">Configuración de avatar</a></li>
<li><a href="#">Configuración de mensajes privados</a></li>
<li><a href="#">Configuración de mensaje</a></li>
<li><a href="#">Configuración de firma</a></li>
<li><a href="#">Configuración de registro de usuarios</a></li>
<li><a href="#">Configuración de confirmación visual</a></li>
</ul>
<h2>Comunicación cliente</h2>
<ul class="menu_2">
<li><a href="#">Autenticación</a></li>
<li><a href="#">Configuración de email</a></li>
<li><a href="#">Configuración de Jabber</a></li>
</ul>
<h2>Configuración del servidor</h2>
<ul class="menu_2">
<li><a href="#">Configuración de cookies</a></li>
<li><a href="#">Configuración del servidor</a></li>
<li><a href="#">Configuración de seguridad</a></li>
<li><a href="#">Configuración de carga</a></li>
<li><a href="#">Configuración dl búsqueda</a></li>
</ul>
</div>
<div id="barra_lateral_der">
<h1>Bienvenido a phpBB</h1>
<p>Gracias por elegir phpBB como su foro. Esta pantalla le proporciona una visión general de las estadísticas del Sitio. Los enlaces a la izquierda le permiten un control completo del mismo. Cada página tiene instrucciones de cómo emplear las distintas herramientas.</p>
<table summary="Estadísticas del foro">
<caption>Estadísticas de foros</caption>
<thead>
<tr>
<th scope="col">Estadística</th>
<th scope="col">Valor</th>
<th scope="col">Estadística</th>
<th scope="col">Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fondo">Número de mensajes</td>
<td>121783</td>
<td class="fondo">Mensajes por días</td>
<td>41.46</td>
</tr>
<tr>
<td class="fondo">Número de temas</td>
<td>8763</td>
<td class="fondo">Temas por día</td>
<td>2.98</td>
</tr>
<tr>
<td class="fondo">Número de usuarios</td>
<td>2370</td>
<td class="fondo">Usuarios por día</td>
<td>0.81</td>
</tr>
<tr>
<td class="fondo">Número de adjuntos</td>
<td>0</td>
<td class="fondo">Adjuntos por día</td>
<td>0.00</td>
</tr>
<tr>
<td class="fondo">Sitio Inaugurado</td>
<td>25 Oct 2006 05:37 pm</td>
<td class="fondo">Tamaño de la carpeta de los avatares:</td>
<td>2.77 MiB</td>
</tr>
<tr>
<td class="fondo">Tamaño de la base de datos</td>
<td>630.95 MiB</td>
<td class="fondo">Tamaño de la carpeta de adjuntos</td>
<td>0 Bytes</td>
</tr>
<tr>
<td class="fondo">Servidor de base de datos:</td>
<td>MySQL 5.5.37-cll</td>
<td class="fondo">Compresión GZip</td>
<td>Off</td>
</tr>
<tr>
<td class="fondo">Versión del sitio</td>
<td>3.0.2</td>
<td class="fondo"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
body{background-color:#d9dad7;
font:normal normal normal 11px/130% verdana;
color:grey;}#contenedor{
float:left;background-color:#e0e4e4;
width:99%;
border-radius:5px;
border:1px solid grey; margin:40px auto;}#img_1{
margin:3px 0 0 10px;}#barra_lateral{
float:left;width:20%;
margin:40px 30px 0 15px;border-right:1px solid grey;
}#barra_lateral_der{
float:left;width:76%;
margin:40px 0 0 0;}#menu_1{
margin:-8px 0 0 0;
padding:0;}#menu_1 li{
display:inline;list-style-type:none;
}#menu_1 li a:link{
color:#2a639c;
text-decoration:none;
}#menu_1 li a:focus, #menu_1 li a:hover{
text-decoration:underline;
color:#b51621;
}#menu_1 li+li:after{
content:" ]"
}#menu_1 li+li:before{
content:"[ ";
}h1{color:#2a639c;
font-family:verdana;
font-size:22px;
font-weight:normal;
}h2{color:#2a639c;
font-weight:bold;
font-family:verdana;
border-bottom:1px solid #2a639c;
text-transform:uppercase;
font-size:10px;
padding-top:8px;
}.menu_2{
margin:0; padding:0;}.menu_2 li{
list-style-type:none;
padding:0 0 7px 10px;}.menu_2 li a:link{
color:#5a93bb;
text-decoration:none;
}.menu_2 li a:focus, .menu_2 li a:hover{
text-decoration:underline;
color:#b51621;
background-color:white;
padding: 5px 10px 5px 10px;margin-left:-10px;
}table{font:normal normal normal 11px/130% verdana;
margin-top:40px;
width:97%;
background-color:white;
border:1px solid grey;}caption{color:#2a639c;
font-family:verdana;
font-size:19px;
text-align:left;
margin-bottom:7px;
}th{text-align:left;
color:white;text-transform:uppercase;
background-color:#5a93bb;
padding:4px;vertical-align:middle;
font-weight:normal;
}td{ padding:4px;color:#2a639c;
}.fondo{
background-color:#D3DEE3;
}Valora esta pregunta
0