Solved

format div box

Posted on 2014-12-14
3
113 Views
Last Modified: 2014-12-29
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
Comment
Question by:jagguy
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40499473
so it looks more professional with some sort of  background
How so?
0
 

Author Comment

by:jagguy
ID: 40499806
I just need this to look better and is there an easy way to format the text without another div
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40500462
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question