Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 124
  • Last Modified:

format div box

HI, I want to format text inside the div so it looks more professional with some sort of  background,
In CSS do I need to add further div for each of the text outputs? I a using php to display some data.
I am after a css solution.

 <div class="dashbox">
           <div  class="dashhead">
               Income
           </div>
           
            <?php echo 'Timesheet Income';
             echo '<br><br>Current Pay Period'. $ test;
             echo '<br>Last Pay period';
            echo '<br><br>Fortnight';
             echo '<br>Month';
           
            ?>
        </div>


.dashbox {
    height:300px;
    width:300px;
    border:1px solid blue;
   
   
}
0
jagguy
Asked:
jagguy
1 Solution
 
GaryCommented:
so it looks more professional with some sort of  background
How so?
0
 
jagguyAuthor Commented:
I just need this to look better and is there an easy way to format the text without another div
0
 
Chris StanyonCommented:
That's a very subjective question because what looks good to one person looks awful to another. Having said that, CSS is only responsible for styling the content, so getting your content right is the first step. You look like you about to catch DIVitis! Don't forget, you can style all the HTML tags, not just DIVs:

Have a look at this:

<div class="dashbox">
   <h1>Income</h1>
   <dl>
      <dt>Timesheet Income</dt>
      <dd>Current Pay Period: <?php echo $test ?></dd>
      <dd>Last Pay Period: </dd>
      <dd>Fortnight: </dd>
      <dd>Month: </dd>
   </dl>
</div>

Open in new window


Now you can use CSS to style the elements exactly as you like:

.dashbox { height:300px; width:300px; border:1px solid blue; }
.dashbox h1 { color: red; margin-bottom: 1em; font-size: 2em; }
.dashbox dt { font-weight:bold; color: green; font-size: 1.2em; }
.dashbox dd { font-style: italic; }

Open in new window

0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now