Creating a stylish CSS effect by adding a dashed border underneath two div elements

Looking for help with a layout where there are two tables side by side, represented by the blue boxes. The goal is to be able to select a row in each table and then click the red link button below. The connecting lines between the boxes and the link buttons should have a dashed border. The height of the blue boxes will vary.

Check out the fiddle here to see what I have so far.

<div class="container cf">
    <div class="link">
        <div class="linkButton">
            <input type="button" value="link" />
        </div>
    </div>

    <div class="tab table1">Table left </div>
    <div class="tab table2">Table right</div>
</div>

Struggling with centering the link button and concerned about the robustness of my HTML due to using negative positioning values. Any suggestions on improving the structure are appreciated. Keep in mind that I need to support IE7, which limits the use of pseudo elements like :before and :after.

htmlcss

Answer №1

Here's a simplified version where the tables are reorganized with the floating table first, eliminating the need for a clear fix.

<div class="tab table2">Table right</div>
<div class="tab table1">Table left</div>

Find the complete code/demo below.

.container {
    width: 500px;
    position: relative;
    margin-bottom: 70px;
}
.tab {
    background: #00395c;
    color: #fff;
    width: 200px;
    height: 100px; /*try a different height*/
}
.table2 {
    float: right;
}
.link {
    border: 2px dashed grey;
    border-top-width: 0;
    width: 300px;
    height: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -50px;
    margin-left: -150px;
}
.link input {
    position: relative;
    bottom: -40px;
}
<div class="container">
    <div class="link">
        <input type="button" value="link" />
    </div>
    <div class="tab table2">Table right</div>
    <div class="tab table1">Table left</div>
</div>
<div class="anotherDiv">This is another div</div>

JSFiddle Demo

Answer №2

To adjust the alignment of the button, simply switch the position value from absolute to relative:

.link input[type="button"] {position:relative; top:50px;}

http://example.com/jsfiddle123

Answer №3

To improve the layout, consider updating the CSS code as shown below:

.link input[type="button"] {
    margin-top: 50px;
}

Check out the updated code here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate an icon into an Angular Material input field

I want to enhance my input search bar by adding a search icon from Angular Material : <aside class="main-sidebar"> <section class="sidebar control-sidebar-dark" id="leftMenu"> <div> <md-tabs md-center-tabs id=" ...

javascripthtmlcssangularjsangular-material

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

phphtmlmagentoattributesmagento-1.9

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

htmlcss

ng-click-outside event triggers when clicking outside, including within child elements

I am looking to trigger a specific action when I click outside of the container. To achieve this, I have utilized the ng-click-outside directive which works well in most cases. However, there is one scenario where an issue arises. Inside the container, the ...

htmlangulartypescriptonclick

Issues arising when trying to generate HTML email content from a document

Looking to send an HTML email using Python, argparse, and the command line. I want to insert content from an HTML file directly into the email body rather than just attaching the file. So far, my attempts are only resulting in the HTML file being attache ...

pythonhtml

React: Issue with CSS heights in grid-container not updating when state changes

In a container div, I have three elements: headerContainer, diagramContainer, labelContainer. The container has a fixed height and I want all elements to fill it. The diagramContainer should adjust its height dynamically based on the labelContainer's ...

cssreactjscss-grid

Having trouble getting my AngularJS animations to work, hitting a roadblock

Here is the code I've put together for you to review, with no official purpose in mind. I just saved this code to use at a later time. <script> var apps = angular.module('myApp', ['ngAnimate']); //header apps.cont ...

angularjscssangularjs-animation

Dropbox menu within an extended webpage

I am looking to create a dropdown menu that behaves like the one on this website. The goal is for the dropdown to cover the entire webpage, hide the scroll bar, and "unmount" the other elements of the page, while still displaying them during the transition ...

javascriptjquerycssreactjsecmascript-6

An issue with the font display

I'm having trouble with a specific font on my webpage and jsfiddle, even though it works fine on w3schools website. Here's an example on jsfiddle HTML <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" ...

cssfonts

Unusual actions exhibited by a combination of JavaScript functions

Encountering an issue with a JavaScript file containing multiple functions causing strange behavior. The Logging.js file is responsible for writing to a text file: function WriteLog(message) { var fso = new ActiveXObject("Scripting.FileSystemObject") ...

javascripthtmlinternet-explorer

Looking to extract latitude and longitude data using an Autocomplete Address Form

I am currently attempting to utilize Google Maps autocomplete feature in order to save latitude and longitude. Unfortunately, I am encountering difficulties in making this functionality work as intended. Given that I am unfamiliar with the Google Maps API, ...

phphtmllaravelgoogle-maps

Utilizing React.js with Material-UI to retrieve data from a table row when clicked

I came across a code snippet for a material table that can handle lists as input and perform pagination, sorting, and filtering on them. The challenge I am facing is figuring out how to extract the data from a row click event and navigate to a new route al ...

htmlreactjsmaterial-uimaterial-design

What are some ways to ensure my web application appears correctly on Internet Explorer versions 8 and 9?

When I compare how my application looks in IE versus Chrome and Firefox, it seems like there are styling issues. I want to address this problem. I attempted to use the IE developer tool but couldn't find any options to customize styles and CSS. How d ...

cssinternet-explorercompatibility

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

Start a HTML 5 video and pause any others playing

On my webpage, I have a series of HTML5 videos listed, but I want to ensure that when one video is played, the others automatically stop or pause. The framework I am using is Angular 2 with TypeScript. <video controls (click)="toggleVideo()" #videoPla ...

htmlangulartypescriptangular2-template

Apply CSS styling to the entire element when hovering over its pseudo-element 'after'

I am working on a button/speech bubble design with a unique hover effect. Here is the current setup: https://i.stack.imgur.com/4OrpL.png Here is the code snippet for the button: <div value="GO" id="go-div" class="bubble"> <input type="submit ...

htmlcss

Creating a "Mark as Read" function using localStorage

Looking for a solution to persist the state of "Mark as Read" or "Mark as Unread" even after refreshing the page? Want to use localStorage to save this data? Here's an example of code snippet for toggling between these states: function readunread() { ...

javascripthtmlcsslocal-storage

Showing child elements within a div using AngularJS

I am eager to create a straightforward AngularJS website that will showcase an initially hidden HTML element along with all of its children. Below is the HTML structure snippet I plan to use: <div class="hiddenStuff"> <h3>Game Over</h3&g ...

javascripthtmlcssangularjs

How can I adjust the width of a handle/thumb for NoUiSlider?

Looking to adjust the width of a NoUiSlider using CSS: .noUi-horizontal .noUi-handle { width:8px; height:25px; left: 0px; top: -8px; border: 0px solid #000000; border-radius: 0px; background: #000; cursor: default; box- ...

javascriptcssnouislider