Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively.
The central part needs to be resizable with some margin between the header and footer. A critical requirement is that the window should not display any scrollbars, and all divs must be centered.
The approach I'm taking involves positioning all three main divs absolutely, but I'm encountering challenges when trying to resize the middle portion. While @media queries initially seemed to work well, resizing the window vertically without affecting the width caused issues. To address this, I resorted to using jQuery to dynamically change CSS properties based on window size changes. However, this method lacks consistency as image sizes need adjustment, and CSS properties defined in JavaScript override those in the stylesheet due to higher precedence levels.
Are there alternative methods to achieve this design? What would you recommend as the best way to resize the middle section?
I've included the code snippet below for reference:
<div class="container">
<header>
<div class="nav">
---upper navigation part
</div>
</header>
<div id="content">
<span class="arrow-left"><a href="#"></a></span>
<span class="arrow-right"><a href="#"></a></span>
<div class="central">
<div class="inner">
<h2>Contact Us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputat</p>
<div class="contacts">
<p>some text </p>
<p>some text </p>
<div>image div</div>
</div>
</div>
</div>
</div>
<footer>
<div class="nav">
---- navigation part
</div>
</footer>
</div>
</body>
CSS:
.container{
position: relative;
height:100%;
margin:0 auto;
width:100%;
}
header{
position:absolute;
top:50px;
width:1000px;
left:50%;
margin-left:-500px;
}
footer{
position:absolute;
bottom:50px;
width:1000px;
left:50%;
margin-left:-500px;
}
#content{
width:1000px;
margin:auto;
position: absolute;
top: 113px;
bottom: 113px;
left: 0px;
right: 0px;
}
.central{
height: 100%;
position:relative;
width:560px;
float:right;
background:red;
overflow:hidden;
}
.inner{
width:500px;
float:right;
padding:0 30px;
margin: 4px 0;
}
.inner h2{
font-family: sans-serif;
font-size:2em;
line-height:140%;
}
.inner p{
line-height:120%;
font-size:1em;
padding:15px 0;
}
.image{
background-image:url(image.png);
margin-right:0 !important;
display:block;
margin:10px auto;
width:500px;
height:232px;
}
AND JS file:
$(window).resize(function(){
var inner_h = $('.inner').height()/2;
console.log(inner_h);
$('.inner').css({
position:'absolute',
left: 0,
top: '50%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '2em'
});
$('.inner p').css({
'font-size': '100%'
});
if($(window).width() < 1100){
$('.map').css({
'background-size':'350px 162px',
'background-image':'url(images/contact-map350.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 750){
$('.inner').css({
position:'absolute',
left: 0,
top: '55%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '1.5em'
});
$('.inner p').css({
'font-size': '90%'
});
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 650){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
});
$(window).load(function(){
var inner_h = $('.inner').height()/2;
console.log(inner_h);
$('.inner').css({
position:'absolute',
left: 0,
top: '50%',
'margin-top': '-'+inner_h + 'px'
});
$('.inner h2').css({
'font-size': '2em'
});
$('.inner p').css({
'font-size': '100%'
});
if($(window).width() < 1100){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 750){
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
if($(window).height() < 650){
$('.inner').css({
position:'absolute',
left: 0,
top: '55%',
'margin-top': '-'+inner_h + 'px'
});
$('.image').css({
'background-size':'350px 162px',
'background-image':'url(image.png)',
'width': '350px',
'height':'162px',
'float':'left'
});
}
});
// run the function:
$(window).resize();
$(window).load();