Un Tabulatore, quasi una indentazione

**Rickycast** · 11-06-2012, 11:39

Su consiglio di Mich_, Moderatore del Forum CSS, posto anche qui il mio problema.
La discussione sul Forum CSS la potete trovare con lo stesso titolo: "Un tabulatore, quasi una indentazione".
Magari sul Sito indicato alcune cose possono essere cambiate, ma il Codice di seguito è esplicativo: come potrete osservare, al passaggio del Mouse sul testo, questo si abbassa (in parte) per tornare al suo posto quando il mouse non è piu "hover".
Spero che qualcuno mi possa indicare una soluzione.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<meta name="description" content=""/>

<meta name="keywords" content=""/>

<style type="text/css">

div.navVert {width:500px; background-color:transparent; float:left; display:block; margin: 0; position: absolute; top: 10px; left: 40px}
div.navVert ul{list-style-type: none; margin: 0px; margin: 0; padding: 0; border:0; text-align:left; display:block}
div.navVert li{margin: 0; padding:0; border: 0; display:block}
div.navVert a{padding:0 0 1px 0;
	margin:-1px 0 0 0;
	background-color:transparent; 
	color: #000000;
	text-align:left;
	font-weight: normal;
	font-variant: normal;
	font-size:16px;
	line-height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	border: 0;
	display:block}	
div.navVert a:hover{color:#000000; font-weight:normal; line-height: 18px; border: solid 1px #333333; background-color:#transparent; position: relative; left: -1px; width: 500px}

.tab{position:absolute; left:50px; line-height: 18px; cursor: pointer; margin: 0}

.ripeti{position: relative; height: 19px; background-color:#FFFFFF; border-bottom: 1px solid #000000}

</style>

</head>
   
<body style=" background-color:#FFFFFF position: absolute; top: 0; width: 100%">
	<div class="ripeti"></div>
	<div class="ripeti"></div>
    <div class="ripeti"></div>
    <div class="ripeti"></div>
    <div class="ripeti"></div>

	<div class="navVert">
		<ul>
			[*]<span>10</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>20</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>[*]<span>30</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>100</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
			[*]<span>200</span><span class="tab">Riga che si abbassa al passaggio del mouse</span>
		[/list]
	</div>
    
</div>

</body>
</html>

Grazie in anticipo.

La discussione cui fa riferimento e` questa (nota del moderatore)

**Myaku** · 11-06-2012, 13:56

mh no, non mi è chiaro.
innanzitutto, qui parliamo di grafica, non di codice. perciò, per cortesia, o ci dai il link alla pagina online oppure ci posti un'immagine.
inoltre, rispiega che attinenza ha il tuo problema con la grafica, o posta l'estratto dell'intervento di Mich_, che così abbiamo tutte le indicazioni senza dover andare a cercare su altre sezioni

**Rickycast** · 11-06-2012, 15:53

In effetti anch'io penso sia più un problema di software che di grafica, ma ho postato quanto sopra perchè ho profondo rispetto per Mich_.
Comunque, a questo Link troverai l'esplicitazione grafica del mio problema:

http://www.maxolen.it/test.htm

Se passerai il mouse sopra al testo, vedrai che la parte destra delle righe si sposta di 1px verso il basso e torna al suo posto quando il mouse non è più sopra.

Nel mio primo Post c'è il Codice HTML del Link, nel caso volessi darci un'occhiata.

Grazie comunque per l'aiuto.

**Rickycast** · 11-06-2012, 15:55

Chiedo scusa, mi sono accorto che il link non funziona, ma l'indirizzo è esatto.
Per cortesia, fate un copia-incolla, grazie.

**brummell** · 11-06-2012, 16:55

A parte le dovute precisazione di Myaku, la domanda quale sarebbe? Cosa vorresti risolvere?
Ciao.

**Myaku** · 11-06-2012, 17:23

sistemato il link, ora funziona

**Myaku** · 11-06-2012, 17:26

guarda che forse potrebbe essere un conflitto tra le due line-height, quella di a e quella di .tab (ho provato con firebug a disabilitarne una e il problema non si ripresenta)
fammi sapere se l'inghippo è lì che se così fosse ti devo ripassare in css e vediamo se chiudere l'altra o unire le due discussioni ...

**ALFABreezE** · 11-06-2012, 17:39

Prova così:

codice:

div.navVert a{
	padding:2px 0 2px;
	margin:-1px 0 0 0;
	font:16px/16px Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	text-align:left;
	text-decoration:none;
	display:block;
	}	

div.navVert a:hover{
	border:1px solid #333333;
	padding:1px 0;
	margin-left:-1px;
	position:relative;
	width:500px;
	}

.tab{
        position:absolute;
	left:50px;
	cursor:pointer;
	margin:0;
	}

cià
ale

**Rickycast** · 11-06-2012, 19:12

Grazie a Myaku e ad ALFABreezE.

Evidentemente il comando "line-height" in questo caso genera qualche problema.
Però rimane il fatto che graficamente potrebbe anche essere necessario spaziare le righe in verticale più di quanto non avvenga senza questo comando: ecco la componente grafica del mio piccolo problema.

La soluzione indicata da ALFABreezE è davvero eccellente e risolutiva: basta ricordarsi di imputare sempre 1px in meno per il "padding" in "a:hover" rispetto ai "padding-top" e "padding-bottom" in "a", e di eliminare tutte le "line-height", come di seguito:

codice:

div.navVert a:hover{
	border: solid 1px #333333;
	padding: 3px 0;
	margin-left: -1px;	
	position: relative;
	width: 500px;
	color:#000000}	

div.navVert a{padding:4px 0 4px 0;
	margin:-1px 0 0 0;
	background-color:transparent; 
	color: #000000;
	text-align:left;
	font-weight: normal;
	font-variant: normal;
	font-size:16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	border: 0;
	display:block}	

.tab{position:absolute; left:50px; /*line-height: 18px;*/ cursor: pointer; margin: 0}

Ancora grazie.

**Myaku** · 11-06-2012, 19:15

ok, ti rimando in css e avviso Mich_

Discussione: Un Tabulatore, quasi una indentazione

Strumenti discussione

Ricerca discussione

Visualizza

Un Tabulatore, quasi una indentazione

Permessi di invio