Attach the css arrow to the top of a css border - css

This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>

Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}

Related

HTML table not aligning properly next to another table

I am trying to align my table2 to the right using the align="right" attribute of table, however, it's not exactly aligning next to the table1, as shown in the JSFiddle here. Instead it is getting aligned next to the Third Heading which I don't want.
I want table 1 and table 2 to be next to one another and then Heading 3 should come below it.
Another issue, I was trying to resolve is the position of the Heading 2 with the float:right as shown below. It's not going to extreme right.
.enc-data-table {
margin: 0 0 45px 0;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table">
<tr>
<th>Location:</th>
<td >A</td>
</tr>
<tr>
<th>Type:</th>
<td >B</td>
</tr>
<tr>
<th>Dates:</th>
<td >Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td >D</td>
</tr>
</table>
<table align= "right" class="enc-data-table">
<tr>
<th > Number:</th>
<td >1111</td>
</tr>
<tr>
<th >Plan Information:</th>
<td >1111</td>
</tr>
<tr>
<th >Date of service:</th>
<td >Today</td>
</tr>
<tr>
<th >Location Description:</th>
<td >USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />
Do you want something like this? To set the table alignment properly I recommend setting the th and td elements width separetely!
.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}
.enc-data-table {
margin: 0 0 45px 0;
width: 50%;
}
.enc-data-table th {
font-size: 12pt;
/*font-weight: 700;*/
padding: 0 5px 5px 0;
text-align: right;
}
.enc-data-table td {
font-size: 12pt;
padding: 0 0 5px 0;
}
h3 {
font-size: 20px;
}
h3 {
width: 50%;
height: 40px;
margin: 0;
padding: 0;
display: inline;
}
hr {
width: 100%
}
/*.enc-data-table th{
width:20%
}
.enc-data-table tr{
width:80%
}*/
<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
<tr>
<th>Location:</th>
<td>A</td>
</tr>
<tr>
<th>Type:</th>
<td>B</td>
</tr>
<tr>
<th>Dates:</th>
<td>Today</td>
</tr>
<tr>
<th>Reason for visit:</th>
<td>D</td>
</tr>
</table>
<table align="right" class="enc-data-table">
<tr>
<th> Number:</th>
<td>1111</td>
</tr>
<tr>
<th>Plan Information:</th>
<td>1111</td>
</tr>
<tr>
<th>Date of service:</th>
<td>Today</td>
</tr>
<tr>
<th>Location Description:</th>
<td>USA</td>
</tr>
</table>
<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />

CSS Line Dividor

I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:
https://imgur.com/a/LrSCg
I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.
Here's what I currently have that gets me everything except the middle dividing line:
<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;"></span></td>
</tr>
</table>
</div>
<hr>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold"></span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.
Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/
I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?
Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>

CSS transistions

I am making a table in CSS that will have some interesting animations on it. When clicking on the text field, it should expand, but in addition to this, it should make the button to the side of it move as well. Can anyone see an easy way of doing this? I've included the code here:
<html> <head> <title></title>
<style>
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
button.width:50%;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
}
</style>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1></td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px;"><input type="text" class="input1" placeholder="Enter name here..."></input></td>
</tr>
<tr>
<td style="padding-left:330px; padding-top:20px; padding-bottom:10px"><button class="button" style="padding: 8px">Submit score</button></td>
</tr>
</table>
</body>
</html>
If you can make the button go after the input (so that they are both siblings) you can use the general sibling selector: ~. The part you'd be interested in is:
input[type="text"]:focus ~ .button {
/* Your styles here */
}
This effectively selects: a .button that comes after a text field which is focused, and works as long as they're siblings (i.e. they are contained within the same element). So you can't have them wrapped in separate <td> tags.
This is of course, a pure CSS solution, so if they do have to be wrapped in separate tags, you'll need to use JS.
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
display: block;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
}
input[type=text]:focus + .button {
/* Whatever you want the button to do when the preceding input is focused */
min-width: 50%;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
min-width: 0;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
}
<html>
<head>
<title></title>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1>
</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px; display:block">
<input type="text" class="input1" placeholder="Enter name here..."></input>
<button class="button">Submit score</button>
</td>
</tr>
</table>
</body>
</html>

Draw blocks around form elements and add headings using CSS pseudo elements

I have the following html which is generated by a web framework so I can't change it. I can however add my own CSS.
<table border="0" class="formlayout" role="presentation">
<tbody>
<tr>
<td align="right">Medical Aid Plan</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Adult Medical Aid Dependants</td>
<td align="left"><input type="text"></td>
<td align="right">Child Medical Aid Dependants</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Total Package</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Pensionable Earnings</td>
<td align="left"><input type="text"></td>
<td align="right">Pensionable Earnings Percentage</td>
<td align="left"><input type="text"></td>
</tr>
<tr>
<td align="right">Voluntary Contributions</td>
<td align="left"><input type="text"></td>
<td align="right">Voluntary Contributions Percentage</td>
<td align="left"><input type="text"></td>
</tr>
</tbody>
</table>
I would like to create sections in the form and draw blocks around these sections , complete with text section headings. In order to achieve this I was thinking of adding additional space between the table rows and then adding CSS pseudo elements for the text and section frames. How would one do this?
I would like to add the first 3 text inputs to Section 1 and the rest to Section 2.
I'm trying to achieve something like this:
It can be done. But it only works with a fixed width layout (unless you use mediaqueries) and I don't know about browser compatibility.
It would be easier to set some padding and a background image.
Here is a jsfiddle: http://jsfiddle.net/L7y5rz9j/
table.formlayout {
width: 730px;
}
table.formlayout td {
position: relative;
z-index: 2;
}
table.formlayout tr:nth-child(1) td {
padding-top: 1em;
}
table.formlayout tr:nth-child(3) td {
padding-top: 3em;
}
table.formlayout tr:nth-child(1):after, table.formlayout tr:nth-child(3):after {
content:"";
position: absolute;
left: 0;
width: 750px;
border: 1px solid;
}
table.formlayout tr:nth-child(1):after {
height: 5em;
}
table.formlayout tr:nth-child(3):after {
height: 6em;
margin-top: 2em;
}
table.formlayout tr:first-child td:first-child:after, table.formlayout tr:nth-child(3) td:first-child:after {
position: absolute;
z-index: 1;
width: 3em;
padding: 2px 5px;
margin-left: 7em;
background: white;
}
table.formlayout tr:first-child td:first-child:after {
content:"Step 1";
top: -9px;
}
table.formlayout tr:nth-child(3) td:first-child:after {
content:"Step 2";
top: 23px;
}

Position a div absolutely inside a tr

I have a table which is used for showing excel-like data. I need to absolutely position two icons in the top center of each row--I want to show edit/delete icons when the use hovers the mouse over any row.
When I tried adding a relative position to the TR and an absolute positioning my inner floating div, the css disregarding the relative positioning of the parent td and simply floated to the top of the screen:
http://jsfiddle.net/85aTs/2/
HTML
<table>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
</tr>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
<div class="absolute">
I should be in a row
</div>
</tr>
</table>
CSS:
table, td{
border: 1px solid #000;
}
tr {
position:relative;
}
.absolute {
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
background-color: yellow;
}
I am aware that this is not valid html as it is currently setup, but how can I achieve what I want without switching over to divs with table display properties?
Here's what I would do:
See working jsFiddle demo
HTML
<table>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
table, td
{
border: 1px solid #000;
}
.icons
{
height: 16px;
text-align: center;
background: #bbb;
}
.checkmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://www.actuary.com/directory/template/default/images/icon_checkmark.gif');
}
.crossmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://researchautism.net/img/rating_icons/crossmark_sm.png');
}
RESULTS

Resources