Hi,
Using css (that should be working in Firefox 2,3 and Internet Explorer
6,7 at least),
I would like to create the following:
My Links: Link1 +show more links
<!--- This is shown when someone clicks on a plus image next to Link1
Link2(lined up with Link1)
Link3 (lined up with Link2)
-->
Currently I got the following:
The css part:
div.leftpart {width:40px;}
div.rightpart {float:left;clear:right;}
The html part:
<div class="leftpart ">My Links:</div>
<div class="rightpart ">Link 1 <a href="javascript
:showMore;"<img
title="show/hide more links"></a>
<!-- This in reality is all dynamic -->
<div id="Nr1" style="visibility:invisible;>
<div class="leftpart"> </div>
<div class="rightpart "><a href="mylink1.html">My Link1</a></div>
<div class="leftpart"> </div>
<div class="rightpart "><a href="mylink2.html">My Link2</a></div>
<div class="leftpart"> </div>
<div class="rightpart "><a href="mylink3.html">My Link3</a></
div>
</div>
Now when someone clicks on the link I am setting the div with id "Nr1"
to visibility:visible, and all additional links
will be shown.
However, I got problems with the style in Firefox / IE.
In Firefox, it looks like this:
My Links:
Link1 +show more links
<!-- one empty line --->
Link2(not lined up with Link1)
<!-- one empty line --->
Link3 (not lined up with Link2)
In Internet Explorer, it looks like this:
My Links:
Link1 +show more links
Link2 (not lined up with Link1)
Link3 (not lined up with Link2)
I also tried something else:
css part:
div.leftpart {height:100%;float:left;}
div.rightpart{float:left;clear:right;}
div.link{clear:left;}
html part:
<div class="leftpart ">My Links:</div>
<div class="rightpart">
<div class="link">Link 1 <a href="javascript
:showMore;"<img
title="show/hide more links"></a></div>
<div id="Nr1" style="visibility:invisible;>
<!-- This in reality is all dynamic -->
<div class="link"> </div>
<div class="link"><a href="mylink1.html">My Link1</a></div>
<div class="link"> </div>
<div class="link"><a href="mylink2.html">My Link2</a></div>
<div class="link"> </div>
<div class="link"><a href="mylink3.html">My Link3</a></div>
</div>
</div>
This way, all links were perfectly lined up, however the links again
are surrounded by a box, and the last links
were hanging out of this box - the links are all floating left from
the "leftpart" div, and so the surrounding box doesn't know that all
these links should be part of the box too - I guess.
Any idea how to properly get this done?
Thanks in advance,
Peter
