¿Cómo hace esto en mi HTML? (Revisión código)

#1 (**permalink**) 12/07/2011, 16:54

Buenas!

Existen dos partes, una html y otra el css para ese html, todo irá en un marco que quedaría así (como tendría que ser):

Y yo he llegado para que me quede así:

Mi código html de ese marco sería así:

Código:

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="../estilos/opciones.css">

<title>C21</title>
</head>
<body id="opciones"> 
<h3>Zona pública</h3>

<ul>

<li> <a target="C22" href="presentacion.html">Presentación</a>
<li> <a target="C22" href="miembros.html">Miembros</a>
<li> <a target="C22" href="trabajos.html">Trabajos</a>
<li> <a target="C22" href="lineas.html">lineas</a>

</ul>
</body>
</html>

Y el código css que he hecho yo es así:

Código:

#opciones {
	border-style: none;
	font-weight: bold;
	background-color: #e8ab00;
	text-align: left;
	list-style-type: none;
	font-size: 12px;
	font-family: sans-serif;
}

¿Cómo podría perfeccionar el html y el css para eliminar la lista esa que tengo y ponerla lo más parecido a la primera imagen de este mensaje?

Gracias!!!!

xalfox · #2 (**permalink**) 12/07/2011, 17:22

Para eliminar el subrayado de los enlaces puedes añadir esto a tu hoja de estilos:

Código HTML:

Ver original#opciones a {
text-decoration:none;
}

Y para modificar la lista esto otro:

Código HTML:

Ver original#opciones li {
width: 100px;
display:block;
border: 1px solid #000000;
text-align:right;
}

Así te quedaria algo mas parecido a esto:

Uploaded with ImageShack.us

#3 (**permalink**) 27/07/2011, 15:04

xalfox Muchísimas gracias!!

Y ahora una cosilla que no comprendo bien. En el mismo marco me dice:
-Los enlaces que forman cada elemento, carecerán de decoración y tendrá un espacio interno con el borde a elegir y cambiará el color según el estado en el que se encuentre (visitados, sobre él...)
-Por último, ¿Cómo puedo modificar los bordes de las listas?

Muchísimas gracias!!

Batan · #4 (**permalink**) 28/07/2011, 02:56

Para los enlaces http://www.librosweb.es/referencia/c...der-style.html

Para el border http://www.librosweb.es/referencia/c...der-style.html

#5 (**permalink**) 29/07/2011, 16:31

Batan Muchísimas gracias por responder, más o menos me he ayudado con eso y otros tutoriales que he ido encontrando.
El problema que me he quedado atascado en una cosita. ¿Cómo se puede modificar el fondo de detrás de las letras?

Esque me ha quedado así:

Y me gustaría que por detrás de las letras ,tuvieran también su relleno...

Este es el código de la lista:

Código:

#opciones li {
	background-color: #f01c00;
	background-repeat: no-repeat;
	margin: 0px;
	font-size: 12px;
	font-weight: bold;
	font-family: sans-serif;
	width: 90px;
	display: inline-table;
	border: 4px solid #CF160F;
	border-bottom-right-radius:1em;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: center;
}

GRACIAS!!

#6 (**permalink**) 03/08/2011, 06:03

¿Alguien me puede echar una mano?

Batan · #7 (**permalink**) 03/08/2011, 06:10

Prueba a cambiar el display: inline-table, por block en los enlaces

Batan · #8 (**permalink**) 03/08/2011, 06:45

Bueno para que te hagas una idea, seria:

CSS

Código CSS:

Ver original#opciones a {
    text-decoration:none;
    display: block;
    color: #FFFFFF;
    }
 
#opciones div{
    background-color: #f01c00;
    background-repeat: no-repeat;
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
    width: 90px;
    display: inline-table;
    border: 4px solid #CF160F;
    border-bottom-right-radius:1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
}

HTML

Código CSS:

Ver original<div id="opciones"> 
<h3>Zona pública</h3>
    <div> <a target="C22" href="presentacion.html">Presentación</div>
    <div> <a target="C22" href="miembros.html">Miembros</div>
    <div> <a target="C22" href="trabajos.html">Trabajos</div>
    <div> <a target="C22" href="lineas.html">lineas</div>
</div>