hi,
my webpage is:http://www.terranartworks.com/testsite/tsv1/index.html
i’m designed this site in 1024768.i’m trying to central elements inside of body,when page size changed.for example;when page size is bigger than 1024768,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?
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?
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.
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.
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/css_vertical_centre/demo4.html
And, here’s an example demo’ing a whole vertically centered page - http://www.456bereastreet.com/lab/centered/display-table/
nop it is not happening.it makes me crazy:(
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:
<!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>
this example just gives a space from top.i try to reach equal space both top and bottom.
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.
Just in case this is a web browser compatibility issue - which web browser are you using, and what version is it?
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?
So that you can see what is centered.
ok. i understand why.
i putted 33px margin from top of logo:)
because of that it will not be centered.
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.