Databases
StackOverflow2013
Postsdbo
POHow do I interrupt a div's border with an image?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I interrupt a div's border with an image?
    primarykey
    data
    text
    <p>I have three responsively sized divs in a grid that need to have their border-top interrupted by an image. Once I've figured out how to interrupt the top border with an image, I'll do the same thing to the bottom border with a white square. Desired effect is shown in this screenshot: <a href="https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Practivate-mockup.png" rel="nofollow">https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Practivate-mockup.png</a></p> <p>However, the closest I've managed to get so far is this: <a href="https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Screen%20Shot%202013-10-07%20at%2012.30.32.png" rel="nofollow">https://ia601903.us.archive.org/20/items/ScreenShot20131007At12.30.32/Screen%20Shot%202013-10-07%20at%2012.30.32.png</a></p> <p>The problem is that absolute positioning breaks the flow of the page, which I could work around if everything was a fixed width, but as it's all responsive (built in Foundation 4) the widths are all unknown. Does anyone know how to do this without absolute positioning?</p> <p>Here's the code I'm using (inline style only there to make reading it easier on this website, not present in real code):</p> <pre><code>&lt;div class="row" id="about"&gt; &lt;div class="large-4 columns centered" id="entrepreneurs"&gt; &lt;div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative"&gt; &lt;img src="img/white/guitar.png" style="position: absolute; top: -89px;"&gt; &lt;h2 class="subheader"&gt; For entrepreneurs &lt;/h2&gt; &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Aenean pharetra sapien nec risus euismod mattis. Vestibulum volutpat tincidunt blandit. Curabitur dapibus ultrices arcu luctus condimentum. Morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor.&lt;/p&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="large-4 columns centered" id="corporates"&gt; &lt;div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative"&gt; &lt;img src="img/white/cloud.png" style="position: absolute; top: -89px"&gt; &lt;h2 class="subheader"&gt; For corporates &lt;/h2&gt; &lt;p&gt; consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est, nec vestibulum dolor. Suspendisse potenti. Vivamus egestas vestibulum ante egestas adipiscing. In hac habitasse platea dictumst. Etiam eros orci, bibendum ut ultricies quis, mollis ut dolor.&lt;/p&gt; &lt;/div&gt;&lt;/div&gt; &lt;div class="large-4 columns centered" id="results"&gt; &lt;div class="thickborder" style="padding-right:10px; padding-left: 10px; margin-top:20px; position:relative"&gt; &lt;img src="img/white/drinks.png" style="position: absolute; top: -89px"&gt; &lt;h2 class="subheader"&gt; For results &lt;/h2&gt; &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a venenatis quam, et sagittis quam. Aenean vehicula euismod ipsum, eget blandit libero auctor nec. Aenean pharetra sapien nec risus euismod mattis. Vestibulum volutpat tincidunt blandit. Curabitur dapibus ultrices arcu luctus condimentum. Morbi tellus nisi, accumsan sed hendrerit sit amet, mollis non sapien. Nulla eget purus ut nunc lacinia dignissim. Vestibulum feugiat porta cursus. Curabitur posuere mollis massa quis mollis. Suspendisse ac luctus est. &lt;/p&gt; &lt;/div&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Any thoughts much appreciated. This should be a question that's useful to more folks than just me - unless the problem here is that I'm new to this.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USWilf
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan you make us a JSFiddle with linked images?
      singulars
      1. POHow do I interrupt a div's border with an image?
      1. USPaulie_D
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload