9 Replies Latest reply: May 26, 2013 8:51 AM by MurraySummers RSS

    Lay-out is scrammbled in DW CS4

    Wim_v_B

      Hi there,

      I’m making a website for a boxing club here in Holland.

      This is the test site; http://members.home.nl/wimenlyn

      On a monitor with a resolution up to about 1280 it is okay but on a larger resolution the background repeats, while it is set to non-repeat and fixed.

      The menu bar is too much to the right and the drop-downs in this menu are a few pixles away (down) from the menubar. On a smaller res they are against the bottom of the menu bar, as they should be.

      The bleu ‘quote’ at the bottom is way to the right too. It should stay in the black background.

       

      I’m trying to get the screen filled, with the background centered and not repeating. The menubar, the bleu ‘quote’ at the bottom and all the text should be in the black centre part of the background. Try one of the sub pages to see this black centre part of the background.

      Help, please.

      Thanks in advance,

      Wim

        • 1. Re: Lay-out is scrammbled in DW CS4
          Jon Fritz II MVP

          Your blue bar background is not set with css at all, you are using the html background attribute which will repeat automatically. Remove the html attribute and add a background-image and background-repeat setting to your css for the body element.

           

          You have a good number of html errors that could be causeing all kinds of display issues. Run your page through the validator at http://validator.w3.org/ HTML errors are one of the biggest layout breakers there are.

           

          If things still don't look right after the errors are taken care of, post back and we can take a closer look.

          • 2. Re: Lay-out is scrammbled in DW CS4
            MurraySummers ACP/MVPs

            Using absolute positioning for the menu and sub-menu elements is not helping either. It's much better to make each menu/submenu combination a nested list and use javascript to reveal the submenus as needed. There are nice menu systems out there that do it this way - a little work with Google would give you a lead.

            • 3. Re: Lay-out is scrammbled in DW CS4
              Wim_v_B Community Member

              Hi Jon and Murray,

               

              I use css for the background but now it doesn't work at all. I've been pissing about with it for a few days and tried all sorts of things and I think I really messed it up now.

              This is page from a template; http://members.home.nl/wimenlyn/Scripts/Naamloos-1.html background is nowhere to be found but it should be there. (I think,...)

              Here's the index page that I changed. http://members.home.nl/wimenlyn/index.htm Does this one look better now? I cannot check it on a large resolution monitor. Mine is 1440x900 and it looks fine here.

               

              Most of the errors that validator.w3.org came up with, were in ShowHide layers and SwapImage restore from the PVII menu.

              Funny thing is that they said this was wrong

              onbeforeunload="MM_showHideLayers (the bold " with a space next to it)

              or

              'hide','Layer5','','hide')"></a><a href="#" onMouseOut (the bold > with a space next to it)

              but in the code there was no space near these bold items. See the original source code from the page. That is the code the PVII layers came up with. I don't get it.

               

              Lots of errors were 'required attribute "ALT" not specified'.

              But that is for buttons on the menu. Why should there be an ALT attribute there?

               

              About the menu system Murray was talking about; I've installed CSS3MenuMaker and made a menu with it. I cannot find the way to get it inserted on a page in the right spot. Their site does not provide the answer. Any idea how to do that?

               

              Thanks in advance.

              Regards,

              Wim

              • 4. Re: Lay-out is scrammbled in DW CS4
                MurraySummers ACP/MVPs

                There are NO CSS styles on that first page you linked. There are two empty embedded stylesheets in the head, and one misplaced link to an empty stylesheet in the body of the page (shown below in bold). Fix those first (in the template page) before continuing with anything else.

                 

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

                <html><!-- InstanceBegin template="/Templates/Temp K3.dwt" codeOutsideHTMLIsLocked="false" -->

                <head>

                <!-- InstanceBeginEditable name="doctitle" -->

                <title>.: Boksvereniging Bredase Ring :.</title>

                <!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

                <style type="text/css">

                <!--

                -->

                </style>

                 

                 

                <STYLE>

                <!--

                -->

                </STYLE>

                <script language="JavaScript" type="text/JavaScript">

                <!--

                function MM_preloadImages() { //v3.0

                  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                }

                 

                 

                function MM_swapImgRestore() { //v3.0

                  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

                }

                 

                 

                function MM_findObj(n, d) { //v4.01

                  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

                    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

                  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

                  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

                  if(!x && d.getElementById) x=d.getElementById(n); return x;

                }

                 

                 

                function MM_swapImage() { //v3.0

                  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

                   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

                }

                //-->

                </script>

                <script language="JavaScript" type="text/JavaScript">

                <!--

                function MM_reloadPage(init) {  //reloads the window if Nav4 resized

                  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

                    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

                  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

                }

                MM_reloadPage(true);

                 

                 

                function P7_autoLayers() { //v1.5 by PVII

                var g,b,k,f,u,k,j,args=P7_autoLayers.arguments,a=parseInt(args[0]);if(isNaN(a))a=0;

                if(!document.p7setc){p7c=new Array();document.p7setc=true;for(u=0;u<10;u++){

                p7c[u]=new Array();}}for(k=0;k<p7c[a].length;k++){if((g=MM_findObj(p7c[a][k]))!=null){

                b=(document.layers)?g:g.style;b.visibility="hidden";}}for(k=1;k<args.length;k++){

                if((g=MM_findObj(args[k]))!=null){b=(document.layers)?g:g.style;b.visibility="visible";f= false;

                for(j=0;j<p7c[a].length;j++){if(args[k]==p7c[a][j]) {f=true;}}

                if(!f){p7c[a][p7c[a].length++]=args[k];}}}

                }

                 

                 

                function P7_Snap() { //v2.67 by PVII

                var g,x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,tw,q0,xx,yy,w1,pa='px',args=P7_Snap.arguments;a=parse Int(a);

                if(document.layers||window.opera){pa='';}for(k=0;k<(args.length);k+=4){

                if((g=MM_findObj(args[k]))!=null){if((el=MM_findObj(args[k+1]))!=null){

                a=parseInt(args[k+2]);b=parseInt(args[k+3]);x=0;y=0;ox=0;oy=0;p="";tx=1;

                da="document.all['"+args[k]+"']";if(document.getElementById){

                d="document.getElementsByName('"+args[k]+"')[0]";if(!eval(d)){

                d="document.getElementById('"+args[k]+"')";if(!eval(d)){d=da;}}

                }else if(document.all){d=da;}if(document.all||document.getElementById){while(tx==1){

                p+=".offsetParent";if(eval(d+p)){x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+ p+".offsetTop"));

                }else{tx=0;}}ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);tw=x+ox+y+oy;

                if(tw==0||(navigator.appVersion.indexOf("MSIE 4")>-1&&navigator.appVersion.indexOf("Mac")>-1)){

                  ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);}else{

                  w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<10 00)?0:b;

                  x=document.body.scrollLeft+event.clientX+bx;y=document.body.scrollTop+event.clientY;}}

                }else if(document.layers){x=g.x;y=g.y;q0=document.layers,dd="";for(var s=0;s<q0.length;s++){

                  dd='document.'+q0[s].name;if(eval(dd+'.document.'+args[k])){x+=eval(dd+'.left');y+=eval(d d+'.top');

                  break;}}}e=(document.layers)?el:el.style;xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);

                if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){

                  xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);}

                e.left=xx+pa;e.top=yy+pa;}}}

                }

                 

                 

                function MM_showHideLayers() { //v6.0

                  var i,p,v,obj,args=MM_showHideLayers.arguments;

                  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

                    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

                    obj.visibility=v; }

                }

                 

                 

                function MM_goToURL() { //v3.0

                  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;

                  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");

                }

                //-->

                </script>

                <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

                 

                 

                </head>

                 

                 

                <body link="#FFFFFF" vlink="#999999" class="Background" onLoad="MM_preloadImages('../Images/Buttons/Submenu/ButtToenBl.png','../Images/Buttons/Su bmenu/ButtBestuurBl.png','../Images/Buttons/Submenu/ButtBoksersBl.png','../Images/Buttons/ Submenu/ButtTrainerBl.png','../Images/Buttons/Submenu/ButtSportBl.png','../Images/Buttons/ Submenu/ButtJeugdBl.png','../Images/Buttons/Submenu/Butt55Bl.png','../Images/Buttons/Subme nu/ButtTrainingBl.png','../Images/Buttons/Submenu/ButtTijdenBl.png','../Images/Buttons/Sub menu/ButtLidBl.png','../Images/Buttons/Submenu/ButtAlgemeenBl.png','../Images/Buttons/Subm enu/ButtOverOnsBl.png','../Images/Buttons/Submenu/ButtFotosBl.png','../Images/Buttons/Subm enu/ButtVideosBl.png','../Images/Buttons/Submenu/ButtPersBl.png','../Images/Buttons/Submen u/ButtAdresBl.png','../Images/Buttons/Submenu/ButtSocMedBl.png','../Images/Buttons/ButtHom ew.png','../Images/Buttons/ButtTeamw.png','../Images/Buttons/ButtBoksenw.png','../Images/B uttons/ButtAgendaw.png','../Images/Buttons/ButtNieuwsw.png','../Images/Buttons/ButtMediaw. png','../Images/Buttons/ButtContactw.png')">

                <p> </p>

                <link href="Background.css" rel="stylesheet" type="body/css">

                <div align="center">

                ...

                table content deleted.

                ...

                </body>

                <!-- InstanceEnd --></html>

                • 5. Re: Lay-out is scrammbled in DW CS4
                  MurraySummers ACP/MVPs

                  Oh, yes, you have "body/css" in that link, and it should be "text/css".

                  • 6. Re: Lay-out is scrammbled in DW CS4
                    Wim_v_B Community Member

                    Hi Murray,

                    took care of the empty style issues and the body/css instead of the text/css.

                    On http://members.home.nl/wimenlyn/Scripts/Naamloos-1.html still no background.

                    Any idea?

                    Where should i be in code to add the background css? I added 'Backgound' in line 96 and before that in line 95. Both cases no results.

                    Wim

                    • 7. Re: Lay-out is scrammbled in DW CS4
                      MurraySummers ACP/MVPs

                      If you want to apply a background image to the body, you need to assign it to the body tag in your CSS. You still have no CSS on the page! The "Background.css" file is empty, and the embedded stylesheet on the page is also empty. Try changing this -

                       

                      <style type="text/css">

                      </style>

                       

                      to this in your code -

                       

                      <style type="text/css">

                      body { background-image:url(path_to_image.jpg); }

                      </style>

                       

                      and see what happens (you can remove the link to "Background.css" since it is empty and you can remove the 'class="Background"' from the body tag since you have not defined a CSS selector with the class name ".Background").

                      • 8. Re: Lay-out is scrammbled in DW CS4
                        Wim_v_B Community Member

                        Hi Murray,

                        did what you wrote but no background.

                        It doesn't matter if I use body {background-image:url(/Images/imag003.jpg)}

                        or

                        body {background-image:url(../Images/imag003.jpg)}

                        (Two dots)

                         

                        I don't get it that the background css is empty.

                        This is it:

                         

                        .Background {

                        background-attachment: fixed;

                        background-image: url(/Images/imag003.jpg);

                        background-repeat: no-repeat;

                        width: 90%;

                        margin-top: 0px;

                        margin-right: auto;

                        margin-bottom: 0px;

                        margin-left: auto;

                        background-color: #000;

                        }

                         

                        As you may notice i'm not familiar with CS4. I used to work with MX. But MX crashes with some functions, running Windows 7 Ultimate. CS4 is very different. Need to get a course, I think.

                        Thanks.

                        Wim

                        • 9. Re: Lay-out is scrammbled in DW CS4
                          MurraySummers ACP/MVPs

                          You have removed the link to the CSS file from your latest version of the page. When I last checked "Background.css" though it was completely empty.

                           

                          Change your embedded CSS to this -

                           

                          <style type="text/css">

                          body {background-image:url(/Images/imag003.jpg); }

                          </style>

                           

                          You had omitted the closing "}" in your CSS rule.

                           

                          That should do the trick with your background image.