I have a footer on my website, but part of it is not visible. Here is my code for the footer right now:
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
#lang {
text-align: center;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<p id="lang">Learning HTML...</p>
<a href="1.html" class="arrows"><img class="arrows" src="https://s21.postimg.org/pkx22n03n/right-big-color.png"></a>
<a href="#" class="arrows"><img class="inactive arrows" src="https://s21.postimg.org/5c9ogx0sj/left-big-color.png"></a>
</div>Then, when I remove my <div id="lang">, I get this:
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<a href="1.html" class="arrows"><img class="arrows" src="https://s21.postimg.org/pkx22n03n/right-big-color.png"></a>
<a href="#" class="arrows"><img class="inactive arrows" src="https://s21.postimg.org/5c9ogx0sj/left-big-color.png"></a>
</div>Please can someone help me get the arrows and the <div id="lang"> showing at the same time. I couldn't find the answer anywhere. Also, could someone please tell me why there is a small gap at the left of my footer.
Thank you in advance.
Add a box-sizing:border-box property to #footer and position the position the element left:0
example
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
left: 0;
box-sizing: border-box;
border:solid red;
}
Snippet below
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
left: 0;
box-sizing: border-box;
border:solid red;
}
#lang {
text-align: center;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<p id="lang">Learning HTML...</p>
<a href="1.html" class="arrows"><img class="arrows" src="right-big-color.png"></a>
<a href="#" class="arrows"><img class="inactive arrows" src="left-big-color.png"></a>
</div>Image alignment solution
add an id left to your left image and an id right to your right image
and style as follows:
#left{
left:0
}
#right{
right:0;
}
Snippet below
.arrows {
height: 50px;
width: 50px;
float: right;
position: fixed;
visibility: visible;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: #736F6E;
box-shadow: 0 0 15px #00214B;
}
#left{
left:0
}
#right{
right:0;
}<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non lectus mauris. In vitae lectus dui. Nam suscipit lobortis ultrices. Vestibulum id massa nec diam feugiat mollis. Ut hendrerit, turpis sed imperdiet euismod, est libero varius sem, sed luctus odio metus non dui. In hac habitasse platea dictumst. Curabitur id metus faucibus, iaculis velit vitae, maximus nulla.
Sed lobortis, sem eu viverra pulvinar, sem ligula porta ante, et luctus mi massa eu nisi. Donec ultrices nisi et dolor vulputate, quis rhoncus lectus pellentesque. Pellentesque scelerisque augue ut sapien tempor sollicitudin. Suspendisse molestie maximus libero, vel dictum tortor ultrices et. Duis non eleifend lacus, nec accumsan eros. Duis mattis eget lorem eu rutrum. Curabitur leo velit, sollicitudin a cursus ullamcorper, vestibulum at dui.
Pellentesque ultricies lacus sed tortor lobortis, a semper ex rhoncus. Sed nisi sapien, viverra vehicula ipsum quis, finibus euismod diam. Sed at dapibus est, semper sollicitudin lectus. Pellentesque porta dapibus dolor, sed laoreet leo maximus consequat. Sed dolor urna, facilisis in laoreet eget, posuere vel libero. In dapibus non lorem at convallis. In nec sagittis odio. Vivamus tempor ipsum vitae venenatis vehicula.
Integer elit risus, rhoncus faucibus varius ac, laoreet vestibulum augue. Fusce porttitor turpis eget sollicitudin euismod. Quisque tempus interdum nisi, ac molestie ex finibus eu. Etiam a dictum orci. Donec et iaculis ligula. Fusce in sapien eget nibh finibus blandit ut non magna. Nullam a lacus sem. Nulla at diam sed lorem finibus efficitur. Donec condimentum erat ut eros consequat porta. In ante nisi, commodo sed urna eget, iaculis tincidunt metus. Quisque lacinia non sapien et feugiat. Cras vel aliquam sem. Aenean at varius neque, quis venenatis erat. Phasellus condimentum tellus diam, in vulputate nibh suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur feugiat consectetur scelerisque. Nunc elementum tempus porta. Aliquam at ligula tristique, sodales lectus eget, mollis sem. Suspendisse potenti. In vel lectus magna. Nulla et nunc consectetur risus dignissim maximus. Quisque quis ex in sapien convallis facilisis. Fusce ut molestie tellus, quis pharetra sapien.
</p>
<div id="footer">
<a href="1.html" class="arrows"><img class="arrows" id="left" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwbFPJ67pZUsR6fr-UuJUarUFsSSUcdkhyr2fPYgEQzV9qyBQt"></a>
<a href="#" class="arrows"><img id="right" class="inactive arrows" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQwbFPJ67pZUsR6fr-UuJUarUFsSSUcdkhyr2fPYgEQzV9qyBQt"></a>
</div>