6

I'm trying to get map tips to behave as shown below.

  • Light grey background with very thin white border
  • A box that adjusts to the content rather than a fixed width of say...300px
  • A centred title using h1 or h2
  • Name, company and email in bold with the details all inline with each other (dependant on the longest word in bold).
  • A small white space
  • More details in bold with information on the same line not in bold

I'm struggling with aligning [% "Client Name" %] etc to the longest input (shown as "COMPANY NAME") and keeping the bold and normal text on one line.

enter image description here

Current code used:

<style>
  body {background-color: lightgrey!important; text-size: 15px; text-style: bold;}
  h1 {text-align: center; text-style: underline;}
  h4 {width: 500px; margin-left: 20px;}
</style>
<h1> ASSET </h1>
<h4>NAME: [% "First Name" %]   [% "Surname" %] </h4>
<h4>COMPANY NAME:  [% "Company Na" %]</h4>

Progress Report: Transformed into table format

<style>

body {background-color: #dddddd!important; font-family: sans-serif;}

table {border-collapse: collapse;}

tr {border: 2px solid white;}

td {white-space: nowrap; padding: 5px;}

td.bold {font-weight: bold;}

td.gap {background-color:white;padding:1px;}

</style>


<table style="width:100%">
<th colspan=1><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td> [% "First Name" %] [% "Surname" %] </td></tr>
<tr><td class="bold">COMPANY NAME:</td><td> [% "Company Na" %] </td></tr>
<tr><td class="gap"></td><td class="gap"></td></tr>
<tr><td class="bold">MANAGEMENT DATE:</td><td>[% "Mangement" %]</td></tr>
</table>

enter image description here

  • 1
    Can you share your current HTML code? Are you using a <table>? – thibautg Sep 1 '17 at 10:53
  • This is tabular data, why don't you use tables? Makes it much easier. – pLumo Sep 1 '17 at 11:28
5

Use a table:

<table>
<th colspan=2><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td>[% "First Name" %]   [% "Surname" %]</td></tr>
<tr><td class="bold">COMPANY NAME:</td><td>[% "Company Na" %]</td></tr>
[...]
</table>
  • 1
    To keep your text on one line, you can also add td { white-space: nowrap; } in your stylesheet, or add it to your <td> element: <td style="white-space: nowrap"> – thibautg Sep 1 '17 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.