Foros del Web » Creando para Internet » HTML »

HTML Semántico - Tapar subrayado

Estas en el tema de HTML Semántico - Tapar subrayado en el foro de HTML en Foros del Web. Wenas! El otro día, en la sección CSS me hablaron sobre el HTML Semántico y he estado mirando por Internet. Muy interesante la verdad. A ...
  #1 (permalink)  
Antiguo 29/12/2009, 10:56
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
HTML Semántico - Tapar subrayado

Wenas!

El otro día, en la sección CSS me hablaron sobre el HTML Semántico y he estado mirando por Internet. Muy interesante la verdad.

A raíz de eso, me gustaría resolver un problema que tengo.
A continuación, en esta imágen vereis el borde-bottom de color gris del elemento <li> en esta lista:


(La imágen está agrandada para que lo vais bien)

Me gustaría eliminar la puntita que sobresale de la raya vertical negra.
La puntita que quiero eliminar la he puesto en un cuadrado rojo, para que la veais.

La he conseguido "eliminar" poniendo una imágen de width=2px del mismo color del fondo, y la he colocado ahí atraves de "position: absolute" y cosas así.
O también se puede hacer con un simple <div> con los bordes del mismo color del fondo ese, y colocandolo de la misma manera (position: absolute) y eso...

PERO, como antes os comentaba, no creo que sea la manera más practica y/o profesional según el HTML Semántico.

Como lo hariais vosotros? Gracias


P.D: Casi no se nota esa puntita, pero es que soy muy minucioso...
  #2 (permalink)  
Antiguo 29/12/2009, 12:45
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Alguna humilde idea...?







Gracias
  #3 (permalink)  
Antiguo 29/12/2009, 12:53
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: HTML Semántico - Tapar subrayado

Tienes algún margin añadido? si es así mira de quitarlo y poner la url de la web o el código ayudaría.
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 29/12/2009, 13:04
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Uhm..., si tengo un margin de 4px a la izquierda

De esta manera:

Código ASP:
Ver original
  1. .style_lftfirstdiv_menutxt {
  2.     font-family: "HelveticaNeue LT 65 Medium", Arial, "Courier New", "Times New Roman";
  3.     font-size: 14px;
  4.     color: #000000;
  5.     text-decoration: none;
  6.     outline: none;
  7.     display: block;
  8.     margin-left: 4px;
  9.    
  10.     border-bottom-style: solid;
  11.     border-bottom-width: 1px;
  12.     border-bottom-color: #808080;
  13. }

Y el HTML:

Código HTML:
<ul id="contentmenu_lftfirst_ul" class="style_contentmenu_lftfirst_ul">
	<li id="contentmenu_lftfirst_li-head"><p class="stylemenuheadtxt">Menú</p></li>
	
	<li class="style_contentmenu_lftfirst_li-1"><a class="style_lftfirstdiv_menutxt" title="Imágenes en 360º y derivados" target="_blank" href="#">| 360</a></li>
	<li><a class="style_lftfirstdiv_menutxt" title="Enlaces interesantes" target="_blank" href="#">| Enlaces</a></li>
	<li><a class="style_lftfirstdiv_menutxt" title="Tutoriales informáticos" target="_blank" href="#">| Tutoriales</a></li>
	<li><a class="style_lftfirstdiv_menutxt" title="Literatura que frecuento" target="_blank" href="#">| Lectura</a></li>
	<li class="style_contentmenu_lftfirst_li-5"><a class="style_lftfirstdiv_menutxt" title="Todo lo relacionado con el automovilismo" target="_blank" href="#">| Mundo del motor</a></li>
</ul> 
A ver si se entiende, lo siento...

Gracias de nuevo
  #5 (permalink)  
Antiguo 30/12/2009, 02:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: HTML Semántico - Tapar subrayado

mira de cambiarle el margin-left y ponle un valor de 0 a ver si sigue pasando
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 30/12/2009, 04:44
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Si quito el margin de la letra, la propia letra se desplaza a la izquierda, y se coloca junto a la pared. Pero la punta sigue estando.
Observa:



Yo pienso que a lo mejor es por el tipo de letra (font). A lo mejor la letra que utilizo, al escribir la barra vertical ( | ), queda un hueco a la izquierda.


Alguna idea?
  #7 (permalink)  
Antiguo 30/12/2009, 04:54
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: HTML Semántico - Tapar subrayado

En vez de usar una barra, aplica borde izquierdo y te quedara perfectamente alineado con el inferior.
border-left:1px #000 solid;

Tambien necesitaras separar el texto un poco:
padding-left:4px;
__________________
- León, Guanajuato
- GV-Foto
  #8 (permalink)  
Antiguo 30/12/2009, 04:58
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Usted esta utilizando la barra vertical del teclado.
haga lo seguinte utilize no CSS
Código CSS:
Ver original
  1. border-left
dejara como vos quiere
  #9 (permalink)  
Antiguo 30/12/2009, 05:06
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

O sea, ¿lo que me está recomendando es que utilize el border-left en vez de la barra vertical del teclado?

Si ya lo probé, pero claro, el borde izquierdo es demasiado alto comparado con la barra vertical

Yo sólo os he planteado el problema por si había alguna manera de quitar la puntita esa.
Pero de todas maneras gracias
  #10 (permalink)  
Antiguo 30/12/2009, 05:21
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: HTML Semántico - Tapar subrayado



OK, entonces sigue usando la barra, pero usa padding-left:0; y debera solucionarse.
__________________
- León, Guanajuato
- GV-Foto
  #11 (permalink)  
Antiguo 30/12/2009, 05:35
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

De acuerdo, pero... es que, no hay padding-left, sólo hay margin-left.



Aaa... entiendo lo que dices!
Lo he probado pero, no hace nada, sigue igual, el padding es como si estuviera en 0
  #12 (permalink)  
Antiguo 30/12/2009, 07:12
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Entonces utilize height para cambiar lo tamanho dela caja. junto com border-left
  #13 (permalink)  
Antiguo 30/12/2009, 07:30
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Ok
De todas maneras, luego en a:hover, el border-left no realiza los cambios que pongo en a:hover

Bueno, que vamos, que veo que hay tantos problemas que igual dejo la puntita esa en paz ya. No sé, ya veré

Gracias de todos modos
Ahora mismo estoy liado con darle sombra a los div exteriores. Dios que locura!
  #14 (permalink)  
Antiguo 30/12/2009, 08:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: HTML Semántico - Tapar subrayado

Hola:

Lo que no acabo de entender es lo de la semántica, si solo te importa el diseño

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #15 (permalink)  
Antiguo 30/12/2009, 09:44
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Jajaja

Claro que me importa el diseño. El estár interesado en el HTML Semántico no significa que tengas que dejar el diseño a un lado.
El HTML Semántico es una forma de "programar" (hacer) páginas web teniendo en cuenta la utilidad de cada elemento y teniendo en cuenta las propiedades de cada elemento.

Los requesitos/pasos a seguir para la creación de una web con HTML Semántico son muy interesantes. Deberías echarle un vistazo. Es mucho más limpio todo.

No se si te he respondido a tu cuestión.

Si tienes alguna idea sobre el problemilla que tengo, ya sabes ;)

Gracias, nos vemos
  #16 (permalink)  
Antiguo 30/12/2009, 13:09
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

lo diseño d una pagina es tan importante quanto la semantica del codigo. Usted puede trabajar com los dos.

para que vos trabaje com lo pseudo-elemento a:hover vos necessita tener la tag a del HTML.
  #17 (permalink)  
Antiguo 30/12/2009, 13:13
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

quanto a la sombras tiene que utilizar una imagem quanto la especificaciones del CSS3 estuvirem completa. vamos tener algo asi.
  #18 (permalink)  
Antiguo 30/12/2009, 14:14
 
Fecha de Ingreso: enero-2009
Mensajes: 81
Antigüedad: 8 años, 11 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

A!, vale. De acuerdo

Oye, pues muchas gracias flpms.
Espero con ansias al CSS3

Voy a hacer lo que usted menciona.
  #19 (permalink)  
Antiguo 30/12/2009, 15:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: HTML Semántico - Tapar subrayado

Hola:

Lo que quiero decir es que modificar un subrayado no tiene mucho que ver con la semántica, solo se trata de diseño... la parte semántica del tema, a mi entender es que usas listas cuando es lo que corresponde por las circunstancias, podiendo usar otros elementos.
Por momentos todo el mundo maquetaba con tablas, y sin tratarse de datos tabulares, por eso se le dió más importancia a la semántica y al diseño con hojas de estilo... luego llegó a pasar lo contrario, evitar las tablas, incluso con datos de estructura tabular...

Lo que veo en el tema es que tienes un problema de diseño o de estilos, pero no encuentro la relación con la semántica por ningún lado...

¡Je, je!, es solo mi opinión.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #20 (permalink)  
Antiguo 30/12/2009, 18:29
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: HTML Semántico - Tapar subrayado

Caritos usted estas correcto. Pero muchas personas creem que no se puede hacer uno buen diseño utilizando la semantica. Ahora com las especificaciones del HTML 5 y CSS3. E algunos Browser ya dan suporte va dejar mucho mejor la web
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




La zona horaria es GMT -6. Ahora son las 13:09.