div resize on hover dinges

[garrox]

op mijn nieuwe website wil ik een paar texten onder elkaar zetten. ik wil niet dat er gescrolled moet worden, maar de texten zijn wel te lang om allemaal onder elkaar weer te geven.

ik wil nu dat zon lap text altijd in elkaar gevouwen is, en als ik er met de muis overheen ga dan moet het zaakje uitvouwen.

ik heb t onderstaande geprobeerd. ik denk dat ik een heel aardig eind in de richting zit. maar na uren proberen, toch nog even googlen, proberen, googlen, proberen, heb ik toch eindelijk de moed opgegeven en ben ik met tegenzin dit bericht aan het typen

wie o wie zegt mij even... ooooohhh ik zie t al!...

linked CSS - file:

.PortfolioCase  {
position:relative;
background-image: url('images/Semi-trans-green.png');
table-layout: inherit;
top: 20;
width: 600;
height: 10;
padding: 10;
border-width: 3;
border-color: #003300;
border-style: groove;
}
.PortfolioCase:hover {
height: 100;
}

PHP file:

<div class=portfoliocase>
<img src="images/pm-screens/main.jpg" width="150" height="100" align=left>
<table>
<tr><td> &nbsp; </td><td width=200><b>	<?php echo $fnaam; ?>	</b></td><td> &nbsp; </td><td class=portFolioCaseFont>	GRX Photomanager 2011		</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	<?php echo $fopdr; ?>	</b></td><td> &nbsp; </td><td class=portFolioCaseFont>	R. R****** [particulier]	</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	Screenshots:			</b></td><td> &nbsp; </td><td class=portFolioCaseFont>	Click.. >>					</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	Download:				</b></td><td> &nbsp; </td><td class=portFolioCaseFont>	<?php echo $fna; ?>			</td></tr>
</table>
</div>

 

[janyep]

Deze misschien?

http://www.html-site.nl/uitklappen.php

http://dynamicdrive.com/dynamicindex1/switchmenu.htm

http://dewebmeester.wordpress.com/2010/04/29/script-in-en-uitklappen-van-tekst-binnen-website/

http://users.skynet.be/javascript/texts/verbergtekst.htm

 

[csshunter]

... ooooohhh ik zie t al!...

Het is misschien niet het enige, maar als je in je css hebt staan:

...
.[COLOR="#B22222"][B]P[/B][/COLOR]ortfolio[COLOR="#B22222"][B]C[/B][/COLOR]ase  {
...

en in je html:

...
<div class=[COLOR="#B22222"][B]p[/B][/COLOR]ortfolio[COLOR="#B22222"][B]c[/B][/COLOR]ase>
...

dan zou de class met hoofdletters wel eens niet gevonden kunnen worden.
Ook aan te bevelen: aanhalingstekens om de waarden van de eigenschappen. Dus heb je al eens geprobeerd:

...
<div class="PortfolioCase">
...

Ah, ik zie nog meer ...
In de css staan de aantallen voor breedtes, hoogtes enz. vermeld zonder eenheid erachter.
Dan weet een browser niet of die {width: 600;} gemeten moet worden in millimeters, centimeters, ellen, Rijnlandse Voeten van maat 43,5, Engelse Zeemijlen, Oudhollandse Roeden of punten of pixels.
Even px erachter zetten, en de browsers begrijpen het.

• NB: Dit is anders dan maten in de html, daar is het automatisch px (mag daar juist niet in), of anders een opgave in %.

Met vriendelijke groet,
CSShunter
__________
PS: de validators zijn je vriend!

 

[garrox]

@css hunter: bedankt. ik heb mn code onderworpen aan een strenge controle op juistheid van puntjes commas hoofdletters enz. zaten nog heel wat foutjes in.

@ janyep: bedankt voor de sites, je hebt me in de goeie richting gezet. ik heb nu een spoiler script aangepast voor mouseovers en mouseouts, weer uitgeveegd, en opnieuw zelf iets verzonnen met de inspiratie van alle info van de verschillende websites.

als jullie het nog willen zien, post dan even. dan zet ik t er nog op

 

[csshunter]

Hoi garrox,
Altijd nieuwsgierig!

 

[garrox]

oplossing

ik heb alle relevante code uitgeknipt en hieronder gezet.
inmiddels heb ik op een andere pagina van dezelfde site een mooier systeem gemaakt met textkoppen die onclick uitschuiven
als je die wil zien kun je m vinden op www.grxdesign.nl > informatie
verder staan er nog vershillende scripts zoals text zoomen, text auto scrollen enz.
ik probeer zoveel mogelijk high tech te implementeren maar toch stylish te blijven.
de sources kun je allemaal gewoon kopieren vanuit pagina bronnen.

code in portfolio.php (welk inline word weergegeven via index.php)

<body Onload="HideDiv('Photomanager'); HideDiv('StudentFlow'); HideDiv('BurnBaby');">
<script> function HideAllDivs() { HideDiv('StudentFlow'); HideDiv('Photomanager'); HideDiv('BurnBaby'); } </script>

<br><br><table cellspacing="15">
<tr>
		<td><img src="images/pm-screens/main.jpg" width="150" height="100" title="Main Screen" 	OnMouseOver="HideAllDivs(); ShowDiv('Photomanager');"></td>
		<td><img src="images/sf-screens/main.png" width="150" height="100" title="Main Screen" 	OnMouseOver="HideAllDivs(); ShowDiv('StudentFlow');"></td>
		<td><img src="images/bb-screens/stap1.png" width="150" height="100" title="Stap 1" 		OnMouseOver="HideAllDivs(); ShowDiv('BurnBaby');"></td>
</tr>
</table>

<div class=portfoliocase id=Photomanager>
<a href="images/pm-screens/main.jpg" rel="PrettyPhoto[pm-screens]"><img src="images/pm-screens/main.jpg" width="150" height="100" align=left></a>
<table>
<tr><td> &nbsp; </td><td width=200><b>	<?php echo $fnaam; ?>	</b></td><td> &nbsp; </td><td class=portFolioCaseFont id=vergroten>	GRX Photomanager 2011					</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	<?php echo $fopdr; ?>	</b></td><td> &nbsp; </td><td class=portFolioCaseFont id=vergroten>	R. Rutgers <?php echo $fparticulier; ?>	</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	Screenshots:			</b></td><td> &nbsp; </td><td class=portFolioCaseFont id=vergroten>	<?php echo $screens; ?>					</td></tr>
<tr><td> &nbsp; </td><td width=200><b>	Download:				</b></td><td> &nbsp; </td><td class=portFolioCaseFont id=vergroten>	<?php echo $fna; ?>						</td></tr>
</table>
</div> <!-- einde portfoliocase -->
<!-- screenshot gallery begin -->
<a href="images/pm-screens/main.jpg" 			rel="PrettyPhoto[pm-screens]" title="Main screen"></a>
<a href="images/pm-screens/importeren.jpg" 		rel="PrettyPhoto[pm-screens]" title="Import screen"></a>
<a href="images/pm-screens/bewerken.jpg" 		rel="PrettyPhoto[pm-screens]" title="Edit screen"></a>
<a href="images/pm-screens/instellingen.jpg" 	rel="PrettyPhoto[pm-screens]" title="config screen"></a>
<a href="images/pm-screens/statistieken.jpg" 	rel="PrettyPhoto[pm-screens]" title="stats screen"></a>
<a href="images/pm-screens/uploaden.jpg" 		rel="PrettyPhoto[pm-screens]" title="upload screen"></a>
<a href="images/pm-screens/download.jpg" 		rel="PrettyPhoto[pm-screens]" title="screen of installing via website!"></a>
<!-- gallery einde -->

een snippet uit mn external CSS

.PortfolioCase  {
position:relative;
background-image: url('images/Semi-trans-green.png');
top: 20;
width: 600;
height: 100;
padding: 10;
border-width: 3;
border-color: #003300;
border-style: groove;
cursor: default;
}

snippet uit mn external JS file van gemoeide scriptonderdelen:

// script om DIVs mee te hiden/showen 
function ShowDiv(id)
	   {
	   var inner = document.getElementById(id);
	      	inner.style.display = "";
	   }
				
	function HideDiv(id)
		{
		var inner = document.getElementById(id);
		inner.style.display = "none";
	    }
// -- einde script --