SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question centralizing elements inside of body according to page size

    hi,
    my webpage is:http://www.terranartworks.com/testsite/tsv1/index.html
    i'm designed this site in 1024*768.i'm trying to central elements inside of body,when page size changed.for example;when page size is bigger than 1024*768,the elements stay where they at the beginning.
    how can i do this.can anyone help me?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    hi,
    my webpage is:http://www.terranartworks.com/testsite/tsv1/index.html
    i'm designed this site in 1024*768.i'm trying to central elements inside of body,when page size changed.for example;when page size is bigger than 1024*768,the elements stay where they at the beginning.
    how can i do this.can anyone help me?
    It seems to me that everything already is centered when the page gets larger than 1024x768 - are you wanting to achieve something else other than that?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    I think the OP means that they want the little red dot to reposition to above the correct menu point.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    I think the OP means that they want the little red dot to reposition to above the correct menu point.
    Aha, so "when page size is bigger than 1024*768,the elements stay where they at the beginning" was a statement about a problem. I read it as a statement about what was wanting to be achieved.

    Could it be that he wants to know how to force the left and right margins in so that everything remains centered within that fixed-width?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    My initial thought was to respond to the resize event and write a function to reposition the dot accordingly (whatever that might involve), but then again I tend to overthink things
    Either way, I would wait to hear back from the OP, as to whether we are on the right track with the problem.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes one of the problem is red point positioning.
    red point will be stay at the buttons mid point after resizing.
    but i mean mainly that,the content of site.
    for example when i open the site in bigger resolution screen,all elements stays at the top of page and bottom side remains a big empty place.
    i want to place the body section always at the center of page.the top and bottom distance will be same on logo side and buttons side.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    yes one of the problem is red point positioning.
    red point will be stay at the buttons mid point after resizing.
    but i mean mainly that,the content of site.
    for example when i open the site in bigger resolution screen,all elements stays at the top of page and bottom side remains a big empty place.
    i want to place the body section always at the center of page.the top and bottom distance will be same on logo side and buttons side.
    Okay, that seems to be CSS for your solution then, where the content area is given a fixed with and the left and right margins are set to be auto.

    Moving thread to the CSS forum for further details.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried css margin top and bottom but it did not solve my problem.
    i do not want horizontal centralising,i want vertical centralising while resize browser window.so i think i need a script for resize event.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    i tried css margin top and bottom but it did not solve my problem.
    i do not want horizontal centralising,i want vertical centralising while resize browser window.so i think i need a script for resize event.
    So when the window is taller than the page content, you want the extra space to be evenly split top and bottom?
    Several different examples can be seen at http://douglasheriot.com/tutorials/c...tre/demo4.html
    And, here's an example demo'ing a whole vertically centered page - http://www.456bereastreet.com/lab/ce...display-table/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nop it is not happening.it makes me crazy

  11. #11
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Paul has already given you the answer.
    It's as easy as including the CSS from the second page he links to in your stylesheet.

    Here's a demo of it working.

    Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <head>
        <title>Terran Artworks</title>
        <base href="http://www.terranartworks.com/testsite/tsv1/"  />
        <meta http-equiv="Content-Type" content="text/html" />
        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" type="text/css" href="GeneralScripts.css"/>
        <link rel="stylesheet" type="text/css" href="(applegallertslideshow)demo.css" />
        <link rel='stylesheet' href="(magicline)style.css"/>
        <style>
          html,  body {
            width:100%;
            height:100%;
            margin:0;
            padding:0;
          }
          html {display:table;}
          body {
            display:table-cell;
            vertical-align:middle;
          }
          #body {
            max-width:50em;
            margin:0 auto;
          }
        </style>
      </head>
    
      <body>
        <div id="main">
          <div class="header">
            <div  class="logo" align="center">
              <a href="index.html">
                <img  src="imajlar/logo.png" alt="LogoPicture" name="Insert_logo" id="Insert_logo" align="middle"  style="border:none;"/>
              </a>
            </div>
          </div>
          <div id="gallery">
            <div id="slides">
              <div class="slide" >
                <iframe class="tscplayer_inline" name="tsc_player" src="video/video/media/index_player.html" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="900" height="350"></iframe>
              </div>
              <div class="slide" align="center" style="background:url(imajlar/zemin.png);">
                <img src="imajlar/HAKKIMIZDA-YAZI.png" style="margin-top:28px;" alt="aboutUs"/>
              </div>
              <div class="slide">
                <object data="islerimiz.html" height="350" width="900" type="text/html" class="islerimizSayfasi" name="islerimizSayfasi" id="islerimizSayfasi"></object>
              </div>
              <div class="slide">
                <object data="iletisim.html" height="350" width="900" type="text/html" class="iletisimSayfasi" name="iletisimSayfasi" id="iletisimSayfasi"></object>
              </div>
            </div>
          </div>
          <div id="greypoint">
            <ul id="point"></ul>
          </div>
          <div id="goBack" style="height:14px; opacity:0; visibility:hidden; width:900px; margin:auto;">
            <a href="iletisim.html" target="iletisimSayfasi">
              <img src="imajlar/ADRESE-DON-ICON.png" style="height:14px; margin-left:98%; border:none;" alt="iletisimPage"/>
            </a>
          </div> 
          <div id="menu">
            <ul id="menuButtons" class="group">
              <li class="menuItem" id="current_page_item_two">
                <a href="#"></a>
              </li>
              <li id="bosluk">
                <img  src="imajlar/beyazDikdortgen196px-beyaz.gif" alt="whitespace" />
              </li>
              <li class="menuItem">
                <a href="">
                  <img  src="imajlar/1hakkimizda-icon.png" alt="thumbnail"  />
                </a>
              </li>
              <li  class="bosluk2">
                <img src="imajlar/beyazDikdortgen149px-beyaz.gif" alt="whitespace"/>
              </li>
              <li class="menuItem">
                <a href="">
                  <img  src="imajlar/2isler-icon.png" alt="thumbnail" />
                </a>
              </li>
              <li  class="bosluk2">
                <img src="imajlar/beyazDikdortgen149px-beyaz.gif" alt="whitespace"/>
              </li>
              <li class="menuItem">
                <a href="">
                  <img src="imajlar/3iletisim-icon.png" alt="thumbnail"/>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="easing.js"></script>
        <!--<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>-->
        <script type="text/javascript"src="(magicline)example.js"></script>
        <script type="text/javascript" src="(applegalleryslideshow)script.js"></script>
        <script type="text/javascript" src="RedandGreyPointMovement.js"></script>
        <script type="text/javascript" src="AdresGosterGizle.js"></script>
        <script type="text/javascript" src="logoButtonSlideEffect.js"></script>
      </body>
    </html>

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this example just gives a space from top.i try to reach equal space both top and bottom.

  13. #13
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Are you sure?

    Check the link again - I've given the centred elements a blue background.
    For me, on a monitor with a resolution of 1920 x 1200, these elements are centred perfectly.
    There is a distance of 212px from the top of the blue area to the top of the screen and the same from the bottom of the blue area to the bottom of the screen.

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    this example just gives a space from top.i try to reach equal space both top and bottom.
    Just in case this is a web browser compatibility issue - which web browser are you using, and what version is it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use latest version of firefox for developing but i tested chrome,opera,safari,ie of latest version too.
    th site you sensed to me,shows a blue background in my browsers.why?

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    th site you sensed to me,shows a blue background in my browsers.why?
    So that you can see what is centered.

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. i understand why.
    i putted 33px margin from top of logo
    because of that it will not be centered.

  18. #18
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Istanbul,Turkey
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for everything you did to help to me.

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sweetysweety View Post
    thanks for everything you did to help to me.
    You're welcome - I'm glad that we've been able to help you to come to a successful conclusion.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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