Scriptregel gevraagd-opgelost+

wilbie · 06 mei 2008, 21:09

Hallo,

Kan iemand mij een scriptregel geven om de tabkolom naar rechts te verschuiven.
(m.a.w. de tabkolom zou naar het paneel moeten schuiven).
Zie voorbeeld door op url te klikken: http://users.telenet.be/varia.be/TabsPanel1.html

Hartelijk dank bij voorbaat voor de hulp.

Wilbie

coderunner · 06 mei 2008, 23:28

wilbie schreef:... Kan iemand mij een scriptregel geven om de tabkolom naar rechts te verschuiven.
(m.a.w. de tabkolom zou naar het paneel moeten schuiven).

Beste Wilbie,

Door de linker marge van je ".tab" in je "Internal (of "Embedded") Style Sheet" te definiëren

.tab{
color: navy;
background-color: white;
border: thin solid navy;
position: vertical,absolute;
left: 200;
margin-left:90;
height: ;
top: 500;
width: 120;
text-align: center;
font: 9pt Verdana,sans-serif;
z-index: 2;
padding: 3;
overflow: ;
cursor: pointer;
cursor: hand;

De waarde aanpassen tot de "tabkolom" staat waar je hem wil

.

Zorg er ook voor dat je "Internal (of "Embedded") Style Sheet" <style type="text/css"> ... </style> TUSSEN <head> ... </head> staat en NIET tussen <body> ... </body> zoals in je bovenstaand voorbeeld!

mvg,
Coderunner

wilbie · 07 mei 2008, 12:41

Hallo Coderunner,

Hartelijk bedankt voor je reactie en voor het scriptregeltje.
Ik heb gedaan wat je gezegd hebt en alles werkt prima.

Hartelijk dank voor deze hulp.

Kun je mij nog even helpen met onderstaand probleem ?

Ik had ook graag een tableborder er rond willen maken, zoals dit voorbeeld laat zien: http://users.telenet.be/varia.be/tag.gif

Kun je mij ook zo een scriptregel geven voor een tableborder te maken
voor deze layout:http://users.telenet.be/varia.be/TabsPanel1.html

Hartelijk bedankt voor de hulp die ik van jou al gekregen heb en misschien nog ga krijgen.

Wilbie

coderunner · 07 mei 2008, 19:09

Beste wilbie,

wilbie schreef:... Ik heb gedaan wat je gezegd hebt en alles werkt prima.
Hartelijk dank voor deze hulp.

Dat is graag gedaan en bedankt om dit hier te melden.
Het gaat hier niet over een scriptregel maar over css opmaak

wilbie schreef:... Ik had ook graag een tableborder er rond willen maken, zoals dit voorbeeld laat zien: http://users.telenet.be/varia.be/tag.gif

Kun je mij ook zo een scriptregel geven voor een tableborder te maken
voor deze layout:http://users.telenet.be/varia.be/TabsPanel1.html

Ook hier weer: Het gaat hier niet over een scriptregel maar over css opmaak

Ziehier de volledige html en css code voor hetgeen je bedoelt. Om het geweizigde allemaal hier uit te leggen zou een beetje veel zijn

Code: Selecteer alles

<html>
	<head>
		<title>TabsPanel</title>

			<script language="JavaScript">
			   var currentPanel;
			   
			   function showPanel(panelNum) {
			      //hide visible panel, show selected panel, 
			      //set tab
			      if (currentPanel != null) {
			         hidePanel();
			      }
			      document.getElementById 
			         ('panel'+panelNum).style.visibility = 'visible';
			         currentPanel = panelNum;
			         setState(panelNum);
			   }
			   
			   function hidePanel() {
			      //hide visible panel, unhilite tab
			      document.getElementById
			        ('panel'+currentPanel).style.visibility = 
			         'hidden';
			      document.getElementById
			        ('tab'+currentPanel).style.backgroundColor = 
			        '#ffffff';
			      document.getElementById
			        ('tab'+currentPanel).style.color = 'navy';
			   }
			   
			   function setState(tabNum) {
			      if (tabNum==currentPanel) {
			         document.getElementById 
			           ('tab'+tabNum).style.backgroundColor = 
			           '#ddddff';
			         document.getElementById
			           ('tab'+tabNum).style.color = 'red';
			      }
			      else {
			         document.getElementById
			           ('tab'+tabNum).style.backgroundColor = 
			           '#ffffff';
			         document.getElementById
			           ('tab'+tabNum).style.color = 'navy';
			      }
			   }
			   
			   function (tab) {
			      tab.style.backgroundColor = 'ddddff';
			   }
			   </script>

		<style type="text/css">
	
	      .tab{
	         color: navy;
	         background-color: white;
	         border: thin solid navy;
	         position: vertical,absolute;
	         left: 200;
	         top: 500;
	         width: 110;
	         text-align: center;
	         font: 9pt Verdana,sans-serif;
	         z-index: 2;
	         padding: 3;
	         overflow: ;
	         cursor: pointer;
	         cursor: hand;
	      }
	
	      .panel{
	         position: absolute;
	         margin-left:35;
	         top: 72;
	         left: 220;
	         width: 680;
	         z-index: 1;
	         height: 500;
	         visibility: hidden;
	         font: 12pt Verdana,sans-serif;
	         color: white;
	         padding-top: 60;
	         overflow: auto;
	      }
	
		  .outerborder {
		     border: medium double #000000;
		     padding-top:45;
		     padding-bottom:45;
		     margin-left:90;
		     width: 810;
		     height: 505;
		     background-color: black;
		  }
	
		  .border {
		      margin-left:2;
		      border-top: thin solid #FFFFFF;
		      border-right: thin solid #FFFFFF;
		      border-bottom: thin solid #FFFFFF;
		      width:800;
		      height: 500;
		      background-color: black;
	      }
	
		  .bordermenu {
		      border: medium double #FFFFFF;
		      width:120;
		      height: 495;
		      background-color: black;
		   }
		</style>
	</head>


<body>


<br><br><br>        
<body onLoad="showPanel(1)">
<div class="outerborder">
	<div class="border">
		<div class="bordermenu">
			<div id="tab1" class="tab" onClick = "showPanel(1);" onMouseOver="(this);" onMouseOut="setState(1)">Tab One</div>
			<div id="panel1" class="panel">Paneel 1</div>
	
			<div id="tab2" class="tab" onClick = "showPanel(2);" onMouseOver="(this);" onMouseOut="setState(2)">Tab Two</div>
			<div id="panel2" class="panel">Paneel 2</div>
	
			<div id="tab3" class="tab" onClick = "showPanel(3);" onMouseOver="(this);" onMouseOut="setState(3)">Tab Three</div>
			<div id="panel3" class="panel">Paneel 3</div>
	
			<div id="tab4" class="tab" onClick = "showPanel(4);" onMouseOver="(this);" onMouseOut="setState(4)">Tab Four</div>
			<div id="panel4" class="panel">Paneel 4</div>
	
			<div id="tab5" class="tab" onClick = "showPanel(5);" onMouseOver="(this);" onMouseOut="setState(5)">Tab Five</div>
			<div id="panel5" class="panel">Paneel 5</div>

		</div>	
	</div>
</div>

</body>
</html>

mvg,
Coderunner

wilbie · 07 mei 2008, 20:04

Beste Coderunner,

Zéér hartelijk bedankt voor hetgeen je belangeloos gedaan hebt voor mij.
De opmaak ziet er gewoon fantastisch uit.
En zo vlug !!!
Dat is een teken dat ik hier te maken heb met een prof op dit gebied.
Misschien dat we elkaar nog eens 'treffen' op dit forum.
Alvast nogmaals hartelijk bedankt.

Wilbie
Afbeelding

coderunner · 07 mei 2008, 20:55

wilbie schreef:Beste Coderunner,
Zéér hartelijk bedankt voor hetgeen je belangeloos gedaan hebt voor mij.
De opmaak ziet er gewoon fantastisch uit.
En zo vlug !!!
Dat is een teken dat ik hier te maken heb met een prof op dit gebied.
Misschien dat we elkaar nog eens 'treffen' op dit forum.
Alvast nogmaals hartelijk bedankt.

Beste Wilbie,

Dat is graag gedaan en nogmaals bedankt om dit hier te melden.

mvg,
Coderunner