Hi. thanks for looking at this post
I'm building a custom theme for an artist.
They are very particular and want the contents a fixed height and always vertically & horizontally aligned center.
the horizontal alignment can be done w. css.
But, I always have trouble with vertical alignment of the main contents in the middle of the screen.
http://snipplr.com/view.php?codeview&id=12566
I found some jquery script which accomplishes the task;
the results can be viewed here : http://jackhutton.net/valign-middle.html
the page code is below:
rather than hack away, my question is: How do I best employ this javascript - this layout and integrate it into a custom theme..?
I'll use the zen starterkit and create a subtheme.
Head TAG HERE
TITLE TAG HERE Demo END TITLE TAG HERE
SCRIPT TAG READS AS FOLLOWS script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" END TAG FOR SCRIPT
SCRIPT TYPE TAGt ="text/javascript"
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#content").vAlign();
$("#content").hAlign();
});
STYLE TAG STARTS HERE type="text/css"
html { background: #fafafa; }
#content
{
background: #fff;
border: 10px solid #eee;
padding: 20px;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 25px;
text-align: justify;
}
#content { width: 400px; }
STYLE TAG ENDS HERE
HEAD TAG ENDS HERE
BODY TAG BEGINS HERE
DIV TAG BEGINS HERE id="content"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique.
DIV TAG ENDS HERE
BODY TAG ENDS HERE.
(code wasn't rendering html..sorry for the all caps.. :) )
thanks for the feedback..
