[css] Bordi celle adiacenti

**daviweb** · 04-03-2004, 19:48

Vorrei ottenere un certo effetto su una tabella.
Faccio prima ad allegarvi l'immagine, che a spiegarvelo...

Il difetto è che il margine sinistro deve essere scuro. Cioè, la cella selezionata deve avere i margini top, right e left scuri!

Chiaramente se seleziono celle centrali deve funzionare lo stesso...

Ho provato e riprovato ma non trovo la soluzione:

codice:

table {
	border-collapse: collapse;
	margin:auto;
	padding:0px;
}
td {
	border-collapse:collapse;
	margin:0px;
	padding:0px;
}
#ord_gruppi {
	margin:auto;
	width:95%;
	border-left:1px solid #CCCCCC;
}
.ord_gruppi_td {
	width:80px;
	background:#FFFFFF;
	border-top:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #777777;
	text-align:center;
}
.ord_gruppi_td_act {
	width:192px;
	background:#F8F8F8;
	border-right:1px solid #777777;
	border-top:1px solid #777777;
	text-align:center;
	font-family:verdana,arial;
	font-size:13px;
	font-weight:bold;
	color:#FF0000;
}



<div id="ord_gruppi">
	<table>
		<tr>
			<td class="ord_gruppi_td_act"></td>

			<td class="ord_gruppi_td"></td>
			<td class="ord_gruppi_td"></td>
			<td class="ord_gruppi_td"></td>
			<td class="ord_gruppi_td"></td>
			<td class="ord_gruppi_td"></td>
			<td class="ord_gruppi_td"></td>

			<td class="ord_gruppi_td"></td>
		</tr>
	</table>
</div>

Grazie
Ciao

**daviweb** · 05-03-2004, 11:57

up

**herrel** · 05-03-2004, 12:09

ho visto il tuo post ma non ho capito bene il problema quale è??

**daviweb** · 05-03-2004, 12:39

Immaginavo... non mi sono spiegato molto bene!

Ho una specie di menu "a schede". In ogni cella (vedi immagine) ci sarà un link.
Quando sono in una certa sezione, lo sfondo e il bordo della cella che contiene il link (alla sezione in uso) dovranno cambiare. Il bordo sarà più scuro, e lo sfondo non bianco.

Il problema è che non riesco a gestire il tutto in modo corretto.

Se coloro anche il bordo sinistro della cella attiva, non viene considerato, perchè la cella alla sua sinistra ha il bordo destro chiaro che ha priorità!

In più ci si mettono anche differenze nella gestione dei bordi tra IE e Firefox...

Spero di averti fatto capire la situazione!

Grazie

**herrel** · 05-03-2004, 13:10

vediamo...tu hai fatto le celle dei link con i border, quando selezioni uno di essi, andando al link, cambi il visited per evidenziare la sezioni in cui si trova l'utente.

ora il problema è che se metti il bordo sx di diverso colore non funge..giusto??

tipo:

codice:

.ord_gruppi_td {
	width:80px;
	background:#FFFFFF;
	border-top:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #777777;
     border-left:1px solid red;
	text-align:center;

**herrel** · 05-03-2004, 13:16

il bordo sx non viene visualizzato perche hai utilizzato il border-collapse che permette , in una tabella, di condividere il bordo...ora mi chiedo "invece di complicarti la vita con le tabelle perchè non fai tutto con i div??

**daviweb** · 05-03-2004, 13:18

Esatto!

codice:

.ord_gruppi_td_act {	
	width:192px;
	background:#F8F8F8;
	border-left:1px solid #777777;
	border-right:1px solid #777777;
	border-top:1px solid #777777;
	text-align:center;
	font-family:verdana,arial;
	font-size:13px;
	font-weight:bold;
	color:#FF0000;
}

**daviweb** · 05-03-2004, 13:24

Originariamente inviato da herrel
il bordo sx non viene visualizzato perche hai utilizzato il border-collapse che permette , in una tabella, di condividere il bordo...

Questo lo so, ma provando in altri modi avevo altri problemi, e questa era la soluzione migliore... anche se c'è da dire che ormai ieri sera ero fuso!

Originariamente inviato da herrel
...ora mi chiedo "invece di complicarti la vita con le tabelle perchè non fai tutto con i div??

Mmm... perchè no? Dici che sono l'ideale per gestire questa situazione? Cmq ora provo...

Grazie

**herrel** · 05-03-2004, 13:27

prova questo esempio che ho fatto:

codice:

<html>
<head>
<title>Untitled</title>
<style>
#menusopra {
float:left;
width:200px;
height:15px;
background:#f2f2f2;
text-align:center;
font-family:verdana;
font-weight:bold;
font-size:12px;
color:black;
border-top: 1px solid black;
border-right: 0px solid black;
border-bottom: 0px solid #f2f2f2;
border-left: 1px solid black;
}
#menusotto {
width:720px;
height:15px;
background:#f2f2f2;
padding-left:15px;
font-family:verdana;
font-weight:bold;
font-size:9px;
color:#4802ca;
border-top: 0px solid black;
border-right: 0px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.lin {
float:left;
margin-left:3px;
width:100px;
height:15px;
background:white;
font-family:verdana;
font-weight:bold;
font-size:10px;
color:#4802ca;
text-align:center;
border-top: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
border-bottom: 0px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}

.lin a:link {
position:relative;
display:block;
text-decoration:none;
color:red;
}

.lin a:visited {
position:relative;
display:block;
text-decoration:none;
}

.lin a:hover {
position:relative;
display:block;
text-decoration:none;
border-collapse:collapse;
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 0px solid #aaaaaa;
border-left: 1px solid red;
}
</style>
</head>

<body>
<div id="menusopra">
www.herrel.altervista.org   :quipy: 
 </div>

<div class="lin">link 1</div>
<div class="lin">link 2</div>
<div class="lin">link 3</div>
<div class="lin">link 4</div>
<div class="lin">link 5</div>

<div id="menusotto">

 </div>


</body>
</html>

Discussione: [css] Bordi celle adiacenti

Strumenti discussione

Ricerca discussione

Visualizza

[css] Bordi celle adiacenti

Permessi di invio