Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de ¿Cómo hace esto en mi HTML? (Revisión código) en el foro de HTML en Foros del Web. 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): ...
  #1 (permalink)  
Antiguo 12/07/2011, 16:54
jesusgox
Invitado
 
Mensajes: n/a
Puntos:
¿Cómo hace esto en mi HTML? (Revisión código)

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!!!!
  #2 (permalink)  
Antiguo 12/07/2011, 17:22
 
Fecha de Ingreso: noviembre-2010
Ubicación: valencia
Mensajes: 58
Antigüedad: 6 años, 11 meses
Puntos: 6
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

Para eliminar el subrayado de los enlaces puedes añadir esto a tu hoja de estilos:
Código HTML:
Ver original
  1. #opciones a {
  2. text-decoration:none;
  3. }
Y para modificar la lista esto otro:
Código HTML:
Ver original
  1. #opciones li {
  2. width: 100px;
  3. display:block;
  4. border: 1px solid #000000;
  5. text-align:right;
  6. }
Así te quedaria algo mas parecido a esto:


Uploaded with ImageShack.us
__________________
4Seo
  #3 (permalink)  
Antiguo 27/07/2011, 15:04
jesusgox
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

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!!
  #4 (permalink)  
Antiguo 28/07/2011, 02:56
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años
Puntos: 63
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

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)  
Antiguo 29/07/2011, 16:31
jesusgox
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

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!!

Última edición por jesusgox; 30/07/2011 a las 06:40
  #6 (permalink)  
Antiguo 03/08/2011, 06:03
jesusgox
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

¿Alguien me puede echar una mano?
  #7 (permalink)  
Antiguo 03/08/2011, 06:10
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años
Puntos: 63
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

Prueba a cambiar el display: inline-table, por block en los enlaces
  #8 (permalink)  
Antiguo 03/08/2011, 06:45
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años
Puntos: 63
Respuesta: ¿Cómo hace esto en mi HTML? (Revisión código)

Bueno para que te hagas una idea, seria:

CSS
Código CSS:
Ver original
  1. #opciones a {
  2.     text-decoration:none;
  3.     display: block;
  4.     color: #FFFFFF;
  5.     }
  6.  
  7. #opciones div{
  8.     background-color: #f01c00;
  9.     background-repeat: no-repeat;
  10.     margin: 0px;
  11.     font-size: 12px;
  12.     font-weight: bold;
  13.     font-family: sans-serif;
  14.     width: 90px;
  15.     display: inline-table;
  16.     border: 4px solid #CF160F;
  17.     border-bottom-right-radius:1em;
  18.     padding-top: 5px;
  19.     padding-bottom: 5px;
  20.     padding-right: 5px;
  21.     padding-left: 5px;
  22.     text-align: center;
  23. }



HTML
Código CSS:
Ver original
  1. <div id="opciones">
  2. <h3>Zona pública</h3>
  3.     <div> <a target="C22" href="presentacion.html">Presentación</div>
  4.     <div> <a target="C22" href="miembros.html">Miembros</div>
  5.     <div> <a target="C22" href="trabajos.html">Trabajos</div>
  6.     <div> <a target="C22" href="lineas.html">lineas</div>
  7. </div>

Etiquetas: php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:37.