I built a page with a simple crossfade slideshow in a div just below the horizontal menu-bar. I want the slideshow to take up about 80% of the width of the page. So far, so good. That part works.
PROBLEM, I am having a problem understanding how to make any content that should appear BELOW the slideshow move downward in order to stay visible if the user pulls the page wider. (or, cling to the bottom of the slideshow div if the page is narrowed.
A slight complication is that I want the slideshow to partially overlap the background of the upper/menu_bar div (this works if I give the slideshow div a margin-top: value of -70px). Not sure if this is an issue.
Here is stripped-down html of the page layout as it currently stands, and below that, the css file I have for this (some of the ids and classes are used for other pages)
The problem starts to appear somewhere above the line that reads "Section for current/upcoming info like recent news, etc. SHOULD ALWAYS APPEAR BELOW SLIDESHOW"
<!doctype html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="logos/cc_ico.png">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New Idea</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery/jquery.cycle2.min.js"></script>
<script type="text/javascript" src="new.js"></script>
<script type="text/javascript">//show live dimensions of page in dimensions div
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>
</head>
<body>
<div id="blackbar" style="text-align: right;">
<div style="float: left;"><!---temp space for debug messages--->
</div>
<div>This page is under development.</div>
<a href="http://facebook.com/ourcompany" target="_blank" /><img src="logos/_face.png" style="margin:0;" /></a>
<a href="http://twitter.com/ourcompany" target="_blank" /><img src="logos/_twit.png" style="margin:0;" /></a>
<a href="http://pinterest.com/ourcompany" target="_blank" /><img src="logos/_pin.png" style="margin:0;" /></a>
<a href="http://www.linkedin.com/company/ourcompany" target="_blank" /><img src="logos/_link.png" style="margin:0;" /></a>
</div><!----end of blackbar--->
<div class="whitecontent"><!--start the wrapper-->
<div class="brickbar">
<div class="content_box_centerwide">
<img src="logos/CCLogoWeb5.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; margin-bottom:-40px" /><!---absorbs top whitespace of number.png--->
<img src="logos/number.png" style="width:40%; margin:0px; max-width:440px; min-width:360px; float: right; ;" />
<div style="clear: both;"></div>
</div>
<div id="menu_row">
<div class="buttonspace">
<form method="post" action="" target="_self" title="[title]">
<input type="submit" value="Home" class="visitorButton">
<input type="hidden" name="do_this" value="new_Home.php"></form>
</div>
<div class="buttonspace">
<form method="post" action="" target="_self" title="[title]">
<input type="submit" value="Listings" class="visitorButton">
<input type="hidden" name="do_this" value="new_Listings.php"></form>
</div>
<div class="buttonspace">
<form method="post" action="" target="_self" title="[title]">
<input type="submit" value="Search MLS" class="visitorButton">
<input type="hidden" name="do_this" value="new_Search_MLS.php"></form>
</div>
<div class="buttonspace">
<form method="post" action="" target="_self" title="[title]">
<input type="submit" value="About Us" class="visitorButton">
<input type="hidden" name="do_this" value="new_About_Us.php"></form>
</div>
<div class="buttonspace">
<form method="post" action="" target="_self" title="[title]">
<input type="submit" value="Feedback" class="visitorButton">
<input type="hidden" name="do_this" value="new_Feedback.php"></form>
</div>
</div><div id="menu_lastrow_bottompad"></div></div>
<style>
@media all and (max-width: 359px) {
.midbar_toppad2 { display: none; }
.midbar_toppad { display: none; }
.wideslides { display: none; }
}
</style>
<div class="midbar_toppad2">
<style>
/* the slide container with a fixed size */
.wideslides {
box-shadow: 0px 0px 6px black;
margin-left: auto;
margin-right: auto;
margin-top:-70px; /*hopefully floats up into brickbar */
/*margin-bottom:-70px; hopefully floats up into brickbar */
width: 80%;
min-width:360px;
position: relative;
background-color: transparent;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.wideslides img {
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width: 100%;
border: solid thick #004000;
}
/* the first image is the current slide. it's faded in. */
.wideslides img:first-child {
z-index: 2; /* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.wideslides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
</style>
<script type="text/javascript">
function nextSlide() {/* very simple crossfade */
var q = function(sel) { return document.querySelector(sel); }
q(".wideslides").appendChild(q(".wideslides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
<div class="wideslides">
<img src="images/crops_h/h_crop_03.JPG" r=1 />
<img src="images/crops_h/h_crop_18.jpg" r=2 />
<img src="images/crops_h/h_crop_07.JPG" r=3 />
<img src="images/crops_h/h_crop_14.jpg" r=4 />
<img src="images/crops_h/h_crop_06.JPG" r=5 /></div>
</div>
<div class="midbar_toppad">
<div class="content_box_centerwide">
<center>
(Section for current/upcoming info like recent news, etc. SHOULD ALWAYS APPEAR BELOW SLIDESHOW)
</center>
</div>
</div>
<!--// FOOTER CONTENT -->
<div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>
<div id="blackbar"><small>Copyright ©2014 Our Co. (Except where otherwise noted.)</small></div>
</div><!--end the wrapper-->
<div id="bottombar"> </div>
</body>
</html>
Here is the .css (the divs used in the code above are as follows:
class="brickbar"
class="buttonspace"
class="clearbar"
class="content_box_centerwide"
class="midbar_toppad"
class="midbar_toppad2"
class="visitorButton"
class="whitecontent"
class="wideslides"
id="blackbar"
id="bottombar"
id="dimensions"
id="menu_lastrow_bottompad"
id="menu_row"
body {
font-family: "Century Gothic",arial,helvetica,sans-serif;
font-size:12pt;
text-align:center;
margin:0px;
overflow-x: hidden;
}
#whitecontent {/* a wrapper that contains everything */
background-color:#FFFFFF;
}
#topbar{
width:100%;
margin:0px;
padding-bottom: 5px;
}
.clearbar{/*transparent*/
width:100%;
height: 100%;
margin:0px;
padding-bottom: 5px;
background-color: transparent; /**/
display: inline-block;
}
.brickbar{
background-image:url('../images/ccbrick3_pale.jpg');
width:100%;
margin:0px;
border-bottom: solid thick #004000;
}
.whitebar{/*white*/
width:100%;
margin:0px;
padding-bottom: 5px;
background-color: #FFFFFF;
}
.midbar{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
background-color: #FFFFFF;
color: #000000;
}
#blackbar{
width:100%;
vertical-align: middle;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}
/*idea from http://css-tricks.com/equidistant-objects-with-css/ */
#menu_row {
margin-left: auto;
margin-right: auto;
padding: 0px;
padding-left: 4%;
padding-top: 5px;
text-align: justify;
border:none;
white-space: nowrap;
/*font-size: 0.1px; IE 9/10 don't like font-size: 0; */
max-width: 1000px;
min-width: 360px;
}
#menu_row div.buttonspace { /* a button space */
width: 18%; /* for 5 buttons, etc. */
margin: 0px;
padding: 0px;
line-height: 25px;
display: inline-block;
}
#menu_row div.visitor { /* a button space */
font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
font-weight: bold;
font-size:10pt;
/*width: 15%; for 6 buttons*/
width: 18%; /* for 5 buttons, etc. */
margin: 0px;
line-height: 25px;
text-align: center;
vertical-align: middle;
display: inline-block;
border: solid thin black;
background-color:#244F21; /*a deep green*/
color:#F5ECCB; /*font tan*/
}
.visitorButton { /* a button */
white-space: nowrap;
font-family: "Century Gothic Bold",arial,helvetica,sans-serif;
font-weight: bold;
font-size:10pt;
/*width: 15%; for 6 buttons*/
width: 100%; /* of buttonspace */
margin: 0px;
line-height: 25px;
text-align: center;
vertical-align: middle;
display: inline-block;
border: solid thin black;
background-color:#244F21; /*a deep green*/
border-color:#425A39;
color:#F5ECCB; /*font tan*/
}
#menu_row:after {/* Ensures there are at least 2 lines of text, so justification works */
content: '';
width: 100%;
display: inline-block;
}
#menu_lastrow {
content: '';
width: 100%;
display: inline-block;
/*border-bottom: solid thick #004000;*/
margin-bottom: -4px; /* room for border */
}
/* START special selectors to float slide show box between menu and lower divs */
#menu_lastrow_bottompad {
content: '';
width: 100%;
display: inline-block;
padding-bottom: 80px; /*so slideshow box can float upwards into brick*/
margin-bottom: -6px; /* room for border */
}
.midbar_toppad2{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: -70px; /*special case for slidebox overlap*/
background-color: transparent;
color: #000000;
}
.midbar_toppad{ /* turned this into a class instead of an id*/
width:100%;
margin:0px;
padding-top: 210px; /*special case for slidebox overlap*/
background-color: transparent;
color: #000000;
}
.images_box_centerwide {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0px;
padding-top: 5px;
text-align: left;
width: 90%;
min-width: 324px; /* 90% of 360 */
}
.content_box_centerwide {
margin-left: auto;
margin-right: auto;
padding: 0px;
padding-top: 5px;
text-align: left;
border:none;
max-width: 850px;
min-width: 360px;
}
.content_box_half {
margin-left: auto;
margin-right: auto;
padding: 10px;
text-align: left;
font-size:10pt;
border:none;
max-width: 400px;
float: left;
}
#bottombar{
display: block;
width:100%;
height: 100%;
vertical-align: top;
background-color:#000000; /*black*/
color:#F5ECCB; /*font tan*/
margin: 0px;
padding-top: 2px;
}
I found a solution for you... but your html structure you are using is not optimal.
.midbar_toppad{
width:100%;
margin:0px;
padding-top: 30%; /*This is what i changed*/
background-color: transparent;
color: #000000;
}
:) hope u can use it anyway. Here is the fiddle: http://jsfiddle.net/PR4DE/a97m5549/1/