I am struggling to get multiple instances of this tabbed box on one page. I am very new to jquery, and the code I have is copied. The tabbed box works fine, but multiple instances cause problems.
The HTML:
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The CSS:
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
And the Jquery:
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
See the jsfiddle!
I have multiple section tags on my page, and would like this tabbed box in each section.
Here is a working example of the Tabs you wish to have. Check out the code snippet. I hope that is what you are looking for.
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
display:inline;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The issue was with display attribute in css
Related
I have the following code:
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
#media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
So when you run the above code, open it on a new page, you can see the alignment to be like this:
On my end, it looks like that but when I zoom out on my website, this is the output I get:
Sorry for the blurred photo
That is what my output looks like when I zoom out. I do not want that, is there a way to make it static, meaning even if I zoom out, the output of the above code I sent does not change?
Even if you run the above code, open it on a new page, and zoom out, you can see the text and the image to change its position. However, I want them to be static, meaning not change at all. Any suggestions?
Update
For a better understanding of what I am looking for, then this is the output I get when I zoom out my page at 33%:
As you can see, the text and image are moved towards the left, which is not what I want. I want them to stay where they were before.
Try wrapping everything inside a dedicated parent div like so:
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</div>
</div>
If this won't work, please make a JSFiddle that illustrates the problem, or share your website address.
I have the following image:
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
How would I make the image responsive?
Expected Output:
See how the image is positioned like that? It's not fit the entire page, as its width and height are shortened. I want my image above to be just like that when viewed on a smaller device, otherwise, it should be as it is shown in the output above.
I tried changing the width and height of the image and used a media query but it did not work, so I removed the media query. Any suggestions?
Give the parent element a flex layout that changes using a media query. You don't need to use floats in this case.
You're missing a closing div tag for <div class='aligned'>
You should also let the width of the blockquote be auto until the screen gets to the size you want it to be on desktop.
.container {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
#media (min-width: 768px) {
.container {
flex-flow: row nowrap;
align-items: flex-start;
}
}
.aligned {
display: flex;
align-items: flex-start;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
max-width: 100%;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
#media (min-width: 800px) {
blockquote {
width: 800px;
}
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" align="left" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</div>
</div>
In your image tag, you have a property align="left" that is actually deprecated.
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/align
After removing that align="left" from your image tag, here's one way to do it:
/* Added code */
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
#media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}
/* Your sample code */
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
I have a sidebar with anchor links that point to a specific content part when I click on them.
The problem appears when I'm scrolling the content, the link in the sidebar gets highlighted when the section title barely appears at the bottom.
How can I make the link change when the title of chapter content reaches the top of sidebar?
Here's what I tried so far but isn't working exactly as I want.
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
//start from a spe
if(fromTop >= 100){
stickyLinks.classList.add("sticky");
}
else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="chapter1">
<h2>Title of Chapter 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
</div>
</div>
</div>
The reason this is happening is because section.offsetTop is returning the position of the section relative to the offset parent. In this case the parent is the div that contains the sections <div class="col-sm-9">.
To fix the problem, we just need to adjust the value for the top of each section to take into account the distance of the parent from the top. We do this as follows:
1. Add an id to the parent container to make it easier to select, e.g.
<div id="chapters-container" class="col-sm-9">
2. Get the offsetTop of the parent so we can add this to the top of the section:
let chaptersTop = document.getElementById("chapters-container").offsetTop;
3. Calculate the actual top position in our scroll listener by adding the distance from the top of the parent container to the position of the section within the parent, which gives us its position from the top of the body in this case. Then we use this when we are checking how far the page is scrolled:
sectionTop = section.offsetTop + chaptersTop;
if (sectionTop <= fromTop && (sectionTop + section.offsetHeight) > fromTop) {
//...
}
Working Example:
(FYI, you aren't closing your li elements in your code, I fixed that here)
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
let chaptersTop = document.getElementById("chapters-container").offsetTop;
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
if (fromTop >= 100) {
stickyLinks.classList.add("sticky");
} else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
sectionTop = section.offsetTop + chaptersTop;
if (sectionTop <= fromTop && (sectionTop + section.offsetHeight) > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent
tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend.
Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</div>
<div class="col-sm-9" id="chapters-container">
<div id="chapter1">
<h2>Title of Chapter 1
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
</div>
</div>
</div>
I am a newbie to html and CSS. I am designing a website for our conference.I am using the following code to get a toggle effect for the invited speakers of our conference which will give a drop down list box carrying their research interests.
<tr><tr><tr><td><th></th></td></tr></tr></tr><!DOCTYPE html>
<html>
<head>
<style>
.maindrop{
width:50%;
}
.bar{
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
}
.bar:hover{
background: gray;
}
.dropbox{
height: 0;
transition: 1s;
overflow: hidden;
width : 100%;
transition-property: background;
transition-timing-function: linear;
}
.dropbox:target{
height:auto;
}
</style>
</head>
<body>
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold" >
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
</div>
</body>
</html>
Quesitons:
First of all the animation is not working properly. The drop down box should come slowly and gently. ( I think I am missing some animation effect!!!)
What I am missing??
Second thing, for the first click drop down box visible, then in the second click one can make the box to reset know. How to do that?
PS: If there any styling option which will make the look better, kindly feel free to edit the code. I will be expecting a pleasant and elegant way of giving information about the speakers of the conference.
.maindrop {
width: 50%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .2s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
</div>
</body>
</html>
First of all the animation is not working properly.
The main issue you have is that the browser cannot animate between height:0; and height:auto; - the browser needs an explicit start point and an explicit end point to animate between.
So you could (for example) animate between height:0; and height:200px; - but the problem (self-evidently) with that is that not all the Speaker Profiles will be the same length and you don't want to have to manually input different heights for each new profile (including when each profile is edited).
So, the solution is to apply the height value through javascript instead of CSS. Then you can animate between:
dropbox.style.height = '0';
and
dropbox.style.height = dropbox.scrollHeight + 'px';
The second issue you have is that an open dropbox is not closing when clicked on for a second time. This is because you are using the :target pseudo-class to detect the first click... but then if you click for a second time on the same dropbox... the dropbox is still the focus of :target - so nothing changes.
Instead you can add and remove the class .open using javascript. The script will check to see if the fold is open - if it isn't, it will open it, if it isn't, it will close it.
Working example (with Speaker Profiles of different lengths):
var folds = document.getElementsByClassName('fold');
function toggle(fold) {
var dropbox = fold.getElementsByClassName('dropbox')[0];
if (fold.classList.contains('open')) {
dropbox.style.height = '0';
}
else {
dropbox.style.height = dropbox.scrollHeight + 'px';
}
fold.classList.toggle('open');
}
function speakersAccordion() {
var openFolds = document.getElementsByClassName('open');
for (var i = 0; i < openFolds.length; i++) {
if (openFolds[i] === this) continue;
toggle(openFolds[i]);
}
toggle(this);
}
for (var i = 0; i < folds.length; i++) {
folds[i].addEventListener('click',speakersAccordion, false);
}
.maindrop{
width:50%;
}
.bar {
display: block;
padding: 20px;
font-family: Times, serif;
font-size: 16px;
text-decoration: none;
color: white;
background-color: #1FB5AC;
}
.bar:hover {
background-color: gray;
}
.dropbox {
height: 0;
transition: all 0.5s ease-out;
overflow: hidden;
width : 100%;
}
.dropbox p:first-of-type {
margin-top: 0;
}
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
<div class="fold" >
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis.</p>
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
</div>
I've searched this website, as well as w3schools trying to answer this for myself, and unfortunately I have not.
If you take a look at this page on my website (http://theust.net/characters.php) and scroll down, you will see two DIVs pop out with images in them.
Using CSS and moving the DIVs to the right locations, I was able to get them around the exact location I want them to appear, the problem I have is that they only look like that on 1920x1080 displays, and if you have any other resolution, they end up in random locations.
I was wondering if anyone knew of a way to fix or anchor them to the DIV they are next to, without putting them inside a container DIV.
(The source code is not hidden, and should be viewable. Just in case, I've included it below.)
/*
This is the stylesheet for the overall website.
*/
.site {
background: #f5f5f5;
}
h2 {
text-align: right;
}
.content {
text-align: center;
margin: 0 auto;
padding: 25px;
width: 60%;
}
.hcontent {
position: relative;
top: 6.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.content p {
color: #888;
font-style: italic;
}
.content p::first-letter {
font-size: 200%;
color: #090909;
}
h3.open, h3.closed {
font-family: monospace;
font-size: 60px;
font-weight: bold;
color: #999;
}
h3.open {
text-align: left;
}
h3.closed {
text-align: right;
}
h3.who-quote {
font-family: monospace;
font-size: 20px;
font-weight: bold;
color: #999;
text-align: right;
font-style: italic;
}
h2.over-h2 {
text-align: right;
}
h4 {
text-align: right;
}
/* Specific Content Page CSS */
.anchor {
display: block;
height: 110px; /*same height as header*/
margin-top: -110px; /*same height as header*/
visibility: hidden;
}
.Div1 {
position: relative;
top: 6.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div2 {
position: relative;
top: 8.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div3 {
position: relative;
top: 10.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div4 {
position: relative;
top: 12.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div5 {
position: relative;
top: 14.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
.Div6 {
position: relative;
top: 16.5em;
margin: 0 auto;
box-shadow: 2px 2px 2px 2px #ebebeb;
padding-top: 5px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
background: #fff;
}
/* Side Divs */
.Div1-Side1 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: 20em;
left: 20em;
z-index: 10;
visibility: hidden;
}
.Div2-Side1 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: 1.2em;
left: 94.6em;
z-index: -1;
visibility: visible;
display: none;
}
.Div2-Side2 {
position: absolute;
height: 200px;
width: 180px;
padding-top: 10px;
padding-left: 15px;
background: #fff;
text-align: left;
box-shadow: 2px 2px 2px 2px #ebebeb;
bottom: -14.8em;
left: 94.6em;
z-index: -1;
visibility: visible;
display: none;
}
/* Side Div Content */
.Div2-Side1 span {
font-size: 10px;
}
.Div2-Side2 span {
font-size: 10px;
}
/* h3 Links */
.content p a:link, h3 a:link {
color: #888;
text-decoration: underline;
}
.content p a:visited, h3 a:visited {
color: #888;
text-decoration: none;
}
.content p a:active, h3 a:active {
color: #555;
text-decoration: none;
}
.content p a:hover, h3 a:hover {
color: #555;
}
#media screen and (max-width: 640px) {
.Div1-Side1 {
display: none;
visibility: hidden;
}
}
<div class="over-content">
<div class="Div1">
<span class="anchor" id="HOverview"></span>
<h2 class="over-h2">Overview</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div2">
<span class="anchor" id="HPoliChar"></span>
<h2 class="over-h2">Political Characters</h2>
<h4 class="char-names" id="Leo-Char">Leonard H. McCoy</h4>
<p>
Little is known about the life of Leonard McCoy before he entered politics, however, what we do know is that he is not fully human. He is a cyborg, and while some cyborgs age as humans do, the only part of Leonard McCoy that is human is his brain, which is constantly monitored and maintained by his many on-board systems, which keeps it in perfect condition.
</p>
<p>
From what we can gather, before he was a Cyborg he had a loving Wife and three children. From what\'s left of the reports, all we know is a tragedy befell them, and the only survivor was Leonard. After year\'s in a Hospital, the doctors realized the only part of him not dead or damaged was his brain. In what can only be considered the birth of a new race, they recreated his body with robotics and put his brain into it.
</p>
<p>
Now, many centuries later, He is still the President of the United Stars of Trekys. Unwilling to not continue to run for President, he has won the last elections dating back all the way to the fall of our dictatorship. For the last fifty years, he has run under his own third party and continuously wins!
</p>
<br>
<br>
<h4 class="char-names">Conrad K. Leopold</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div3">
<span class="anchor" id="HMiliChar"></span>
<h2 class="over-h2">Military Characters</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div4">
<span class="anchor" id="HMiscChar"></span>
<h2 class="over-h2">Misc. Characters</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae erat ipsum. Aenean eu cursus tortor, id laoreet diam. Donec sodales et ante eu varius. Praesent a risus eu tellus condimentum sagittis. Mauris volutpat elit mauris, vitae placerat tellus euismod sit amet. Duis at nibh vel magna condimentum mattis vitae sit amet metus. In laoreet convallis semper. Suspendisse viverra elit gravida felis interdum, nec aliquam orci efficitur.
<br>
</p>
</div>
<div class="Div1-Side1">
Test
</div>
<div class="Div2-Side1">
<img src="images/Leonard-McCoy.jpg" alt="Leonard H McCoy" height="135px" width="101.25">
<br>
<span>
<b>Age:</b> 675
<br>
<b>Race:</b> Cyborg
<br>
<b>Occupation:</b> President
</span>
</div>
<div class="Div2-Side2">
<img src="images/Leonard-McCoy.jpg" alt="Leonard H McCoy" height="135px" width="101.25">
<br>
<span>
<b>Age:</b> 65
<br>
<b>Race:</b> Human
<br>
<b>Occupation:</b> Vice-President
</span>
</div>
</div>
For fix them to the right side of the DIV they are next to, just set left: 100% to .Div2-Side1 and .Div2-Side2, also set position: relative to the content in your case .over-content, on the other hand if you don't want putting them into a container I'm afraid you have to vertical position it manually for example:
.Div2-Side1{
top: 800px;
}
.Div2-Side2{
top: 1040px;
}