Sheperd Sheperd - 2 months ago 8
CSS Question

Move read more link down with the text

The read more link does not go down with the text itself when the remaining text is shown.

I tried

position: relative;
on the "read more" link which is
<a href="#">Read More</a>
but no luck, because the
<a href="#">Read More</a>
is not a child of
<div="main">
but it is a child of
<div id="sidebox">
and it is in a separate javascript file too.

How can I make the "read more" link move down with the text?

The HTML File:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#mainwrapper #sidebox {top:100px;right:2%;width:18%;position:absolute;direction:rtl;}
#mainwrapper #sidebox #main {top:80px;position:absolute;right:0%;left:0%;margin-left:auto;margin-right:auto;}
#mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
#mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
#mainwrapper #sidebox a {text-decoration:none;color:grey;font-size:20px;position:relative;top:300px;}
</style>
</head>
<body>
<div id="mainwrapper">
<div id="sidebox">
<div id="main">
<p id="title">SOME TITLE</p>
<p id="sub">SOME LONG TEXT</p>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="readmore.js"></script>
<script>$('#main').readmore({speed: 500});</script>


Part of the code in the readmore.js:

var readmore = 'readmore',
defaults = {
speed: 100,
collapsedHeight: 200,
heightMargin: 16,
moreLink: '<a href="#">Read More</a>',
lessLink: '<a href="#">Close</a>',
embedCSS: true,
blockCSS: 'display: block; width: 100%;',
startOpen: false,
// callbacks
blockProcessed: function() {},
beforeToggle: function() {},
afterToggle: function() {}
},

Answer

It seems the positioning of #main causes some problems, change your css to this:

    #mainwrapper #sidebox {width:15%;direction:rtl;position:absolute;top:100px;right:2%;}
    #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;}
    #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;}
    a {text-decoration:none;color:navy;font-size:20px;}
Comments