Hello everyone,
I'm working on a landing page for work. I am a novice when it comes to CSS but I am learning fast.
Here is my problem:
When re-sizing the browser window the pieces of the page do not adjust. I think this is a "position: absolute" problem but I may be wrong. Anyway, here is my screen-shots and code.
Normally:
After Re-sizing:
/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}body{line-height:1}a img{border:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}table,td,th{vertical-align:middle}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}button::-moz-focus-inner{border:0}
body
{
/*background-color: #123261; /* WAS #dfdfdf */
background: url('../images/contentbg.png'); background-repeat:no-repeat;
color: #fff;
font-family: Century Gothic, Arial;
font-size: 14px;
line-height: 1.5;
margin-top: 20px;
margin-bottom: 30px;
}
a
{
color: #ff377c;
}
p
{
margin-bottom: 10px;
}
h1
{
font-size: 20px;
margin-bottom: 5px;
font-weight: bold;
}
h2
{
font-size: 16px;
margin-bottom: 5px;
font-weight: bold;
}
.menu
{
margin-bottom: 40px;
text-align: center;
color: #FFF;
}
.menu a
{
color: #FFF;
}
.menu a.active
{
font-weight: bold;
}
/* Showcase -------------*/
#awOnePageButton .view-slide
{
display: none;
}
/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
height: 470px; /* Same as showcase javascript option */
overflow: hidden;
}
/* Container when content is shown in slider */
.showcase
{
position: relative;
margin: auto;
}
.showcase-content-container
{
/* background-color: #f36e21; */
/*background: url('../images/contentbg.png');*/
}
/* Navigation arrows */
.showcase-arrow-previous, .showcase-arrow-next
{
text-align: center;
position: absolute;
background: url('../images/arrows.png');
width: 50px;
height: 90px;
top: 190px;
cursor: pointer;
}
.showcase-arrow-previous
{
left: -64px;
}
.showcase-arrow-previous:hover
{
background-position: 0px;
}
.showcase-arrow-next
{
right: -200px;
background-position: -150px;
}
.showcase-arrow-next:hover
{
background-position: -150px;
}
/* Content */
.showcase-content
{
background-color: #000;
text-align: center;
border-width: 1px;
}
.showcase-content-wrapper
{
text-align: center;
height: 470px;
width: 700px;
display: table-cell;
vertical-align: middle;
}
/* Styling the caption */
.showcase-caption
{
color: #000;
padding: 8px 15px;
text-align: left;
position: absolute;
bottom: 10px; left: 10px; right: 10px;
display: none;
background-image: url(../images/white-opacity-80.png);
}
.showcase-onepage .showcase-content
{
margin-bottom: 10px;
}
/* Button Wrapper */
.showcase-button-wrapper
{
clear: both;
margin-top: 0px;
text-align: center;
}
.showcase-button-wrapper span
{
margin-right: 3px;
padding: 2px 5px 0px 5px;
cursor: pointer;
font-size: 12px;
color: #FFFFFF;
}
.showcase-button-wrapper span.active
{
color: #fff;
}
/* Thumbnails */
.showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
{
background-color: #14325d;
}
.showcase-thumbnail-wrapper
{
overflow: hidden;
}
.showcase-thumbnail
{
width: 120px;
height: 90px;
cursor: pointer;
border: solid 1px #333; /* WAS #333 */
position: relative;
}
.showcase-thumbnail-caption
{
position: absolute;
bottom: 2px;
padding-left: 10px;
padding-bottom: 5px;
}
.showcase-thumbnail-content
{
padding: 10px;
text-align: center;
padding-top: 25px;
}
.showcase-thumbnail-cover
{
background-image: url(../images/black-opacity-40.png);
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.showcase-thumbnail:hover
{
border: solid 1px #999;
}
.showcase-thumbnail:hover .showcase-thumbnail-cover
{
display: none;
}
.showcase-thumbnail.active
{
border: solid 1px #999;
}
.showcase-thumbnail.active .showcase-thumbnail-cover
{
display: none;
}
.showcase-thumbnail-wrapper-horizontal
{
padding: 10px;
}
.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
{
margin-right: 10px;
width: 116px;
}
.showcase-thumbnail-wrapper-vertical
{
padding: 10px;
}
.showcase-thumbnail-wrapper-vertical .showcase-thumbnail
{
margin-bottom: 10px;
}
.showcase-thumbnail-button-backward,
.showcase-thumbnail-button-forward
{
padding: 7px;
cursor: pointer;
}
.showcase-thumbnail-button-backward
{
padding-bottom: 0px;
padding-right: 0px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
{
background-image: url(../images/arrows-small.png);
background-repeat: no-repeat;
display: block;
width: 17px;
height: 17px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-vertical
{
background-position: 0 -51px;
margin-left: 55px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
{
background-position: -17px -51px;
}
.showcase-thumbnail-button-forward .showcase-thumbnail-vertical
{
background-position: 0 -34px;
margin-left: 55px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
{
background-position: -17px -34px;
}
.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
{
background-position: 0 -17px;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
{
background-position: -17px -17px;
}
.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
{
background-position: 0 0;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
{
background-position: -17px 0;
}
/* Hide button text */
.showcase-thumbnail-button-forward span span,
.showcase-thumbnail-button-backward span span
{
display: none;
}
/* Clear (used for horizontal thumbnails)
-------------------------------------------*/
.clear
{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
float: none;
}
Can I tell the browser I want the slideshow ALWAYS center with the page and the left and right arrows to ALWAYS be 200px or so away from the left and right edges of the screen?
Here is a copy of everything so far: Website Zipped Archive
