CMS Made Simple Forums

Posted: **Sat Dec 12, 2009 7:00 pm**

hi,
how can i avoid the flickering rollover-effect on my site: http://www.gruenwalderhof.at?
i tried preloading the background image, but i don't really know how to implement it - the preload doesn't work.

this is my template:

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>{sitename} - {title}</title>
 {metadata}
 {stylesheet}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>

<__script__ language="javascript">
<!--
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("uploads/images/startbild/start_hg.gif");
//--></__script>

    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(1024,1200));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}

{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}
  </head>
  </__body onload="preloadimages()">
    <div id="pagewrapper">
{* Start Content *}
      <div id="content">
           <div id="bild_oben">
           </div>
           <div id="bildmitte">
               <div id="mittelinks">
                  <a href="{cms_selflink href="willkommen"}" title="" id="willkomm" tabindex="1"></a>
               </div>
               <div id="raute">
               </div>
               <div id="mitterechts">
                  <a href="{cms_selflink href="welcome"}" title="" id="welcom" tabindex="2"></a>
               </div>
           </div>

           <div id="bild_unten">
           </div>
          {content}  

      </div>
{* End Content Area *}
        <div class="clear"></div>
      </div>
    </div>
  <__body>
</__html>

and this is the css:

Code: Select all

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: left;
	font-family: "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	font-size: 85.01%;
	line-height: 1em;
	background: #fffcd8;
}

div {
	font-size: 1em;
}


img {
	border: 0;
}


a, a:link a:active {
	text-decoration: underline;
	color: #695738;
}

a:visited {
	text-decoration: underline;
	color: #bfb29d;
}

a:hover {
	text-decoration: none;
	color: #86775d;
}

/*****************basic layout *****************/
body {
	margin: 0;
	padding: 0;
	color: #86775d;
	background: url(uploads/images/startbild/start_hg.gif)no-repeat center top;
}

div#pagewrapper {
	width: 1024px;
	margin: 0 auto;
	background-color: #fffcd8;
	color: #86775d;
}

div#header {
	height: 230px;
	margin: 0;
	padding: 0;
}

div#bild_oben {
	background: url(uploads/images/startbild/wald_oben.gif) no-repeat left top;
	height:306px;
}

div#bildmitte {
	height:158px;
        width:148px;
}

div#mittelinks {
	width:438px;
	height:158px;
margin-top:-1px;
}

div#mitterechts {
	width:438px;
	height:158px;
margin-left:586px;
margin-top:-158px;
}

div#raute {
	background: url(uploads/images/startbild/raute_passiv.gif) no-repeat left top;
	height:158px;
	width:148px;
margin-left:438px;
margin-top:-158px;
}

a#willkomm {
	background: transparent url(uploads/images/startbild/willkommen_passiv.gif) no-repeat;
	display: block;
	background-image: url(uploads/images/startbild/willkommen_passiv.gif) no-repeat left top;
	width:438px;   
	height:158px;  
}

a:hover#willkomm {
	background: transparent url(uploads/images/startbild/willkommen_aktiv.gif) no-repeat;
	display: block;
	width:438px; 
	height:158px;   
}

a#welcom {
	background: transparent url(uploads/images/startbild/welcome_passiv.gif) no-repeat;
	display: block;
	width:438px;    
	height:158px;   
}

a:hover#welcom {
	background: transparent url(uploads/images/startbild/welcome_aktiv.gif) no-repeat;
	display: block;
	width:438px;  
	height:158px;  
}

div#bild_unten {
	background: url(uploads/images/startbild/wald_unten.gif) no-repeat left top;
	height: 304px;
       clear: both;
margin-top:-1px;
}

div#header h1 {
	margin: 0;
	padding: 0;
	line-height: 0;
	font-size: 0;
	position: inline;
	background: url(uploads/videogruen/muster230_00.jpg) no-repeat left top; */
}
div#header h2 {
	float: right;
	line-height: 1.2em;
	font-size: 1.5em;
	margin: 35px 65px 0px 0px;
	color: #86775d;
	text-indent: -999em;
}

div#content {
	margin: 0 auto 2em 0;
	padding: 0px;
}

/********************CONTENT STYLING*********************/

div#footer {
	padding: 0px 10px 0px 20px;
	color: #86775d; */
	background: url(uploads/ngrey/wtopleft.gif) no-repeat left top; */
}
div.leftfoot {
	float: left;
	width: 30%;
	margin-left: 20px
}
div#footer p {
	font-size: 0.7em;
	padding: 2em 1em 0px 1em;
	text-align: right;
	margin: 0;
}
div#footer p a {
	color: #86775d;
}
.minitext {
	font-size: 0.7em;
}
.minitext_fett {
	font-size: 0.7em;
	font-weight: bold;
}
code, pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}

pre {
	border: 1px solid #000;
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}

div.templatecode {
	margin: 0 0 2.5em;
}

Posted: **Sun Dec 13, 2009 8:22 pm**

If you are using 2 images, one for standard state and another for hover stitch them together with defaualt state image on top then on hover use css to move image up the amount of pixels need to show hover state...

Posted: **Mon Dec 14, 2009 7:26 am**

hmmm... that sounds clever! thanks for the trick, i will try that!
pigsound

Posted: **Tue Dec 15, 2009 6:02 pm**

ok, i tried around a bit and it looks fine now in firefox apart from the fact that the left rollover button changes to hover mode and the right one changes at the same time - but moving the mouse over the right rollover button doesn't trigger the left one to change into hover mode. very strange.

and it's a total nightmare in both ie7 and ie8.

what the **** am i doing wrong?

Posted: **Tue Dec 15, 2009 7:13 pm**

The problem on your start page is margin and positioning.
The divs for left and right link overlap each other thats why you get a hover state when you mouseover left link.
A quick fix would be setting your wrapper to position:relative and both buttons to absolute with left:0; and right button to right:0;
that would fix you hover state but you would also need to fix a:hover then to

Easier fix would be using PNG images for the text instead of divs and positioning, saving them to PNG8 in fireworks saves you even from using javascript to fix png transparency in IE6.
The flickering on your right image (if thats the flickering you mean) is caused either threw false position of the image in css or you positioned the text wrong for the hover state image when saving/deisgning the layout.

Also i would use green background color for the entry page and fade the trees about 10-20px before end of image

just a quick tip.

Posted: **Sun Dec 20, 2009 3:20 pm**

thanks for your advice... the problem with the overlapping right button getting triggered when moving the mouse over the left button is solved.

since i don't have fireworks i cannot make png8-files. i must find a different solution for the following problem:
my background pic for the hover state moves over the foreground-pic positioned above the button. this happens in firefox as well as in ie 6 and 7. what's that!? is there something in the order of my css-commands that causes this mistake or something else i'm doning wrong? i bet! please help me with that again...

and thank you for your suggestion of using green background color for the entry page. i'll think about it

Posted: **Sun Dec 20, 2009 8:33 pm**

When using stitched together images, one on top of the other you need to use background position to move the image not -136px margin...

#mittelinks a {
background-image: url(uploads/imagepath/image.jpg);
background-position: 0px 0px;
}

Then in hover call you can just use the position call to move it up, no need to call the image again...

#mittelinks a:hover {
background-position: 0px -136px;
}

Posted: **Mon Dec 21, 2009 7:51 am**

looks good! thank you for your advice!

see you in arizona next march - i'm going to spend my holidays there...

CMS Made Simple Forums

[solved]flickering buttons

[solved]flickering buttons

Re: flickering buttons

Re: flickering buttons

Re: flickering buttons

Re: flickering buttons

Re: flickering buttons

Re: flickering buttons

[solved]Re: flickering buttons