For those who wonder and don't read the original thread the resulting
effect can be seen in the "Videos" section on
http://www.mnw-scan.com/index.html
/Max
On 21/8/2011 10:04 AM, Max Landaeus wrote:
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.
--
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.
