How to Offset a Css Border up and Left
We Have a Wordpress Sidebar Designed Like This: Note the Grey Border of the Large White Div Is Offset up and Left (Ignore the Same Effect on the Image Inside...
We have a Wordpress sidebar designed like this:
Note the grey border of the large white div is offset up and left (ignore the same effect on the image inside the white div please) - we want the border offset in our final design.
I've tried building this with HTML:
<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope="" itemtype="" id="genesis-sidebar-primary">
<h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2>
<section id="text-12" class="widget widget_text">
<div class="widget-wrap">
<div class="textwidget">
<p><img src="" alt="fully tiled pools Perth, Melbourne, Adelaide" title="fully tiled pools Perth, Melbourne, Adelaide"><img src="" alt="pool renovations Perth, Melbourne, Adelaide" title="pool renovations Perth, Melbourne, Adelaide"><img src="" alt="pool tiling Perth, Melbourne, Adelaide" title="pool tiling Perth, Melbourne, Adelaide"><img src="" alt="pool resurfacing Perth, Melbourne, Adelaide" title="pool resurfacing Perth, Melbourne, Adelaide"></p>
<p><a href="/gallery/"><img src="" alt="see our gallery" title="see our gallery"></a></p>
<ul class="aligncenter" id="social-icons">
<li><a href=""><img src="/wp-content/themes/genesis-sample/images/instagram.png" alt="Follow Amalfi Interiors on Instagram" title="Follow Amalfi Interiors on Instagram" data-pin-nopin="true"></a></li>
<li><a href=""><img src="/wp-content/themes/genesis-sample/images/facebook.png" alt="Follow Amalfi Interiors on Facebook" title="Follow Amalfi Interiors on Facebook" data-pin-nopin="true"></a></li>
<li><a href=""><img src="/wp-content/themes/genesis-sample/images/google.png" alt="Follow Amalfi Interiors on Google+" title="Follow Amalfi Interiors on Google+"></a></li>
<li><a href="mailto:"><img src="/wp-content/themes/genesis-sample/images/email.png" alt="Email Amalfi Interiors" title="Email Amalfi Interiors"></a></li>
</ul>
</div>
</div>
</section>
</aside>
and CSS:
.sidebar-primary {
float: right;
width: 20.5%;
margin-right: 2%;
position: relative;
z-index: 9999;
border: 4px solid #494242;
}
.sidebar-primary section {
margin: 4% -4% -4% 4%;
position: relative;
z-index: 9998;
opacity: 0.99;
}
However, on the live page the inner section covers the outer aside's border on the right and the bottom.
I've set a z-index for the aside (9999) and section (9998), and position: relative; but the issue remains.
Help appreciated.
2 Answers
Use this principle
* {
box-sizing: border-box;
}
.container {
height: 200px;
width: 200px;
position: relative;
background-color: red;
margin: 20px;
}
.inner {
width: 100%;
height: 100%;
position: absolute;
border: 2px solid black;
top: -10px;
left: -10px;
z-index: 10;
}<div class="container">
<div class="inner">
</div>
</div>For your page you need to find setion with class="text-12" and update it's code as follows
<section id="text-12" class="widget widget_text" style="border:none;padding:0;">
<div class="clearfix" style="border:none;position:relative;padding:40px;height:100%;">
<div class="border-set" style="border:4px solid black;position:absolute;width:100%;height:100%;top:-10px;left:-10px;z-index:10;">
</div>
<div class="widget-wrap">
<!--Rest of the code stays same-->
</div>
</div>
</section>
I used inline-css here and it is working but be careful when you shift inline css to your stylesheet
you have given margin to section to -4%; please change it to
.sidebar-primary section {
margin: 4% 4% 4% 4%;
}
i hope it'll help you
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
