Linien DIV

TorstenH · 17. Feb. 2005

Hallo zusammen...ich habe wieder mal ein Problem mit Linien und deren Farbänderung bei Mouseover und Mouseout....Ich weis nicht, wie ich die Farbe mit 2 Div s gleichzeitig verändern kann...d.h. den wagerechten und den senkrechten....und das noch in unterschiedlichen Positionen. Wenn ihr den Code auruft, erklaere ich noch etwas mehr...Vielen Dank erst mal.....Grüße Torsten

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
div {
	border:solid 0px black;
	height:2px;
	width:15px;
	background-color: #FF0000;
	line-height: 0px;
}
.line {
	border-left:none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FF0000;
}
.line1 {
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #FF0000;
}
.line2 {
	border-top-width: 2px;
	border-top-style: ridge;
	border-top-color: #FF0000;
}
-->
</style>
<script type="text/javascript"> 
<!-- 
function Farbe(test, farbe) { 
document.getElementById(test).style.backgroundColor = farbe; 
} 
//--> 
</script>
</head>

<body bgcolor="#CCCCCC">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
  <!--DWLayoutTable-->
  <tr> 
    <td width="48" height="43"> </td>
    <td width="16"> </td>
    <td width="17"> </td>
    <td width="22"></td>
    <td width="17"></td>
    <td width="819"></td>
    <td width="39"></td>
  </tr>
  <tr> 
    <td height="19" colspan="3" align="left" valign="middle" bgcolor="#CCCCCC"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif"> 
      <a href="Start%206.htm"onClick="Farbe('erster','#000000')" onMouseover="Farbe('erster','#0000FF')" onMouseout="Farbe('erster','#000000')">Link 
      1 </a> </font><span style="position:absolute; top:68px; left:60px;"> 
      <div id="erster"> </div>
      </span></td>
    <td> </td>
    <td> </td>
    <td rowspan="3" valign="top"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif">So 
      weit, wie hier links zu sehen bin gekommen. Die rote Linie soll bei Link 
      1 etwas länger sein. Ich bräuchte also mehrere Div s....Am Ende 
      soll es so ausehen wie im Link 3 und 4...bei Mouseover die wagerechte und 
      senkrechte Linie Farbe ändern....</font></td>
    <td> </td>
  </tr>
  <tr> 
    <td height="19" colspan="3" align="left" valign="middle" bgcolor="#CCCCCC"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Start%206.htm"onClick="Farbe('zweiter','#000000')" onMouseover="Farbe('zweiter','#0000FF')" onMouseout="Farbe('zweiter','#000000')">Link 
      2</a> </font><span style="position:absolute; top:87px; left:60px;"> 
      <div id="zweiter"> </div>
      </span></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="10"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="21"> </td>
    <td> </td>
    <td> </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td rowspan="2" align="left" valign="middle"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Start%206.htm"onClick="Farbe('dritter','#000000')" onMouseover="Farbe('dritter','#0000FF')" onMouseout="Farbe('dritter','#000000')">Link 
      3 </a> </font></td>
    <td height="10"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="9"></td>
    <td colspan="2" rowspan="2" valign="top" class="line"><!--DWLayoutEmptyCell--> </td>
    <td rowspan="5" valign="top" class="line1"><!--DWLayoutEmptyCell--> </td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td rowspan="2" align="left" valign="middle"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif"><a href="Start%206.htm"onClick="Farbe('vierter','#000000')" onMouseover="Farbe('vierter','#0000FF')" onMouseout="Farbe('vierter','#000000')">Link 
      4 </a> </font></td>
    <td height="13"></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="9"></td>
    <td rowspan="2" valign="top" class="line"><!--DWLayoutEmptyCell--> </td>
    <td rowspan="3" valign="top" class="line1"><!--DWLayoutEmptyCell--> </td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="13"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="38"></td>
    <td></td>
    <td> </td>
    <td></td>
    <td></td>
  </tr>
  <tr> 
    <td height="24"></td>
    <td></td>
    <td> </td>
    <td></td>
    <td> </td>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

[EDIT=RoyalKnight]HTML-Tags hinzugefügt[/EDIT]

dkdenz · 17. Feb. 2005

Das:

Code:

border-left:none;
border-top-style: solid;
border-top-color: #FF0000;

gibt's gar nicht...
Bei none bezieht sich das meines Wissens auf den gesamten Borderbereich.
Da schreibt man eigentlich 0px hin und das bei allen Teilen die man nicht haben will (top, left, bottom, right)

Sieht reichlich kompliziert aus,
was Du da versuchst...viel Spaß dabei.

dkdenz · 21. Feb. 2005

Also, ich habe mir Gedanken darüber gemacht.
Allerdings ist mir das zuviel Fummelei und da ich das für mich niemals brauchen werde,
habe ich auch nix probiert.

Aber ich würde Dir gerne einen gedanklichen Ansatzpunkt geben.
Ich kann mir vorstellen, das es mit exakt versetzten, übereinander ausgerichteten Divs funktioniert,
wenn Du dafür den z-index von CSS nutzt...

http://css.talky.de/sample/z-index.htm

Linien DIV

TorstenH

New member

dkdenz

New member

dkdenz

New member