Chadericstevens Posted May 29, 2012 Report Share Posted May 29, 2012 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 Quote Link to comment Share on other sites More sharing options...
BuildMyWeb Posted May 30, 2012 Report Share Posted May 30, 2012 you are correct in that it is an absolute positioning issue. i would center the site with an invisible container of fixed width. adjust your slideshow element with margins, as necessary Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.