Problem making an svg button fully clickable due to other objects nearby - html
First of, i have made a nearly identical question before, and the problem was fixed (at the time).
I'm making a buttons panel using multiple in-line svgs. All of them work perfectly and have been position just where i want them, but this has render my central (home) button parcially ineffective.
Basically, the top half works great and the bottom one is NOT clickable (i'd like to solve this).
The bounding box of another button runs through that area, though it is not visible. This is the same problem i fix before, by appliying a circle clip path to the home button, but for some reason this doesn't work anymore.
Below i leave a piece of html with the svgs and relevant divs. You'll also find my css data, which shows how was all positioned and what kind of clip paths are active.
PS: Sorry for long code, i'm new and don't know how much info you need.
#brand{
position: absolute;
clip-path: circle(50%);
}
#reserve{position: absolute;}
#services{margin: auto;}
#faq{margin: auto;}
#login{margin: auto;}
#destinies{margin: auto;}
#media screen and (min-width: 751px){
#wide-interface{
overflow: hidden;
white-space: nowrap;
letter-spacing: 5px;
text-align: center;
}
#brand{
width: 9.5%;
overflow: hidden;
top: 2.6%;
left: 0;
right: 0;
}
#reserve{
width: 83%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
top: 12%;
left: 0;
right: 0;
}
#faq{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: 1%
}
#header{padding-bottom: 5%;}
#login{
width: 20%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
#services{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-right: -3%;
}
#destinies{
width: 28%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
margin-left: -3%;
}
<div id="wide-interface">
<div id="top-buttons">
<div id="services">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 291.47 59.96"><defs>
<style>.cls-3{fill:#ffffff;}</style>
</defs><a xlink:href="services.html"><path class="cls-3" d="M0,0V42.09A17.81,17.81,0,0,0,17.81,59.91L258,60c1.27-23.16,12.07-42.66,33.48-59.9ZM76.15,37.75a7.42,7.42,0,0,1-3.22,2.5,13.09,13.09,0,0,1-5.22.94,19.78,19.78,0,0,1-5.06-.65,12.32,12.32,0,0,1-4-1.72l2-4.48A12.76,12.76,0,0,0,64,35.88a13,13,0,0,0,3.74.58c2.33,0,3.5-.58,3.5-1.75a1.46,1.46,0,0,0-1-1.37,18.22,18.22,0,0,0-3.2-.93A30.42,30.42,0,0,1,63,31.29a6.83,6.83,0,0,1-2.8-1.92A5.17,5.17,0,0,1,59,25.81a6.16,6.16,0,0,1,1.07-3.55,7.3,7.3,0,0,1,3.21-2.5,13.24,13.24,0,0,1,5.23-.92,18.27,18.27,0,0,1,4.17.48,13.13,13.13,0,0,1,3.63,1.39l-1.88,4.52a12.43,12.43,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.6,1.6,0,0,0,65,25.5a1.4,1.4,0,0,0,1,1.29,17.91,17.91,0,0,0,3.16.89,29.55,29.55,0,0,1,4.07,1.12A6.92,6.92,0,0,1,76,30.7a5.1,5.1,0,0,1,1.19,3.55A6,6,0,0,1,76.15,37.75Zm21.12,3H80V19.27H96.87V24H86v3.62h9.55v4.54H86v3.93H97.27Zm16.66,0L110,35.05h-3.31v5.71h-6.08V19.27h9.82a12.2,12.2,0,0,1,5.07,1A7.47,7.47,0,0,1,118.84,23,7.55,7.55,0,0,1,120,27.22a7.55,7.55,0,0,1-1.09,4.07A7.4,7.4,0,0,1,115.8,34l4.64,6.76Zm22,0h-6l-9.18-21.49h6.57l5.83,14,6-14h6Zm16.54,0H146.4V19.27h6.08Zm10.11-7.54a5.31,5.31,0,0,0,2.12,2.16,6.16,6.16,0,0,0,3.11.77,6.37,6.37,0,0,0,5.07-2.52l3.86,3.5a10.11,10.11,0,0,1-3.93,3,12.89,12.89,0,0,1-5.3,1,12.74,12.74,0,0,1-6.07-1.43,10.71,10.71,0,0,1-4.22-4A11,11,0,0,1,155.7,30a11,11,0,0,1,1.53-5.77,10.76,10.76,0,0,1,4.22-4,12.74,12.74,0,0,1,6.07-1.43,12.89,12.89,0,0,1,5.3,1.05,10.08,10.08,0,0,1,3.93,3l-3.86,3.5a6.36,6.36,0,0,0-5.07-2.51,6.26,6.26,0,0,0-3.11.76,5.34,5.34,0,0,0-2.12,2.17,7.22,7.22,0,0,0,0,6.41Zm34.11,7.54H179.45V19.27H196.3V24H185.47v3.62H195v4.54h-9.54v3.93H196.7Zm19.37-3a7.42,7.42,0,0,1-3.22,2.5,13.16,13.16,0,0,1-5.22.94,19.91,19.91,0,0,1-5.07-.65,12.51,12.51,0,0,1-4-1.72l2-4.48a12.84,12.84,0,0,0,3.34,1.54,13.06,13.06,0,0,0,3.75.58c2.33,0,3.5-.58,3.5-1.75a1.47,1.47,0,0,0-1-1.37,18.39,18.39,0,0,0-3.21-.93,31.31,31.31,0,0,1-4-1.12,6.87,6.87,0,0,1-2.79-1.92,5.18,5.18,0,0,1-1.17-3.56A6.17,6.17,0,0,1,200,22.26a7.21,7.21,0,0,1,3.2-2.5,13.32,13.32,0,0,1,5.24-.92,18.27,18.27,0,0,1,4.17.48,12.94,12.94,0,0,1,3.62,1.39l-1.87,4.52a12.46,12.46,0,0,0-5.95-1.66,5,5,0,0,0-2.64.54A1.58,1.58,0,0,0,205,25.5a1.38,1.38,0,0,0,1,1.29,17.65,17.65,0,0,0,3.16.89,30,30,0,0,1,4.07,1.12A7.06,7.06,0,0,1,216,30.7a5.09,5.09,0,0,1,1.18,3.55A6.1,6.1,0,0,1,216.07,37.75Z"/><path class="cls-3" d="M110.09,24.06h-3.37v6.29h3.37a4.28,4.28,0,0,0,2.83-.81,2.9,2.9,0,0,0,1-2.32,2.94,2.94,0,0,0-1-2.33A4.23,4.23,0,0,0,110.09,24.06Z"/></a></svg>
</div>
<div id="faq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-4{fill:#ffffff;}</style></defs><path class="cls-4" d="M124.63,27.62a6.49,6.49,0,0,0-.75-3.15,5.36,5.36,0,0,0-2-2.12,5.92,5.92,0,0,0-5.77,0,5.36,5.36,0,0,0-2,2.12,6.49,6.49,0,0,0-.75,3.15,6.42,6.42,0,0,0,.75,3.14,5.3,5.3,0,0,0,2,2.12,5.86,5.86,0,0,0,5.77,0,5.3,5.3,0,0,0,2-2.12A6.42,6.42,0,0,0,124.63,27.62Z"/><polygon class="cls-4" points="82.78 29.66 88.19 29.66 85.48 22.92 82.78 29.66"/><path class="cls-4" d="M35.82,0C14.44,17.22,1.3,36.68,0,59.79l155.46.11A63.86,63.86,0,0,1,209.09.8V0ZM63.88,21.69H53.32v4.63h9.3v4.61h-9.3v7.22h-6V17.09H63.88ZM71,37.46a3.59,3.59,0,0,1-4.89,0,3.5,3.5,0,0,1,0-4.88,3.72,3.72,0,0,1,4.92,0,3.57,3.57,0,0,1,0,4.88Zm20.62.69-1.65-4.09H81l-1.65,4.09H73.3l9.3-21.06h5.86l9.33,21.06ZM105,37.46a3.59,3.59,0,0,1-4.89,0,3.53,3.53,0,0,1,0-4.88,3.44,3.44,0,0,1,2.46-.93,3.39,3.39,0,0,1,2.46.93A3.24,3.24,0,0,1,106,35,3.29,3.29,0,0,1,105,37.46Zm24.16,5.1a8.08,8.08,0,0,1-3.32.68,9.62,9.62,0,0,1-6-1.94,25.31,25.31,0,0,1-3.2-2.91,11.68,11.68,0,0,1-4.88-2,10.55,10.55,0,0,1-3.32-3.8,10.75,10.75,0,0,1,4.51-14.56,13.49,13.49,0,0,1,12,0,10.54,10.54,0,0,1,5.7,9.54,10.57,10.57,0,0,1-7.16,10.17,3.84,3.84,0,0,0,1.19.93A3,3,0,0,0,126,39a4.35,4.35,0,0,0,3.19-1.47l2.58,3.07A6.9,6.9,0,0,1,129.16,42.56Z"/></svg>
</div>
<div id="login">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.09 59.79"><defs><style>.cls-5{fill:#ffffff;}</style></defs><path class="cls-5" d="M97.83,24.58a6,6,0,0,0-5.89,0,5.57,5.57,0,0,0-2.09,2.16,7.16,7.16,0,0,0,0,6.42,5.57,5.57,0,0,0,2.09,2.16,6,6,0,0,0,5.89,0,5.5,5.5,0,0,0,2.09-2.16,7.08,7.08,0,0,0,0-6.42A5.5,5.5,0,0,0,97.83,24.58Z"/><path class="cls-5" d="M173.27,0H0V.8A63.85,63.85,0,0,1,53.63,59.9l155.46-.11C207.8,36.68,194.65,17.22,173.27,0ZM82,40.69H65.67V19.21h6.08V35.87H82Zm23.28-5a10.87,10.87,0,0,1-4.27,4,13.75,13.75,0,0,1-12.25,0A10.76,10.76,0,0,1,83,30a10.76,10.76,0,0,1,5.81-9.73,13.75,13.75,0,0,1,12.25,0,11.16,11.16,0,0,1,4.27,15.47Zm10.54-2.56A5.56,5.56,0,0,0,118,35.31a6.3,6.3,0,0,0,3.16.78,7.77,7.77,0,0,0,3.28-.71V29.49h5.37v8.9a13.94,13.94,0,0,1-4.23,2,16.88,16.88,0,0,1-4.79.7,12.72,12.72,0,0,1-6.08-1.43,10.58,10.58,0,0,1-4.23-4A11,11,0,0,1,108.91,30a11,11,0,0,1,1.54-5.77,10.54,10.54,0,0,1,4.26-4,13.14,13.14,0,0,1,6.17-1.43,13.79,13.79,0,0,1,5.4,1,10.4,10.4,0,0,1,4,2.92l-3.86,3.5a6.82,6.82,0,0,0-5.22-2.4A5.79,5.79,0,0,0,115.05,30,6.51,6.51,0,0,0,115.82,33.13Zm32.84,7.56h-6.08V19.21h6.08Zm24.76,0h-5l-9.48-11.44V40.69h-6V19.21h5l9.48,11.45V19.21h5.95Z"/></svg>
</div>
<div id="destinies">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.47 59.84"><defs><style>.cls-6{fill:#ffffff;}</style></defs><path class="cls-6" d="M79.37,24H75.53V35.78h3.84a6.2,6.2,0,0,0,4.43-1.57,5.63,5.63,0,0,0,1.67-4.32,5.66,5.66,0,0,0-1.67-4.33A6.24,6.24,0,0,0,79.37,24Z"/><path class="cls-6" d="M0,0C21.41,17.25,32.22,36.75,33.49,59.9l240.17-.11A17.83,17.83,0,0,0,291.47,42V-.13ZM90.11,35.57a10,10,0,0,1-4.24,3.74,14.22,14.22,0,0,1-6.26,1.32H69.45V19.15H79.61a14.22,14.22,0,0,1,6.26,1.32,10,10,0,0,1,4.24,3.74,10.58,10.58,0,0,1,1.5,5.68A10.58,10.58,0,0,1,90.11,35.57Zm21.94,5.06H94.8V19.15h16.85v4.69H100.82v3.62h9.54V32h-9.54v3.92h11.23Zm19.37-3a7.25,7.25,0,0,1-3.23,2.5,12.9,12.9,0,0,1-5.21.94,19.91,19.91,0,0,1-5.07-.65,12.74,12.74,0,0,1-4-1.71l2-4.49A13.46,13.46,0,0,0,123,36.33c2.33,0,3.5-.58,3.5-1.75a1.45,1.45,0,0,0-1-1.36,18.49,18.49,0,0,0-3.21-.94,30.42,30.42,0,0,1-4-1.12,6.8,6.8,0,0,1-2.79-1.92,5.16,5.16,0,0,1-1.17-3.56,6.12,6.12,0,0,1,1.08-3.54,7.07,7.07,0,0,1,3.2-2.5,13.09,13.09,0,0,1,5.23-.92,18.29,18.29,0,0,1,4.18.47,12.65,12.65,0,0,1,3.62,1.4l-1.87,4.51a12.47,12.47,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.61,1.61,0,0,0-.82,1.4,1.38,1.38,0,0,0,1,1.29,17.82,17.82,0,0,0,3.16.88,29.81,29.81,0,0,1,4.07,1.13,7,7,0,0,1,2.79,1.9,5.06,5.06,0,0,1,1.18,3.54A6.08,6.08,0,0,1,131.42,37.62ZM152.19,24h-6.56V40.63h-6.08V24H133V19.15h19.24Zm8.35,16.67h-6.08V19.15h6.08Zm24.77,0h-5l-9.48-11.45V40.63h-5.95V19.15h5l9.48,11.44V19.15h6Zm10.37,0H189.6V19.15h6.08Zm21.58,0H200V19.15h16.85v4.69H206v3.62h9.55V32H206v3.92h11.24Zm19.36-3a7.22,7.22,0,0,1-3.22,2.5,12.92,12.92,0,0,1-5.22.94,19.83,19.83,0,0,1-5.06-.65,12.54,12.54,0,0,1-4-1.71l2-4.49a13.53,13.53,0,0,0,7.09,2.12c2.34,0,3.5-.58,3.5-1.75a1.44,1.44,0,0,0-1-1.36,18,18,0,0,0-3.2-.94,30.42,30.42,0,0,1-4-1.12,6.83,6.83,0,0,1-2.8-1.92,5.21,5.21,0,0,1-1.16-3.56,6.11,6.11,0,0,1,1.07-3.54,7.16,7.16,0,0,1,3.21-2.5,13.06,13.06,0,0,1,5.23-.92,18.26,18.26,0,0,1,4.17.47,12.71,12.71,0,0,1,3.63,1.4l-1.88,4.51a12.43,12.43,0,0,0-6-1.66,5,5,0,0,0-2.64.54,1.62,1.62,0,0,0-.83,1.4,1.4,1.4,0,0,0,1,1.29,18,18,0,0,0,3.17.88,29.63,29.63,0,0,1,4.06,1.13,6.82,6.82,0,0,1,2.79,1.9,5.07,5.07,0,0,1,1.19,3.54A6,6,0,0,1,236.62,37.62Z"/></svg>
</div>
</div>
<div id="brand">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 106 106"><defs>
<style>.cls-1{fill:#ffffff;}</style>
</defs><a xlink:href="index.html"><path class="cls-1" d="M67.78,52.28a5.58,5.58,0,0,0-6,0,6,6,0,0,0-2.11,2.45,9.11,9.11,0,0,0,0,7.42,6,6,0,0,0,2.11,2.45,5.58,5.58,0,0,0,6,0,6.05,6.05,0,0,0,2.11-2.45,9.11,9.11,0,0,0,0-7.42A6.05,6.05,0,0,0,67.78,52.28Z"/><path class="cls-1" d="M53,0a53,53,0,1,0,53,53A53.06,53.06,0,0,0,53,0ZM77.67,78.67a10,10,0,0,1-4.3.91A13.53,13.53,0,0,1,69.14,79a12.7,12.7,0,0,1-3.74-2.09,34.09,34.09,0,0,1-4.26-4.15A13.74,13.74,0,0,1,55.34,70a14.09,14.09,0,0,1-3.91-5A15,15,0,0,1,50,58.44L50,45.66,43.86,55.92H39.69L33.61,46.1V58.44H25v-28h7.77L41.9,45.34,50.79,30.4h7.77L58.6,45a15.72,15.72,0,0,1,6.2-1.21,15.38,15.38,0,0,1,7.6,1.88,13.68,13.68,0,0,1,5.27,5.24,15,15,0,0,1,1.91,7.56A14.78,14.78,0,0,1,77.3,66.6a13.64,13.64,0,0,1-6.17,5.24,3.52,3.52,0,0,0,1.14.9,3.13,3.13,0,0,0,1.29.26,4.94,4.94,0,0,0,3.63-1.81L81,76A9,9,0,0,1,77.67,78.67Z"/></a></svg>
</div>
<div id="reserve">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 944.38 115.07">
<defs><style>.cls-2{fill:#ff7800;}</style></defs>
<a xlink:href="reserve.html"><path class="cls-2" d="M494.41,80.8h-3.78v7h3.78a4.7,4.7,0,0,0,3.15-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.65,4.65,0,0,0,494.41,80.8Z"/><path class="cls-2" d="M400.62,80.8h-3.77v7h3.77a4.73,4.73,0,0,0,3.16-.91,3.23,3.23,0,0,0,1.07-2.59,3.27,3.27,0,0,0-1.07-2.61A4.68,4.68,0,0,0,400.62,80.8Z"/><path class="cls-2" d="M940.67,10a55.59,55.59,0,0,0,3.71-10H535.66A63.67,63.67,0,0,1,474,59.85h-3.54A63.67,63.67,0,0,1,408.72,0H0A55.59,55.59,0,0,0,3.71,10H364.28V20H9.42a68.63,68.63,0,0,0,8.32,10H364.28V40H30.75C40.78,45.88,53.9,50,71,50H364.29V98.82a16.24,16.24,0,0,0,16.25,16.25h183.3A16.25,16.25,0,0,0,580.1,98.82V50H873.4c17.08,0,30.2-4.12,40.23-10H580.1V30H926.64A68.52,68.52,0,0,0,935,20H580.1V10ZM404.92,99.48l-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.75,8.75,0,0,1,3.8,12.37,8.38,8.38,0,0,1-3.49,3l5.19,7.55Zm29.84,0h-19.3v-24h18.85V80.7H422.19v4h10.68v5.08H422.19v4.4h12.57Zm21.67-3.36a8.25,8.25,0,0,1-3.61,2.79,14.55,14.55,0,0,1-5.84,1,22.23,22.23,0,0,1-5.66-.72,14,14,0,0,1-4.47-1.92l2.23-5A14.38,14.38,0,0,0,442.83,94a14.06,14.06,0,0,0,4.19.65c2.61,0,3.91-.65,3.91-2a1.62,1.62,0,0,0-1.11-1.53,21.14,21.14,0,0,0-3.59-1,35.84,35.84,0,0,1-4.54-1.25,7.63,7.63,0,0,1-3.12-2.15,5.79,5.79,0,0,1-1.31-4,6.84,6.84,0,0,1,1.21-4,8,8,0,0,1,3.59-2.8,14.69,14.69,0,0,1,5.85-1,20.9,20.9,0,0,1,4.67.53,14.31,14.31,0,0,1,4.05,1.57l-2.09,5a14.06,14.06,0,0,0-6.66-1.85,5.63,5.63,0,0,0-3,.6,1.79,1.79,0,0,0-.92,1.56,1.55,1.55,0,0,0,1.09,1.45,20.1,20.1,0,0,0,3.54,1,34.24,34.24,0,0,1,4.55,1.25,8,8,0,0,1,3.13,2.13,5.72,5.72,0,0,1,1.32,4A6.8,6.8,0,0,1,456.43,96.12Zm23.62,3.36h-19.3v-24h18.86V80.7H467.48v4h10.68v5.08H467.48v4.4h12.57Zm18.65,0-4.36-6.39h-3.71v6.39h-6.8v-24h11a13.71,13.71,0,0,1,5.66,1.08,8.42,8.42,0,0,1,3.71,3.09,8.5,8.5,0,0,1,1.31,4.73,8.41,8.41,0,0,1-1.22,4.55,8.32,8.32,0,0,1-3.49,3L506,99.48Zm24.62,0h-6.7l-10.26-24h7.34l6.53,15.66,6.66-15.66h6.73Zm31,0H535v-24h18.85V80.7H541.76v4h10.68v5.08H541.76v4.4h12.57Z"/></a></svg>
</div>
</div>
Related
Struggling to make image heights match css and html
I am using a template and editing it. I am trying to make the image on the left match the height and width of the image on the right at any viewport size, but I can't work out how to do it
The image on the right is a before/after slider.
I am unable to use percentage for the height of the image on the left and I'm not sure why.
I googled and it seems I need a container element with a height of 100% to use percentage height.
I tried that but it seemed to break things further
As you can see in the image, this container element has pushed the image down and i can't figure out why.
The section that i have highlighted in red is the container i added, as you can see there is no gap between the image and the top of this
if i look at the container above that, you can see that there is a gap between the top and the image
But the padding is zero, and the margin is zero.
So i can't figure out why there is the gap
Now looking at it maybe it's because of the rest of the image that stretches out of the image element behind? but why would that happen?
Below is the code without the extra container element that pushed the image down.
This is the html for the slider:
<div class="col-6 col-12-narrower">
<!-- My html edit 001 -->
<span id="testbox">
<div class="containerBA4">
<div class="image-container4">
<img
class="image-before4 slider-image4"
src="/images/conservatoryBefore.jpg"
alt="before"
/>
<img
class="image-after4 slider-image4"
src="/images/conservatoryAfter.jpg"
alt="after"
/>
</div>
<!-- step="10" -->
<input
id = 'input1'
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="slider4"
/>
<div class="slider-line4" aria-hidden="true"></div>
<div class="slider-button4" aria-hidden="true">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
viewBox="0 0 256 256"
>
<rect width="256" height="256" fill="none"></rect>
<line
x1="128"
y1="40"
x2="128"
y2="216"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<line
x1="96"
y1="128"
x2="16"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="48 160 16 128 48 96"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
<line
x1="160"
y1="128"
x2="240"
y2="128"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></line>
<polyline
points="208 96 240 128 208 160"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
></polyline>
</svg>
</div>
</div>
</span>
<section class="box special">
<h3>Accumsan integer</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions special">
<li>Learn More</li>
</ul>
</section>
</div>
This is the CSS for the slider:
.containerBA4 {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: 50%;
}
.image-container4 {
max-width: 800px;
max-height: 90vh;
/* aspect-ratio: 1/1; */
}
.slider-image4 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before4 {
position: absolute;
inset: 0;
width: var(--position);
/* filter: grayscale(100%) */
}
.slider4 {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
/* for Firefox */
width: 100%;
height: 100%;
}
.slider4:focus-visible ~ .slider-button4 {
outline: 5px solid black;
outline-offset: 3px;
}
.slider-line4 {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
/* z-index: 10; */
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button4 {
position: absolute;
background-color: #fff;
color: black;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%);
pointer-events: none;
/* z-index: 100; */
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
This is the html for the image including the original container element:
<div id="lockWrapWrapWrap" class="col-6 col-12-narrower">
<!-- My html edit 004 - add slider 3 -->
<section id="lockWrapWrap" class="box special">
<!-- <section id="lockWrap"> -->
<span id="lockImage" class="image featured"><img src="images/lock_handle.jpg" alt="" /></span>
And for the CSS im not sure what to include because the template is quite large and with all the classes its not so clear what relates to what and what is relevant.
This was some of the CSS i tried to add in order to get it working:
#lockImage {
display: block;
/* max-width: 100%; */
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
/* max-width: 800px; */
max-height: 50%;
}
Thanks for any help and if there is any way i could ask this question clearer or more concisely please let me know.
How can I make an <svg> element scale to a parent element's height?
I have an <svg> element within a wrapping element.
I want the <svg> to fill the height of the wrapping element, however I cannot seem to get this to work.
I have tried the following:
.image-banner__overlay {
height: 90%;
position: absolute;
z-index: 999;
}
svg {
height: 100%;
background-color: black;
}
path {
fill: red;
height: 100%;
}
<div class="cell small-12 medium-6 image-banner__image-wrapper">
<div class="image-banner__overlay">
<svg>
<path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
</svg>
</div>
<div class="image-banner__image" style="#backgroundImage">
</div>
</div>
But the <svg> seems to only ever take up a max of about 75% of the space, eg:
I've tried using viewBox, eg:
height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"
But this makes the SVG way too big (overflows the parent element).
Would anyone know how I could get this to stretch the complete height of the parent element (without turning it into an <img>)?
Here's a viewbox for you, I know it's horrible but you should read up on it!
.image-banner__overlay {
height: 90%;
position: absolute;
z-index: 999;
}
svg {
height: 100%;
background-color: black;
}
path {
fill: red;
height: 100%;
}
<div class="cell small-12 medium-6 image-banner__image-wrapper">
<div class="image-banner__overlay">
<svg viewbox="0 0 80 250">
<path d="M91.91,125c0-50.63,10.58-95.75,27.07-125H69.22V250H119C102.49,220.75,91.91,175.63,91.91,125Z" transform="translate(-69.22)" />
</svg>
</div>
<div class="image-banner__image" style="#backgroundImage">
</div>
</div>
Positioning buttons and a logo to be spaced out equally
I am trying to create a header that has a logo in the centre and two buttons either side of it. I want the buttons and the logo to be evenly spaced horizontally and then in the centre of vertical space.
The image below is what I have so far, the pink is just so I can see what the header is doing.
This is my HTML:
<body>
<div id="container">
<header>
<div id="nav_left">
<button class="nav_button">About Me</button>
<button class="nav_button">Case Studies</button>
</div>
<div id="logo">
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 513 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.16129,0,0,1.16129,-210.521,-117.321)">
<path d="M381.924,101.027L301.667,101.027C301.667,101.027 221.281,100.584 221.411,181.284C221.54,261.984 221.411,301.669 221.411,301.669C221.411,301.669 221.825,381.773 301.667,381.926C381.51,382.078 261.539,381.926 261.539,381.926C261.539,381.926 181.26,381.643 181.282,462.182C181.304,542.722 181.282,622.696 181.282,622.696C181.282,622.696 180.9,702.907 261.539,702.952C342.178,702.998 381.924,702.952 381.924,702.952L381.924,622.696L301.667,622.696C301.667,622.696 261.724,622.03 261.539,582.567C261.354,543.104 261.539,502.311 261.539,502.311C261.539,502.311 261.628,462.192 301.667,462.182C341.707,462.173 381.924,462.182 381.924,462.182L381.924,301.669L341.796,301.669C341.796,301.669 301.478,300.882 301.667,261.541C301.857,222.2 301.667,221.412 301.667,221.412C301.667,221.412 302.065,181.256 341.796,181.284C381.526,181.312 381.924,181.284 381.924,181.284L381.924,101.027L381.924,101.027Z" style="fill:rgb(60,122,190);" />
<path d="M422.052,101.027L502.309,101.027C502.309,101.027 582.289,101.974 582.566,181.284C582.842,260.595 582.566,301.669 582.566,301.669C582.566,301.669 581.877,381.579 502.309,381.926C422.741,382.273 542.437,381.926 542.437,381.926C542.437,381.926 622.641,383.525 622.694,462.182C622.747,540.84 622.694,702.952 622.694,702.952L542.437,702.952L542.437,502.311C542.437,502.311 541.684,461.99 502.309,462.182C462.934,462.375 422.052,462.182 422.052,462.182L422.052,301.669L462.181,301.669C462.181,301.669 501.568,300.956 502.309,261.541C503.05,222.126 502.309,221.412 502.309,221.412C502.309,221.412 501.63,181.454 462.181,181.284C422.731,181.114 422.052,181.284 422.052,181.284L422.052,101.027L422.052,101.027Z" style="fill:rgb(60,122,190);" />
</g>
</svg>
</div>
<div id="nav_right">
<button class="nav_button">Contact Me</button>
<button class="nav_button">Other</button>
</div>
</header>
</div>
</body>
This is my CSS:
body {
margin: 0;
}
#container {
width: 100%;
margin: 0;
}
header {
width: 100%;
background-color: pink;
}
#logo {
height: 250px;
width: 250px;
margin: auto;
border: 0px;
padding: 0px;
}
#nav_left {
float: left;
}
#nav_right {
float: right;
}
.nav_button {
width: 150px;
float: left;
margin-left: 5%;
margin-top: 25%;
margin-bottom: 25%;
position: inherit;
}
If I get it correctly (you need 5 evenly wide collmns) you can use either bootstrap or the Flexbox. Make a row direction and grow of 1 so they are evenly wide. Then place your elements into each of it and style it so they appear in the center of the column.
To do this easily you could make your #logo have display: inline-block;, then put text-align: center; on your header to center the logo (you might want to add text-align: left; in your floating nav containers to set their text back to normal). See demo here (fixed.... link was wrong before) And if you wanted to use flexbox, you could simply add display: flex; and justify-content: space-between; to your header styles. Just note with flexbox that it might not be supported on older IE's and on some iOS versions See demo here
Fixed SVG height & variable (100%) width
I'm trying to put a svg object on my html page and I want it to have a 100% width and a fixed height.
In my fiddle you can see that the height of the dark-grey object changes according to the window proportions. (This is not what I want)
http://jsfiddle.net/Lq207ery/6/
HTML
<body>
<!-- HEADER -->
<header>
<div class="logo"></div>
<div class="triangle">
<svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
<g>
<!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
<polyline fill="#CC0000" points="0,0 0,200 300,0 "></polyline>
</g>
</svg>
</div>
<div class="nav">
<svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
<polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
</svg>
</div>
</header>
<!-- CONTENT -->
CSS
body {
margin: 0;
}
header svg {
display: block;
margin: 0;
}
header .triangle {
z-index: 200;
}
header .logo {
margin-top: -90px;
}
header .nav {
position: absolute;
top:0;
left:0;
width:100%;
z-index:-1;
}
Give your SVG element a fixed height. If you do not do this the height of the element will change proportional to the width. Adjust your viewBox to crop to the height of your content. Fix your preserveAspectRatio value to have the proper case-sensitive value, e.g. xMinYMin (not xMinYmin). Demo: http://jsfiddle.net/Lq207ery/8/ If you want your dark grey triangle to stretch (not preserving its aspect ratio) then instead use preserveAspectRatio="none". Demo: http://jsfiddle.net/Lq207ery/9/
You explanation is somewhat short, but you could do it like this :
HTML Code :
<header>
<div class="triangle">
<svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
<g>
<polyline fill="#CC0000" points="0,0 0,200 300,0"/>
</g>
</svg>
</div>
<div class="nav"></div>
</header>
CSS Code :
html, body {
margin: 0;
}
header {
position: relative;
}
header .triangle {
position: relative;
z-index: 2;
}
header .nav {
position: absolute;
top:0;
left:0;
width: 2000px; // big screens
height: 100px;
background-image:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22150px%22%20height%3D%2215px%22%20viewBox%3D%220%200%20150%2015%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23222%22%20points%3D%220%2C15%200%2C0%20100%2C0%20150%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: cover;
background-position: bottom left;
z-index: 1;
}
SVG before url encoding :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="15px" viewBox="0 0 150 15">
<g>
<polygon fill="#222" points="0,15 0,0 100,0 150,0"/>
</g>
</svg>
Demo : http://jsfiddle.net/sparkup/21uaffpy/
Or line this maybe : http://jsfiddle.net/sparkup/21uaffpy/18/
In addition I'd like to add If the svg has the viewBox and preserveAspectRatio all set, another place possibility is to use a container div and font-size something like: <div style="height: 50px; width: 50px; fontSize: 50px"> <svg>...</svg> </div>
How to force this div to span the height of viewport?
This jsFiddle shows the problem. I have not managed to prevent the div0 div from "collapsing" its top margin with that of its sibling, div1. (HTML below.) I want div0 to span the entire viewport vertically, and the red rect inside it to appear flush against the top left corner of the viewport. (The placement of div1 and its contents is exactly as desired, and should not be changed in any way.) I have tried to disable the collapsing of margins by putting borders around both div0 and div1, but, as the jsFiddle shows, this has made no difference. Here's the relevant HTML: <!doctype html> <body> <div id="div0"> <svg id="svg0" width="50px" height="50px"> <g> <rect x="0px" y="0px" width="50px" height="50px" style="fill:red;"></rect> </g> </svg> </div> <div id="div1"> <div id="div2"> <svg id="svg1" width="100px" height="100px"></svg> </div> </div>
Here is a solution for you. I added a .wrapper class, with a absolute position, to contain the elements and maintain elasticity in your document. I also added overflow: hidden to your div0 id to prevent the red svg rect from flowing outside of that containing div.
Here is an updated >>>JSFiddle<<<
HTML:
<div class="wrapper">
<div id="div0">
<svg id="svg0" width="50px" height="50px">
<g>
<rect x="0" y="0" width="50px" height="50px"></rect>
</g>
</svg>
</div>
<div id="div1">
<div id="div2">
<svg id="svg1" width="100px" height="100px"></svg>
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
border: 1px solid blue;
}
#div0 {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background-color: yellow;
border: 1px solid blue;
overflow: hidden;
}
#div1 {
margin-top: 20px;
border: 1px solid green;
background: lightgray;
min-height: 27px;
display: -webkit-flex;
display: flex;
}
#div2 {
background: black;
margin: 0px auto;
}
rect {
fill: red;
}
#div0 {
height:100vh;
}
You can use the vh for viewport height.
OK, I found the solution: comment out the position:relative in the CSS for body. This is illustrated in this revision of the original fiddle. Notice that the only difference between this and the original fiddle is the commented-out line just mentioned. (I'm ashamed to say that I found this solution by blind trial-and-error; I have no idea of why the new version works and the original one didn't.)