Jump to content
Stef's Coding Community
Chadericstevens

CSS Positioning Problem

Recommended Posts

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:

initial%20load.jpg

 

After Re-sizing:

after%20resizing.jpg

 

/* 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...