resizing page causes images to shift

[nutt318]

I found this free template and would like to use it but I have found one thing that I do not like about it. The problem is when you shrink the browser window down it shifts over some of the images and there is a weird break in the top of the page.

 

For example, here is a link to the free template.

http://www.freecsstemplates.org/preview/decorative

 

Now drag the right side of your browser window the the left to make the page smaller and it shifts the images to the right.

 

How do i make the image static so they do not move when the window is resized.

 

Thanks.

[phpQuestioner]

 

Try setting the min-width for the div or html element that contains that image. I didn't look at the html or css; but I'm sure it is a coding error on there part.

[nutt318]

Well I tried to find what you were talking about but I dint have any luck. Would you mind showing me? Also now my header image just stays stationary and doesnt move with the reisizing of the page. Also image1 should be the repeating background image, Thanks.

 

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
margin: 0;
padding: 0;
}

body {
background: url(images/img01.png) repeat-y center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #9E9D89;
}

form {
}

input, textarea {
border: 1px solid #DEDED1;
font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
}

input.text {
padding: .15em;
background: #FDFDFB url(images/img06.gif) repeat-x;
}

input.button {
background: #763320 url(images/img07.gif) repeat-x;
color: #FFFFFF;
}

h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #D15803;
}

h1 {
letter-spacing: -.05em;
font-size: 2.2em;
}

h2 {
margin-top: 1em;
letter-spacing: -.05em;
font-size: 1.4em;
}

h3 {
margin-top: 1em;
}

p, ul, ol {
margin-top: 1em;
line-height: 100%;
}

ul {
list-style: none;
}

ul li {
margin-left: 1em;
padding-left: .75em;
background: url(images/img05.gif) no-repeat left top;
}

ol {
margin-left: 1em;
list-style-position: inside;
}

blockquote {
margin-left: 1em;
padding-left: .75em;
border-left: 1px solid #9E9D89;
}

a {
text-decoration: none;
color: #D15803;
}

a:hover {
text-decoration: underline;
color: #827F4F;
}

/* Header */

#header {
width: 860px;
height: 100px;
margin: 0 auto;
padding: 0 40px;
background: url(images/img02.png);
margin: 0 auto;

}

#header h11#logo-text {
margin: 0;
position: absolute;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: italic;
color: #F3F3E9;
font-size: 3em;
left: 68px;
top: 17px;
}

#header h12#slogan {
margin: 0;
position: absolute;
margin: 0; padding: 0;
font: normal 1em 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #F3F3E9;
top: 70px; left: 68px;	
}

#logo {
float: left;
}

#logo h1, h4 #logo p {
margin: 0;
padding-top: 25px;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-style: italic;
color: #F3F3E9;
}

#logo h1 {
font-size: 3em;
}

#logo h4 {
font-size: 1.2em;
}

#logo p {
padding: 48px 0 0 5px;
letter-spacing: -.055em;
font-size: 1.4em;
font-weight: bold;
}

#logo a {
color: #F3F3E9;
}

#search {
position: absolute;
width: 264px;

left: 665px;
top: 38px;
height: 22px;
}

#search fieldset {
border: none;
}

#search #s {
width: 13em;
}

/* Page */

#page {
width: 940px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 580px;
padding: 35px 50px 0 0;
background: url(images/img04.png) no-repeat right top;
}

.post {
}

.post .meta {
margin: 0 0 1.5em 0;
padding: 0 0 1px 10px;
background: url(images/img08.png) no-repeat left bottom;
line-height: normal;
}

.post .meta small {
font-size: 12px;
}

/* Sidebar */

#sidebar {
float: left;
width: 240px;
padding: 20px 0 0 30px;
background: url(images/img03.png) no-repeat;
font-size: smaller;
color: #E3E3D4;
}

#sidebar ul {
padding: 0;
list-style: none;
}

#sidebar li {
margin-bottom: 3em;
padding: 0;
background: none;
}

#sidebar li ul {
}

#sidebar li li {
margin: 0 0 0 1em;
padding-left: .75em;
background: url(images/img09.gif) no-repeat left center;
}

#sidebar h2 {
color: #FFFFFF;
}

#sidebar a {
color: #FFFFFF;
}

#sidebar p.small {
line-height: .2 em;
margin-top: .0em;
}

/* Footer */

#footer {
width: 860px;
margin: 0 auto;
padding: 20px 40px;
text-align: right;
}

#footer p {
font-size: 10px;
}

[dbrimlow]

Have you tried it without the top frame?

 

Frames are a nasty piece of work as well as being frowned upon by any who care anything about SEO.

[nutt318]

I am not sure what you mean, do you mean removing the header?

 

Im not sure where to look on fixing the issue with the page shifting either.

[mainewoods]

the reason those images move is this piece of css in the upper frame:

#menu
{
position: absolute;
right: 0em;
bottom: 0em;
}

--because the menu appears later in the source code,  it automatically has a higher z-index and will overlap the logo if the window is made thin enough

link to that css:

http://www.freecsstemplates.org/site/style.css

link to upper frame page:

http://www.freecsstemplates.org/preview/x/decorative

 

dbrimlow is right, lose those frames! they're poor with seo, they're poor with printing, and you can't bookmark them.

[dbrimlow]

I am not sure what you mean, do you mean removing the header?

 

Im not sure where to look on fixing the issue with the page shifting either.

 

After looking at this in depth, there is only one way to answer this problem ... this template is a REALLY bad concept in the whole design execution layout.

 

It can only be fixed with a lot of cross-browser manipulation that I don't have time for (after fighting it for @ two hours). It needs to be "re-engineered" ... trying to keep the liquid elements with graphics in alignment with the fixed elements with matching graphics is blowing it up ( the "#page select being a big culprit).

 

The layout was quite obviously created and tested exclusively in IE6 (while in quirks mode, no less) ... it SO uses the wrong doctype.

 

It is not compatible with modern browsers as coded at all. Frankly, it is a mess.

 

Sorry. I wish I could tell you differently, but this very simple looking design is a MONSTER the way it was converted to web layout.

 

Something important about why this is even worse because it uses Frames in general and HOW it uses frames specifically:

 

First, by "frames" we mean that this template uses three web pages to make two (or more) view at the same time.

 

Second, there is a special HTML and XHTML doctype DTD (instead of "strict" or "transitional") used specifically for frames called ... yup ... "frameset". Frameset DTDs include everything in a transitional DTD plus frames as well. Right off this shows that frames are deprecated.

 

Third, this was created by someone who is completely clueless about XHTML (as are 90% of the people who use xhtml at all) because it incorrectly uses and grossly abuses the XHTML 1.0 Strict doctype (Agghhh, I won't get started on XHTML abuse!!).

 

The Frameset DTD that SHOULD HAVE BEEN USED is:

 

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

 

Now, since the template is using the wrong DOCTYPE, the page does not validate and falls into Quirks mode. This just compounds the problem because once in quirks mode there is no telling what can be causing browsers to act differently.

 

So far as the specific problem with the image here, frames, quirks mode, etc are not the reason, they just show how the designer was not even looking in any modern browser while testing.

 

BUT!! As mainewoods mentions, frame pages are poor Search Engine Optimization ... here's why ... THIS is what a search engine bot sees when it comes to a page created by this template:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Template Preview (decorative) - Free CSS Templates</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" href="/site/style.css" />
	</head>

		<frameset rows="93,*">
			<frame scrolling="no" src="/preview/x/decorative" />
			<frame src="/preview/y/decorative" />
		</frameset>

</html>

 

THAT'S ALL.  PERIOD.

 

Because the pages with all of the text content (needed for the bot to first spider, then index) are in two external documents, in two completely different folders on the server; in this case:

 

"/preview/x/decorative"

and

/preview/y/decorative" .

 

My advice to you is to either find another template, or recreate this one yourself using wither liquid or fixed layout techniques independent of each other.

 

 

 

[nutt318]

dbrimlow, Wow thanks for the excellent explanation. I get now what everyone is talking about. I am a beginner to php and css so I do not know a lot but a some.

 

So it looks like I should start with a different template than this one. That is fine with me because I dont have a clue how to fix this one.

 

Does anyone have a suggestions on where some well written templates would be?

 

Thanks a ot for all of your help.

[mainewoods]

to quickly change to a non frames layout, just copy the actual html code in the body part of the top frames page into the bottom frames page at the beginning of the body section.  Also copy the css classes from the top frame css file into the bottom frame css file.  After that you can just use the url of the bottom frame to call the page and it will be a non frame page.  Ater that you can work out how to get rid of the 'fluid' layout that causes the graphics to move.