Centering an aspect ratio controlled image block
Having tried all the usual centering techniques - margin auto, align, just blunt positioning, I have come to a complete halt. I added aspect ratio to this image and now it seems to not to take notice of the margin on the left - it puts its own px in instead of the one I have asked it too. Any help to stop this would be extremely useful, I need the image to center whatever the size of the screen and can't work out how.
Running script: www.musidoraland.co.uk
html:
HTML Code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp's Corporate offers a unique service for clients wishing to design a special product for their business." >
<title> Beauchamp's Corporate</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" > </script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" > </script>
<script type="text/javascript" src="transify.js" > </script>
<script type="text/javascript" >
$(document).ready(function() {
if ($(window).width() * .66625 < $(window).height()) {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $('#maximage').width(),
height: $('#maximage').width() * .66625,
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
} else {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $('#maximage').height() / .66625,
height: $('#maximage').height(),
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
}
if ($(window).width() > $('#maximage').width()) {
$('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
}
$('#content').transify({opacityOrig:.7});
$('#menu li').transify({opacityOrig:.7});
});
function resizeBg() {
$('#maximage').cycle('destroy');
if ($(window).width() * .66625 < $(window).height()) {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $(window).width(),
height: $(window).width() * .66625,
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
} else {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
width: $(window).height() / .66625,
height: $(window).height(),
fit: 1,
prev: '#arrow_left',
next: '#arrow_right'
});
}
if ($(window).width() > $('#maximage').width()) {
$('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
}
}
$(window).resize(function() {
resizeBg();
}).trigger("resize");
$.extend(jQuery.easing,
{
easeInOutQuart: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
});
$(function() {
$('.page').hide();
$('#menu li').click(
function() {
var content_id = $(this).attr('id');
$('#menu li').addClass('off');
$(this).removeClass('off');
if ($('.page').is(':visible'))
{
$('.page').hide();
$('.'+content_id).show();
}
else
{
$('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });
console.log($(this).attr('id'));
$('.'+content_id).show();
}
});
});
$(function() {
var open = false;
$('#maximage').click(
function() {
$('#pages').animate({
height: '40px',
easing: 'easeInOutQuart'
},
function(){
$('.page').hide();
$('#menu li').removeClass('off');
});
});
});
</script>
<body>
<div id="logo" >
<img src="images/logo8.png" alt="Beauchamp's Corporate" width="300px" />
</div>
<div id="cycle-loader" >
</div>
<div id="maximage" >
<img src="images/luggagelabel5.jpg" alt="" />
<img src="images/wallet2.jpg" alt="" />
<img src="images/luggagelabel4.jpg" alt="" />
<img src="images/coasters2.jpg" alt="" />
</div>
<a href="" id="arrow_left" class="button trans" title="Previous Photo" > </a>
<a href="" id="arrow_right" class="button trans" title="Next Photo" > </a>
<div id="pages" >
<div id="nav" >
<ul id="menu" >
<li id="product" > Our Product</li>
<li id="contact" > Contact Us</li>
</ul>
</div>
<div id="content" >
<div id="copy" >
<div class="page product" >
<p> We offer a consultation meeting in which we discuss client requirements, design ideas,
packaging options, budgets, lead times and more...
<br />
We have a number of designs already in production which we can edit & brand with the client logo or...
<br />
Following this initial meeting, we produce product drawings, quotes, source leather samples and materials
specific to this product. Samples can be produced once drawings have been approved by the client.
<br />
Lead times, delivery schedules and product prices are unique to the client and indervidually calculated
according to the specific client reqirements.
<br />
Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
</div>
<div class="page contact" >
<p> For further information:
<br />
<em> Email:</em> <a href="info@beauchampsoflondon.com" > info@beauchampsoflondon.com</a>
<br />
<em> Address:</em> 35 Bruton Street, London, W1J 6QY
<br />
<em> Website:</em> <a href="www.beauchampscorporate.com" > www.beauchampscorporate.com</a>
<br />
<em> Fashion Accessories Website:</em> <a href="www.beauchampsoflondon.com" > www.beauchampsoflondon.com</a> </p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
Code:
body {
margin:0;
padding:0;
background: #FFFFFF;
}
#logo{
width:300px;
height:149px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
a.button {
display:block;
width:50px;
height:50px;
margin-top:200px;
opacity: 0.6%;
}
a#arrow_left{
float:left;
background: url('../images/arrowleft1.jpg') no-repeat;
position: relative;
top:-600px;
z-index: 100;
}
a#arrow_right{
float:right;
background: url('../images/arrowright1.jpg') no-repeat;
position: relative;
top:-600px;
z-index: 100;
}
.trans {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
#maximage {
max-height: 600px;
width:100%;
position: relative;
margin:0px;
padding:0;
z-index: -5000;
}
#maximage img {
max-height: 600px;
margin:0;
padding:0;
width:100%;
}
#pages {
margin:0px;
width:100%;
padding:0px;
bottom:0;
position:fixed;
text-align:center;
height:40px;
}
#pages #content {
margin:0;
font-size: 18px;
}
#content {
width:100%;
padding:0px;
background: url('../images/transparent.jpg') repeat;
overflow:hidden;
}
.product {
padding:0px 0px 0px 0px;
}
.contact {
padding:40px 0px 120px 0px;
}
#nav {
margin:0px auto 0px auto;
width:250px;
padding:0px;
text-align:center;
overflow:hidden;
}
#menu {
clear:both;
width:369px;
margin:0 auto;
}
#menu li {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
float:left;
width:auto;
background: #A68538 repeat;
margin-right:0px;
cursor:pointer;
}
#menu li#contact {
margin:0;
border-left: none;
}
li {
background: #A68538;
list-style: none;
border: 1px solid #000000 ;
width:150px;
text-align:center;
padding:10px;
display:inline;
}
#copy {
width:700px;
margin: 0 auto 0 auto;
}
em {
font-style: normal;
font-weight: bold;
}
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks