Skip navigation
Wim_v_B
Currently Being Moderated

Lay-out is scrammbled in DW CS4

May 24, 2013 4:29 AM

Tags: #background #menubar #lay-out

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

 
Replies
  • Currently Being Moderated
    May 24, 2013 6:43 AM   in reply to Wim_v_B

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 6:46 AM   in reply to Jon Fritz II

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 26, 2013 6:40 AM   in reply to Wim_v_B

    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(isN aN(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.vis ibility="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_Sn ap.arguments;a=parseInt(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){whil e(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.styl e.top);}else{

      w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0 :a;b=(Math.abs(b)<1000)?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(d d+'.left');y+=eval(dd+'.top');

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

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

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

    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/Submenu/ButtBestuurBl.png','../Images/Buttons/Submen u/ButtBoksersBl.png','../Images/Buttons/Submenu/ButtTrainerBl.png','.. /Images/Buttons/Submenu/ButtSportBl.png','../Images/Buttons/Submenu/Bu ttJeugdBl.png','../Images/Buttons/Submenu/Butt55Bl.png','../Images/But tons/Submenu/ButtTrainingBl.png','../Images/Buttons/Submenu/ButtTijden Bl.png','../Images/Buttons/Submenu/ButtLidBl.png','../Images/Buttons/S ubmenu/ButtAlgemeenBl.png','../Images/Buttons/Submenu/ButtOverOnsBl.pn g','../Images/Buttons/Submenu/ButtFotosBl.png','../Images/Buttons/Subm enu/ButtVideosBl.png','../Images/Buttons/Submenu/ButtPersBl.png','../I mages/Buttons/Submenu/ButtAdresBl.png','../Images/Buttons/Submenu/Butt SocMedBl.png','../Images/Buttons/ButtHomew.png','../Images/Buttons/But tTeamw.png','../Images/Buttons/ButtBoksenw.png','../Images/Buttons/But tAgendaw.png','../Images/Buttons/ButtNieuwsw.png','../Images/Buttons/B uttMediaw.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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 26, 2013 6:42 AM   in reply to MurraySummers

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 26, 2013 7:33 AM   in reply to Wim_v_B

    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").

     
    |
    Mark as:
  • Currently Being Moderated
    May 26, 2013 8:51 AM   in reply to Wim_v_B

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points