Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Align ap div scrolling window?

    Hello I have a problem making the ap div scrolling element thingy align to the center of a...table cell I'm using. Well here is the code:
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BrightHotel</title>
    <link href="SC.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    	background-image: url(Bilder/Bakgrund.png);
    }
    #apDiv1 {
    	position:absolute;
    	width:1121px;
    	height:auto;
    	z-index:1;
    	overflow: scroll;
    	left: 150px;
    	top: 313px;
    	vertical-align: auto;
    	text-align: left;
    }
    </style>
    </head>
    
    <body>
    <table width="100%" border="1" align="center" cellpadding="0">
      <tr>
        <th height="892" class="Background" scope="col"><p><img src="" alt="" name="Header" width="95%" height="202" id="Header" /></p>
          <table width="95%" height="62" border="1" align="center" cellpadding="0">
            <tr>
              <td width="100%" align="center"><img src="" alt="" name="Valkommen" width="280" height="46" id="Valkommen" /> <img src="" alt="" name="Aktiviteter" width="280" height="46" id="Valkommen2" /> <img src="" alt="" name="Rum" width="280" height="46" id="Valkommen3" /> <img src="" alt="" name="Kontakta" width="280" height="46" id="Valkommen4" /></td>
            </tr>
        </table>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div id="apDiv1">
          <p>&nbsp;</p>
    </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p></th>
      </tr>
    </table>
    </body>
    </html>
    Keep in mind that I'm working in dreamweaver and don't really have any knowledge about code. It's also strange because when I preview it inside Dreamweaver it looks good. But when I open it in chrome the scrolling window isn't aligned to the center. I have tried to fiddle around using percent values and pixels and whatnot. But nothing seems to make it work. If you want I can send you the html file too. Anyone who know how to fix it?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Mumrik,
    Combining % widths with pixel widths doesn't usually work too well.

    These changes should center your 1121px wide ap element as long as your 100% width table is wide enough to fit it.

    Code:
    #apDiv1 {
    	position:absolute;
    	width:1121px;
    	z-index:1;
    	overflow: scroll;
    	top: 313px;
    left: 50%;
    margin: 0 0 0 -560px;
    	vertical-align: auto;
    	text-align: left;
    Have a look at the link about tables in my signature line.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Mumrik (06-03-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks! Ahh so left 50% makes it appear in the middle. That margin attribute, what is that? I'm not familiar with the term...I was trying to use something like horizontal-align: center when trying to center it with code xD

    Anyway thanks.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Mumrik View Post
    Thanks! Ahh so left 50% makes it appear in the middle. That margin attribute, what is that? I'm not familiar with the term...I was trying to use something like horizontal-align: center when trying to center it with code xD

    Anyway thanks.
    The left: 50%; places the left edge of the element in the center. The negative margin is half the width of the element and pulls it to the left of that 50% centerline... does that make sense?

    See this explanation - http://www.css-lab.com/misc-test/AP-centered.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    There is really no need for using absolute positioning at all though -
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    Like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;	
    	padding: 200px 0 300px;
    	background: #fff;
    	box-shadow: 0 0 20px #8493A6;
    	overflow: auto;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •