always set a div to center of page and div animation help?

[friedice]

hello

i train to set a div names wrapper containing 2 more divs inside it to always be positioned in the center of a page no matter what the resolution is.

i tried using margins but it didnt more well in the end . it displays right on a smaller screen (15inch laptop) but displays wrong on my 24inch desktop

is there is way of doin it?

im thinking something to do with it being responsive.. the page is also designed to be responsive to all sizes as well

 

also one of the div(welcome div) in the wrapper div mentioned above . i want to like slide to the left as a animation and another div(login div) comes in with a form in it

what sort or javascript would i need to use for it?

 

could u give me examples of how to do it as well

hope u can help me

 

cheers

[Christian F.]

It is actually quite easy, when you know what you need to do. This guide should help you explain it in detail.

[friedice]

i got the position working now thanks. i just had to change one line in my code..

 

 

now for the animation slide hmmm

[friedice]

ive got the animation to work using

$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

 

but it squishes the text together behide it hides

so i tried another way but it doesnt seem to work

 

<script type="text/javascript">
$(document).ready(function() {
  $('#slideleft button').click(function() {
    var $lefty =  $(this).next();
    $lefty.animate({
      left: parseInt($lefty.css('left'),10) == 0 ?
        -$lefty.outerWidth() :
        0
    });
  });
});  
</script>

 

with this

 

<div id="slideleft" class="slideleft">
		<button>press me</button>
		<div class="welcome" id="welcome">
			<h1>Welcome to <b>g<span class="glueUSLfont">l</span>ue<span class="glueUScolor">us</span></b></h1>
			<p class="welcomepara">
			</br></br>
			Your Email<br/>
			<input type="text" name="email" style="width:190px"/><br />
			</p>

			<a href="#" onclick="changeDiv(1)""><img src="img/sign_up_button.png" alt="signup" height="40px"/></a>



		</div>
		</div>  

 

im thinkin its something to do with the div width value O.O