[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Center text across multiple divs

Posted on 2008-01-30
6
Medium Priority
?
836 Views
Last Modified: 2012-05-05
I am having a problem centering text in a table header that uses divs to place a rounded corner image on the left side of the header and a gradient fade image on the right side of the header.  As the header expands or shrinks based on the user's browser width, this leaves a varying width between the images in which to place the header text.  I can center the header text within this varying amount of space, however, I want to center the text across the entire header width, including the width of both images.

For example, the left corner image is 14 px wide and the right gradient  image is 140px wide.  If the header width is 800px total, the header text is centered in the available 646px.  What I would like to do is center it in the entire 800px.

Any ideas?

CSS:

table.contentmodule {
      width:100%;
}
th.contentmodule {
      width:100%;
      padding: 0px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 11px;
      background-color: #cccccc;
}
.cmhleft {
      float: left;
      background-image: url(common/images/gray_corner_14.gif);
      background-repeat: no-repeat;
      width: 14px;
      height: 14px;
}
.cmhright {
      float:right;
      background-image: url(common/images/gray_gradient_140.gif);
      background-repeat: no-repeat;
      width: 140px;
      height: 14px;
}
.cmhtext {
      width: 100%;
      text-align: center;
}
td.contentmodule {
      width:100%;
      padding: 5px 5px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 11px;
}

HTML:

      <table class="contentmodule">
            <tr>
                  <th class="contentmodule">
                        <div class="cmhleft"></div><div class="cmhright"></div>Some Other Committee
                  </th>
            </tr>
            <tr>
                  <td class="contentmodule">
                        Some other committee information.....<br>
                        Some more other committee information.....<br>
                        Still more other more information.....<br>
                        <a href="#" class="contentmodule">A link.....</a><br>
                        <a href="#" class="contentmodule">Another link.....</a><br>
                        <a href="#" class="contentmodule">Yet another link.....</a>
                  </td>
            </tr>
      </table>

Thanks.

Alan Pollenz
0
Comment
Question by:alanpollenz
  • 3
  • 2
6 Comments
 
LVL 3

Expert Comment

by:prunckle
ID: 20777530
alan,

Will this work for your purposes?  Add:
.cmhtext2 {
      width: 100%;
      text-align: center;
	  z-index:1; 
}
 
and
 
            <tr>
                  <th class="contentmodule">
				        <div class="cmhtext2">Some Other Committee</div>
                        <div class="cmhleft"></div><div class="cmhright"></div>
                  </th>
            </tr>

Open in new window

0
 
LVL 5

Expert Comment

by:boro_bob
ID: 20777562
Have you tried adding a margin-right: 126px to your cmhleft class to effectivly make it the same size as your right hand image?
0
 

Author Comment

by:alanpollenz
ID: 20778003
prunckle,

Your solution effectively placed the header on two lines, they first being a full width box, background #cccccc, with centered text, the second being the desired background (corner, #cccccc center area, and gradient) without text.

boro_bob,

Your solution was partially effective, in that it provided the desired result, centering text, but effectively reduced the area available for the header text by 280 pixels. This then causes a problem when there are 2 columns in a relatively narrow display and the entire header might only be 400 - 500 px wide and the header text is more than about 10 characters.  In this case, it causes the header text to wrap.

In Firefox, the addition of white-space: nowrap; to th.contentmodule solved this by allowing the text to float over the cmhright div.  In IE, the entire block of text was pushed down to a second line in the header, and in Safari the result was to push the cmhright div into the next column to the right.

Alan
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 
LVL 5

Accepted Solution

by:
boro_bob earned 2000 total points
ID: 20778179
Here we go...

Delete your <div class="cmhright"></div> and just add the background image to your

th.contentmodule with 14px padding on the right like so:
th.contentmodule {
      width:100%;
      padding: 0px 14px 0px 0px;
      font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 11px;
      background-color: #cccccc;
      background-image: url(common/images/gray_gradient_140.gif);
      background-repeat: no-repeat;
      background-position: top right;
}

Open in new window

0
 

Author Closing Comment

by:alanpollenz
ID: 31426390
Thanks boro_bob.  You made life easy!

Alan
0
 
LVL 5

Expert Comment

by:boro_bob
ID: 20778552
Glad I could help
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…
Suggested Courses
Course of the Month7 days, 18 hours left to enroll

608 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