Solved

how to put the text in the middle and little bigger

Posted on 2006-07-19
3
1,165 Views
Last Modified: 2010-05-18
I have this stylesheet code

.event .title & .event .date write text in a blue box
but the problem is that text shows up top aligned, but i need it to centered

Also the text is not clearly visible, what text or text size should I use to make it clearer
Thanks

------------------------------------------
.event {
      border: 0px
      padding: 5px ;
    width: 500px ;
   }

.event .title {
    width: 50% ;
      height: 20px;
      background-color: #52769A ;
      font-size: 10px;
      color: #FFFFFF;
      margin-bottom:0px;
   
    float: left ;
   }

.event .date {
    width: 50% ;
      height: 20px;
    background-color: #52769A ;
    text-align: right ;
    float: right ;
      font-size: 10px;
      color: #FFFFFF;
      margin-bottom:0px;
   }
0
Comment
Question by:huzefaq
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 5

Accepted Solution

by:
koolie earned 500 total points
ID: 17142903
for that you use vertical-align: middle;
also, if you use this in the html code itself, it's <td valign="middle">
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17149502
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">

.event {
  float: left;
  clear: left;
  width: 500px ;
  padding: 5px ;
  font-size: 100%;
  background-color: #52769A ;
  color: #FFFFFF;
}

.event .title {
  float: left ;
}

.event .date {
  float: right ;
}

</style>
</head>
<body>

  <div class="event">
    <div class="title">title 1</div>
    <div class="date">date 1</div>
  </div>

  <div class="event">
    <div class="title">title 2</div>
    <div class="date">date 2</div>
  </div>

</body>
</html>


To change the font size, change the "100%" in "font-size: 100%;" to some other value.
0
 

Author Comment

by:huzefaq
ID: 17194610
koolie which td shold I use the valign
thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

717 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