HTML Semántico - Tapar subrayado

[JonYeste]

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

[JonYeste]

Alguna humilde idea...?







Gracias

[hades87]

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.

[JonYeste]

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

De esta manera:

Código ASP:

.style_lftfirstdiv_menutxt {
    font-family: "HelveticaNeue LT 65 Medium", Arial, "Courier New", "Times New Roman";
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    outline: none;
    display: block;
    margin-left: 4px;
    
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #808080;
}
 

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

[hades87]

mira de cambiarle el margin-left y ponle un valor de 0 a ver si sigue pasando

[JonYeste]

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?

[Triby]

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;

[flpms]

Usted esta utilizando la barra vertical del teclado.
haga lo seguinte utilize no CSS

Código CSS:

border-left
 

dejara como vos quiere

[JonYeste]

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

[Triby]

OK, entonces sigue usando la barra, pero usa padding-left:0; y debera solucionarse.

[JonYeste]

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

[flpms]

Entonces utilize height para cambiar lo tamanho dela caja. junto com border-left

[JonYeste]

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!

[caricatos]

Hola:

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

Saludos

[JonYeste]

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

[flpms]

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.

[flpms]

quanto a la sombras tiene que utilizar una imagem quanto la especificaciones del CSS3 estuvirem completa. vamos tener algo asi.

[JonYeste]

A!, vale. De acuerdo

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

Voy a hacer lo que usted menciona.

[caricatos]

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

[flpms]

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