Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Dreamweaver Positioning Problem

Options
  • 22-08-2010 10:06pm
    #1
    Rycn
    Closed Accounts Posts: 722 ✭✭✭


    Not the greatest at html or css but i can get around dreamweaver handy enough.
    I presume this is a pretty simple problem but im not the sharpest knife in the drawer :rolleyes:

    This is in Dreamweaver:
    shot1.jpg?t=1282510601
    The light gray image in the background was placed as a background image using css.
    The Home, Centre, Services and Contact images are all seperate rollover images and im basically trying to place them over where the blue arrow points, flush with the bg image, to use as a navbar. Also i have no idea how to space them out enough or position them where i want, tried to create a css for them but messed up and removed it.

    This is the same thing previewed in firefox:
    shot2.jpg?t=1282510904
    The blue part im trying to show you where i want it to be flush against the bg image, and the red is where i want to space it out. I also want to push the whole bar of 4 images over to the right, underneath the white text. (text is part of bg image)

    Aswell i have no idea why it doesnt look like this in actual dreamweaver.

    Hope someone can help me, im only learning the ropes.

    Thanks :)


Comments

  • Options
    #2
    Creamy Goodness
    Registered Users Posts: 26,579 ✭✭✭✭Creamy Goodness


    post up the html and css as well otherwise people will only be taking wild stabsin the dark as to what could be causing it.


  • Options
    #3
    Rycn
    Closed Accounts Posts: 722 ✭✭✭Rycn


    Heres the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Site</title>
    <style type="text/css">
    body {
    background-image: url(images/bg.jpg);
    background-repeat: repeat-x;
    }
    </style>
    <link href="CSS/layout.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }
    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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    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[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>

    <body onload="MM_preloadImages('images/home_over.png','images/thecentre_over.png','images/services_over.png','images/contact_over.png')">
    <div align="center" id="wrapper">
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.png',1)"><img src="images/home.png" name="home" width="108" height="33" border="0" id="home" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('thecentre','','images/thecentre_over.png',1)"> <img src="images/thecentre.png" name="thecentre" width="108" height="33" border="0" id="thecentre" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/services_over.png',1)"><img src="images/services.png" name="services" width="108" height="33" border="0" id="services" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_over.png',1)"><img src="images/contact.png" name="contact" width="108" height="33" border="0" id="contact" /></a></p>
    </div>
    </body>
    </html>

    * {
    margin: 0px;
    padding: 0px;
    }
    #wrapper {
    background-image: url(../images/header.jpg);
    background-position: center;
    height: 147px;
    width: 903px;
    margin-right: auto;
    margin-left: auto;
    }


  • Options
    #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    wrap the tabs into a div and give it float:right; text-align:center; style.

    google for CSS tabs to pick up some style that does whatever you need.
    Can be easily achieved without JS script but only CSS

    e.g. http://www.htmldog.com/examples/tabs4.html


  • Options
    #5
    site designer
    Registered Users Posts: 66 ✭✭site designer


    Try this, I used padding left (you could use margin left either) as 300px so you can position exactly where you want it, as float right would have it to the extreme right. don't ever rely on dreamweaver to look anything like the browser, there would be borders on the a tags
    Rycn wrote: »
    Heres the code:



    <body onload="MM_preloadImages('images/home_over.png','images/thecentre_over.png','images/services_over.png','images/contact_over.png')">
    <div align="center" id="wrapper">
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p>

    <div id="menubar"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.png',1)"><img src="images/home.png" name="home" width="108" height="33" border="0" id="home" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('thecentre','','images/thecentre_over.png',1)"> <img src="images/thecentre.png" name="thecentre" width="108" height="33" border="0" id="thecentre" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/services_over.png',1)"><img src="images/services.png" name="services" width="108" height="33" border="0" id="services" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contact_over.png',1)"><img src="images/contact.png" name="contact" width="108" height="33" border="0" id="contact" /></a>
    </div></p>
    </div>
    </body>
    </html>

    * {
    margin: 0px;
    padding: 0px;
    }
    #menubar{
    padding-left:300px;
    }

    a {
    border:0px;
    padding:0px;
    }

     #wrapper {
    background-image: url(../images/header.jpg);
    background-position: center;
    height: 147px;
    width: 903px;
    margin-right: auto;
    margin-left: auto;
    }


  • Options
    #6
    Rycn
    Closed Accounts Posts: 722 ✭✭✭Rycn


    site designer wrote: »
    Try this, I used padding left (you could use margin left either) as 300px so you can position exactly where you want it, as float right would have it to the extreme right. don't ever rely on dreamweaver to look anything like the browser, there would be borders on the a tags
    thanks very much, youre a lifesaver :)


  • Advertisement
  • Options
    #7
    site designer
    Registered Users Posts: 66 ✭✭site designer


    no probs buddy beans - few things also you shouldn't use
    <p> </p>
    for vertical height, different browsers interprut them differently.
    - remove them and change the height of menubar div to equal the bkground, you can adjust with padding-top like before


Advertisement