Hi,
Sorry for the delayed reply.
The effect was created with raw html in the RST document and then styled
in the CSS document. The videos are in an unordered list in the RST
document. Here are the two first items:
- |basicopt| Basic multiband optimization of a mobile phone antenna.
This shows the normal way to design an optimized matching network. Both
T-network and a 5 component network are calculated and then compared to
each other and also to the umatched antenna. *Playing time: 7:14*
|ytbasic|
- |non50opt| Shows how to use BetaMatch to design matching networks when
the source has an impedance that is not 50\ |ohm|. A single band antenna
is used and the source impedances are: 50\ |ohm|, 15-20j\ |ohm| and
300+300j\ |ohm|. The resulting designs have similar performance but at
the same time they have vastly different impedances. *Playing time: 5:14*
|ytnon50|
Notice that |ytbasic| and |ytnon50| are indented which means that they
will be within blockqoute-tags in the rendered HTML. Later this is used
for the position.
For each video there are two definitions:
1. link to the video on my server and thumbnail inside a DIV-elements.
Example:
.. |BASICOPT| raw:: html
<div><a href="./_static/play.htm" target="_blank">Antenna optimization
example<img src="_static/thumb_quick_opt_300x210.jpg" alt="Click to play
Antenna Optimization"></a></div>
2. link to the video on Youtube like this:
.. |YTBASIC| raw:: html
<div><a href="http://www.youtube.com/watch?v=R6qxWyj_1Qo";
target="_blank">Watch this video on YouTube</a></div>
Now I can target and style these in my CSS document:
div#videos ul{
1. list-style-type:none;
2. padding:16px 0 0 0;
3. font-size:12px;
4. line-height:115%;
5. text-align:left;
6. margin:0;
}
Posiotion of the internal link:
div#videos a{
1. position:absolute;
2. left:0px;
3. top:-24px;
}
The image (which graphically includes the text and Youtube link is
positioned and given a transparent border. The transparent border is
needed to prevent movement when hovering with the cursor and the border
turnes red.
div#videos img{
1. padding-right:290px;
2. position:absolute;
3. left:-334px;
4. top:-10px;
5. border:1px solidtransparent;
}
Turn on a red border around the whole block when hovering with the
mouse. Notice that it is the img-element that is target for hover
(normally it would be an a-element):
div#videos img:hover {
border: 1px solid #FF0000;
}
The <em> tag on the Playing time is used for the position:
div#videos em{
1. font-size:12px;
2. position:absolute;
3. top:140px;
4. left:0px;
}
Blockquote is used to position the inside link to the videos in YouTube:
div#videos blockquote a{
1. top:160px;
2. left:0px;
}
Hope this helps,
Max
On 18/8/2011 5:34 AM, fkunze wrote:
Hi Max,
I came across your post (Re: [sphinx-dev] Best way to have a link
with an image) and I am interested in the details of your
implementation. Thanks,
Fritz Kunze
[email address]
--
You received this message because you are subscribed to the Google
Groups "sphinx-dev" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/sphinx-dev/-/3gpUjL1SOIoJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/sphinx-dev?hl=en.
--
You received this message because you are subscribed to the Google Groups
"sphinx-dev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/sphinx-dev?hl=en.
