huzefaq
asked on
how to put the text in the middle and little bigger
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;
}
.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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
koolie which td shold I use the valign
thanks
thanks
<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.