Member Avatar for tqmd1

I am using following codes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
   transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>My Contacts</title>
      <style type="text/css">
         html {
         overflow:auto;
         }
         body{
         background-color:#e7f4fe;
         }
         #container {
         margin:0 auto;
         background-color:#FFC;
         padding:10px;
         overflow:auto;
         }
         #header {
         height:50px; 
         color:#06F;
         background-image:url(header.gif);
         background-repeat:no-repeat;
         font-family:Georgia, "Times New Roman", Times, serif;
         font-size:32px;
         font-weight:bold;
         text-align:left;
         padding:5px;
         }
         #content{
         float:left;
         width:430px;
         border-color:#e3eeff;
         padding:15px;
         background-color:#9CF;
         overflow:auto;
         margin-right:5px;
         margin-top:5px;
         text-align:left;
         color:olive;
         font-size:24px;
         font-weight:bold
         }
      </style>
   </head>
   <body >
      <div id="container">
         <div id="header"><img src="Chat-Phone-icon.png" width="60" height="60">My Phone Book</div>
         <div id="content">This is content div</div>
      </div>
   </body>
</html>

The problem is:
In header div image and text alignment is wrong.
Text must be in horizontally center as show in image

[IMG]http://i41.tinypic.com/of33w1.png[/IMG]

Edited by tqmd1
  • 2 Contributors
  • 1 Reply
  • 89 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by stultuske
Member Avatar for stultuske

text-align:left;

this might explain why your text isn't centered. re-read your css code for your header id.
also: using classes, instead of id's is a better approach. it makes it easier to re-use them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.