WilkoJ
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by WilkoJ
-
-
Partly correct 'Foxy Mod"
The Image is in fact a link , you might compare is with a thumbnail. I would like to behave the image (with the box-shadow) like a button. I managed to realize this partially, the right side of the shadow-box is not completely visible.
The attachment shows how it is without this 'feature'
Code of this particular attachment:
<div class="afbeelding_tek"> <div class="afbeelding_left" align="center"><a href="images/F/Fokker CIX-1A.jpg" target="_blank" type="image" class="jcepopup"><img src="images/F/Fokker_CIX-1A-SMALL.gif" alt="Fokker CIX-1A-SMALL" /></a> </div> <div class="tekst-tek_right">Fokker C.IX in the delivery scheme.</div></div>
I'd like to have the box-colour change when hovering over it, ckicking on it etc...
-
Hi,
i'm working on box-shawowing in combination with links, but couldn't get it right;
See attachment ..-shadow3 how it should look like...
The shadow is just partly visible. See attachment ..-shadow2
Who does have suggestions to solve this problem...??..
Further in some occasions ist doesn't work at all. I discovered that this is the case when Class= "jcepopup" is added to the link.
Link to an example on my site (working under Joomla 3.x)
Below a sample of the relevant past of the CSS and code on the page:
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><style>div.img_enclose{ width: 88%; clear:both; height: 420px; margin: 0 auto; padding: 10px; font-size: 0.9em; text-align:left;}div.img_enclose-V{ width: 88%; clear:both; height: 530px; margin: 0 auto; padding: 10px; font-size: 0.9em; text-align:left;}div.img_enclose img, div.img_enclose div.img_left img, div.img_enclose div.img_right img{ width: 520px; height: auto; float:center;}div.img_enclose-V img, div.img_enclose-V div.img_left img, div.img_enclose-V div.img_right img{ width: auto; height: 520px; float:center;}div.img_enclose-V div.img_right, div.img_enclose-V div.img_left, div.img_enclose div.img_right, .divimg_enclose div.img_left{ background-color:rgba(255,255,255,0.1); /* box-shadow: 10px 10px 5px rgb(50,50,50); */}div.img_enclose div.img_right a:link, div.img_enclose div.img_left a:link, div.img_enclose-V div.img_right a:link, div.img_enclose-V div.img_left a:link, { box-shadow: 10px 10px 5px rgb(50,50,50);}div.img_enclose div.img_right a:hover, div.img_enclose div.img_left a:hover,div.img_enclose-V div.img_right a:hover, div.img_enclose-V div.img_left a:hover { box-shadow: 10px 10px 5px rgb(200,200,200);}div.img_enclose div.img_right a:visited,div.img_enclose div.img_left a:visited,div.img_enclose-V div.img_right a:visited,div.img_enclose-V div.img_left a:visited { box-shadow: 10px 10px 5px rgb(120,120,120);}div.text-encl_left { width: 40%; float:left; padding: 60px 0 30px 40px;}div.text-encl_right { width: 40%; float:right; padding: 60px 40px 30px 0;}</style></head><body><div class="img_enclose"> <div class="img_left"><a href="http://nimh-beeldbank.defensie.nl/memorix/b9bee65a-ad4a-1341-8ee8-27a5dd673d71" target="_blank" title="Fokker A (M.8) A20/16, WNr. 97, op Soesterberg. Geïnterneerd 8 sept.1916 te Roosteren. Later reg. LA34., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/0eb31b77-65be-9914-c498-217798694ea0.jpg" alt="Fokker A (M.8) A20/16, WNr. 97, op Soesterberg. Geïnterneerd 8 sept.1916 te Roosteren. Later reg. LA34." /></a> </div> <div class="text-encl_right">Fokker A (M.8) A20/16, WNr. 97, still with German markings at Soesterberg. [at Beeldbank NIMH]</div></div><div class="img_enclose"> <div class="img_right"><a href="http://nimh-beeldbank.defensie.nl/memorix/4a10b043-f161-c849-401f-e8d4b20710fc" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/d2eac7c5-b6cc-8529-469b-b4c3d856cc02.jpg" alt="Fokker A (M.8) LA34, op Soesterberg." /></a> </div> <div class="text-encl_left">Fokker A LA34, with Dutch markings at Soesterberg. [at Beeldbank NIMH]</div></div><div class="img_enlcose"> <div class="img_left"><a href="http://nimh-beeldbank.defensie.nl/memorix/6409bd14-2cce-799c-78da-bb6735506560" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg. Ongeval in de start op 24 maart 1917. Elt.vl. J.C.G. Duinker (in de cockpit). Met oranje bollen., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/43b20a54-80d4-25cb-d196-10cb8e715719.jpg" alt="Fokker A (M.8) LA34, op Soesterberg. Ongeval in de start op 24 maart 1917. Elt.vl. J.C.G. Duinker (in de cockpit). Met oranje bollen." /></a> </div> <div class="text-encl_right">Fokker A (M.8) LA34, at Soesterberg. Accident at take- off op March 24 1917. Elt.vl. J.C.G. Duinker. [at Beeldbank NIMH]</div></div><div class="img_enlcose-V"> <div class="img_right"><a href="http://nimh-beeldbank.defensie.nl/memorix/75821798-4f5a-5f93-5915-9375114efcab" target="_blank" title="Fokker A (M.8) LA34, op Soesterberg. Detail motor., op Beeldbank NIMH"><img src="http://images.memorix.nl/nda/thumb/400x400/be0f5909-03c3-064d-0964-9a4a2001ebbc.jpg" alt="Fokker A (M.8) LA34, op Soesterberg. Detail motor." /></a> </div> <div class="text-encl_left">Fokker A (M.8) LA34, at Soesterberg. Detail motor. [at Beeldbank NIMH]</div></div></body></html>
-
I have been trying something: the only other way to have the text centered in the cells is to select each column and than select the appropriate style (via the editor).
On an older version of the site (Joomla 1.5 and HTML) I worked with colgroups, but I didn't manage to get the text aligning working with it.
On W3schools the Colgroup text refers to CSS...... I know a bit of CSS 2 and how to work with styles, but , apart fro giving cells a coloured background, no other styling seem to work with colgroups....
-
Hi,
I'm running a website (at an ISP) under PHp 5.3 with Joomla 2.5.x
i noticed lately that several columns in tables on the site were no longer centered.
Check the table with registrations of this particular aircraft.....also the table with paintnumbers.
I have been searching the www to get a glue to solve this, but thusfar I didn't find a good solution.
Table structure looks like this:
.....
<div id="tabel-serial"> <table style="width: 97%; border-collapse: collapse;" border="1"> <caption>Glenn Martin 139 WH-1</caption> <thead class="tserial"> <tr> <th class="kgreg1">Regi-stratie</th> <th class="kgreg1">Constr.-nr.</th> <th class="kgreg2">Datum in dienst</th> <th class="kgreg2">Datum uit dienst</th> <th>Opmerkingen</th> </tr> </thead> <tbody class="serial"> <tr> <td class="kgreg1">M-501</td> <td class="kgreg1">664</td> <td class="kgreg2">02-09-1936</td> <td class="kgreg2">09-03-1942</td> <td>Te Andir in Japanse handen gevallen</td> </tr>.......
</tbody> </table> </div
The related CSS-part is this:
.........
#tabel-serial {margin: 120px 15px 0 15px;}thead.tserial{ font-style:normal; font-weight:bold; font-size: 0.9em;}
..................
I have tried td:nth-child(n+1)
This works rather good, but especially in the paint tables this doesn't work as there are several rowspans applied.
[and not all tables have the same structure, you may check several other articles about the aircraft....]
Box-shadow not working correct with links
in CSS
Posted · Edited by WilkoJ
dsonesuk,
I don't quite understand what you mean with the .."anchor link not using display: block.." ?:
I've changed things a bit';
I've removed the background. ( in CSS the line ..background-color:rgba(255,255,255,0.1);... ) I suppose thats the frame-effect you're talking about...
In CSS
..
div.img_enclose img, div.img_enclose div.img_left img, div.img_enclose div.img_right img{ width: 520px; height: auto; float:center;
box-shadow: 10px 10px 5px rgb(50,50,50);}
..
This shows a shadow as I would like.
For the linkproperties:
..
div.img_enclose div.img_right a:link img, div.img_enclose div.img_left a:linkimg, div.img_enclose-V div.img_right a:link img, div.img_enclose-V div.img_left a:link img, { box-shadow: 10px 10px 5px rgb(50,50,50);}div.img_enclose div.img_right a:hoverimg, div.img_enclose div.img_left a:hover img,div.img_enclose-V div.img_right a:hover img, div.img_enclose-V div.img_left a:hover { box-shadow: 10px 10px 5px rgb(200,200,200);}div.img_enclose div.img_right a:visited img,div.img_enclose div.img_left a:visited img, div.img_enclose-V div.img_right a:visited img,div.img_enclose-V div.img_left a:visited img { box-shadow: 10px 10px 5px rgb(120,120,120);}
...
When hovering over the image (a link..) the color of the shadow changes. Thats's one thing
But the shadow color doesn't change when I clicked om the image (weblink) ......I expected it to behave as a visited link, alas it doesn't.