Help with div positioning in css style

Discussion in 'OT Technology' started by choler, Nov 18, 2003.

  1. choler

    choler New Member

    Joined:
    May 21, 2002
    Messages:
    183
    Likes Received:
    0
    I am trying to have a div show up in the center for the screen...
    this is the code i have
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style  type="text/css">
    #divstyle{
    	position:relative;left:50%;top:50%;width:261px;height:114px;background-color: #CCCCCC;
    }
    </style>
    </head>
    <body>
    <div id="divstyle"></div>
    </body>
    </html>
    
    here is the demo of how it looks...

    my question is how can I get the div to show up in the center and not in the 4th quadrant by only using css ?
     
  2. PBizme

    PBizme I Got Nothing

    Joined:
    Jan 27, 2002
    Messages:
    729
    Likes Received:
    0
    Location:
    Purdue
    What are you trying to do? I know how to get it to line up in the horizontal center with CSS, but I'm not sure about vertical alignment other than for a background image or something. Seems like you could just use a table maybe? This code will center that in a table, but I'm guessing you would want to have other stuff on teh page as well so you'd probably have to mess around with it to get it lining up correctly.

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style  type="text/css">
    	.divstyle	{width:261px; height:114px; background-color:#CCCCCC;}
    </style>
    </head>
    <body>
    <table width=100% height=100%><tr valign="center"><td align="center">
    <div class="divstyle">this should show in the center of the screen</div>
    </td></tr></table>
    </body>
    </html>
    
     
  3. choler

    choler New Member

    Joined:
    May 21, 2002
    Messages:
    183
    Likes Received:
    0
    I wanted an css solution without creating centered tables... thanks for trying anyways......
     
  4. ez4me2c3d

    ez4me2c3d Guest

    its impossible without the use of javascript. CSS is not meant to be used soley in the creation of web pages (though some believe this to be true) Tables are your friend, use them, it wont bite.

    but if you must.. here is the JavaScript solution to your problems.

    (sorry if i changed your code a little, but i wrote it from scratch)
    Code:
    <html>
      <head>
        <title>Untitled Document</title>
        <style  type="text/css">
          div {position: absolute; width: 261px; height: 114px; background-color: #CCCCCC;}
        </style>
        <script>
          function centerDiv() {
            document.getElementById("divstyle").style.height = "114";
            document.getElementById("divstyle").style.width = "261";
            document.getElementById("divstyle").style.top = (screen.availHeight - (parseFloat(document.getElementById("divstyle").style.height) * 2)) / 2;
            document.getElementById("divstyle").style.left = (screen.availWidth - parseFloat(document.getElementById("divstyle").style.width)) / 2;
          }
        </script>
      </head>
      <body onLoad="centerDiv()">
    
        <div id="divstyle"></div>
    
      </body>
    </html>
    EDIT: I had to double the height value of the div but i think this is just for my monitor. If you find that the height of the div is not centered try taking out the *2 along with the parens.
     
  5. ez4me2c3d

    ez4me2c3d Guest

    heres an improved piece of code. I took alittle more time on this one.
    Code:
    <html>
      <head>
        <title>Untitled Document</title>
        <script>
          function centerDiv() {
            divHeight = document.getElementById("divstyle").offsetHeight;
            divWidth = document.getElementById("divstyle").offsetWidth;
            document.getElementById("divstyle").style.top = (screen.availHeight / 2) - divHeight;
            document.getElementById("divstyle").style.left = (screen.availWidth - divWidth) / 2;
          }
        </script>
      </head>
      <body onLoad="centerDiv()">
        <div id="divstyle" style="position: absolute; height: 125; width: 300; background: black;"></div>
      </body>
    </html>
    no you cant do it soley with css, its weak. face it.

    EDIT: oh yeah and throw you inline style back into the style tags
     
  6. ez4me2c3d

    ez4me2c3d Guest

    I can see you just recently read an online article about how tables were originally designed to hold content much like a table in a database. And how CSS is god and any web page can be made using only CSS.

    Well let me break the news to you. They're wrong. There are many faults in CSS that will prohibit you from doing many things with web pages that you simply could not do without the use of tables.

    Yes tables may have been built for data use only, but in the development of web site design and HTML tables have become ways of displaying information. This is not a misuse on the Web Admins part, its the evolution of the table in HTML.

    I'm not trying to be a dick, it's just that your opinions have been twisted by some false information you read on the internet.

    tables are ok... use them...
     

Share This Page