display div tag content in center

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • vikas251074
    New Member
    • Dec 2007
    • 198
    #1

    display div tag content in center

    Here is my code. I want to display content in center of screen. But it is displaying in left side of screen. What to do for center alignment?

    Thanks and regard,
    Vikas

    Code:
    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="style.css"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IP Allocation</title>
</head>

<body>
<div id="myDiv" style="background-color:#CDCCBA; width:600px; height:600px;  ">
  <table align="center">
    <tr>
	  <th><font size="+1">Indian Oil Corporation Limited, Barauni Refinery</font></th>
	</tr>
  </table>
</div>
</body>
</html>
    Tags: None
    • jeffstl
      Recognized Expert Contributor
      • Feb 2008
      • 432
      #2
      Easiest way I know of

      Code:
      <style type="text/css">
body { 
text-align: center; 
} 
</style>

        Comment

        • jeffstl
          Recognized Expert Contributor
          • Feb 2008
          • 432
          #3
          Just in case I tried this on your page, and it does work if you preview in IE anyway.....I have heard many rumblings though about how IE works one way with CSS while other browsers work right ;-)

          Code:
          <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
body { 
text-align: center; 
} 
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IP Allocation</title>
</head>
 
<body>
<div id="myDiv" align="center" style="background-color:#CDCCBA; width:600px; height:600px;  ">
  <table align="center">
    <tr>
      <th><font size="+1">Indian Oil Corporation Limited, Barauni Refinery</font></th>
    </tr>
  </table>
</div>
</body>
</html>

            Comment

            • vikas251074
              New Member
              • Dec 2007
              • 198
              #4
              When set the top, left position in line no. 15 like this

              Code:
              <div id="myDiv" style="background-color:#CDCCBA; top:200; left:300 width:600px; height:500px;  ">
              It does not have any effect,

              Thanks and regards
              Vikas

                Comment

                • idsanjeev
                  New Member
                  • Oct 2007
                  • 241
                  #5
                  Originally posted by vikas251074
                  When set the top, left position in line no. 15 like this
                  Code:
                  <div id="myDiv" style="background-color:#CDCCBA; top:200; left:300 width:600px; height:500px;  ">
                  It does not have any effect,
                  Thanks and regards
                  Vikas
                  Hello vikas
                  you wants to set position of your div so you must have to write
                  style="position :absolute; ............... ...."
                  So please try inseted of your div tag
                  Code:
                  <div id="myDiv" style="position:absolute; top:200; left:300; width:600px; height:500px; background-color:#CCCC66 ">
                  Regards
                  Jha

                    Comment

                    • vikas251074
                      New Member
                      • Dec 2007
                      • 198
                      #6
                      Still it is not working. I am surprised why it is not working. Such a simple code it is. What to do next?

                      Thanks and regards,
                      Vikas

                        Comment

                        • idsanjeev
                          New Member
                          • Oct 2007
                          • 241
                          #7
                          can you attached your complete code for testing
                          regards
                          Jha

                            Comment

                            • vikas251074
                              New Member
                              • Dec 2007
                              • 198
                              #8
                              Here is my complete code

                              Code:
                              <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="style.css"-->
<!--#include file="first.asp"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IP Allocation</title>
</head>
</style>
<body onLoad="document.myform.vlan_name.focus()">
<form name="myform">
<div id="myDiv" style="position:absolute; top:200; left:300; width:600px; height:500px; ">
  <table align="center">
    <tr height="50" valign="bottom">
	  <th align="center"><h2>Virtual Local Area Network (VLAN) Master</h2></th>
	</tr>
	<tr>
	  <table>
	    <tr>
		  <td align="right" style="width:125px ">VLAN Name :</td>
		  <td align="left"><input type="text" style="width:250px " name="vlan_name"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">VLAN Range :</td>
		  <td align="left"><input type="text" style="width:100px " name="vlan_range"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">VLAN First IP :</td>
		  <td align="left"><input type="text" style="width:100px " name="first_ip"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">VLAN Last IP :</td>
		  <td align="left"><input type="text" style="width:100px " name="last_ip"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">VLAN Subnet Mask :</td>
		  <td align="left"><input type="text" style="width:100px " name="subnet_mask"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">Router :</td>
		  <td align="left"><input type="text" style="width:50px " name="router"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">Switch :</td>
		  <td align="left"><input type="text" style="width:50px " name="switch"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">Camera :</td>
		  <td align="left"><input type="text" style="width:50px " name="camera"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">Printer :</td>
		  <td align="left"><input type="text" style="width:50px " name="printer"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">Server :</td>
		  <td align="left"><input type="text" style="width:50px " name="server"/></td>
		</tr>
		<tr>
		  <td align="right" style="width:125px ">PC :</td>
		  <td align="left"><input type="text" style="width:50px " name="pc"/></td>
		</tr>
	  </table>
	</tr>
  </table>
</div>
</form>
</body>
</html>

                                Comment

                                • idsanjeev
                                  New Member
                                  • Oct 2007
                                  • 241
                                  #9
                                  Originally posted by vikas251074
                                  Here is my complete code
                                  Code:
                                  <div id="myDiv" style="position:absolute; top:200; left:300; width:600px; height:500px; ">
                                  please insert match it with your code
                                  you got it working now
                                  Code:
                                  <div id="myDiv" style="position:absolute; top:200px; left:300px; width:600px; height:500px; ">
                                  regards
                                  jha

                                    Comment

                                    • vikas251074
                                      New Member
                                      • Dec 2007
                                      • 198
                                      #10
                                      Thanks I have solved this problem by using 'px' in line no. 13 with top and left attribute as follows

                                      Code:
                                      <div id="myDiv" style="position:absolute; top:109px; left:300px; width:600px; height:500px">
                                      Sometimes it is very difficult to find simple problem like this.

                                      Thanks and regards
                                      Vikas

                                        Comment

                                        • idsanjeev
                                          New Member
                                          • Oct 2007
                                          • 241
                                          #11
                                          Originally posted by vikas251074
                                          Sometimes it is very difficult to find simple problem like this.
                                          Vikas
                                          You are right anyway very glad you found it
                                          nice programming
                                          regards
                                          jha

                                            Comment

                                            Previous template Next
                                            Working...