PDA

View Full Version : Photoshop web layout button issues


jk3000
09-27-2009, 09:08 AM
I,m tring to take my photoshop buttons and put them into dreamweaver. just not sure of the best way of doing it. Every time i try to insert image rollover, and put them in a div, they dont algin right.



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
background-image: url(images/sig-shop-layout-before-buttons-text.jpg);
height: 800px;
width: 770px;
margin: auto;
}
#navbar {
height: 50px;
width: 178px;
margin-top: 112px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: none;
}
#bt2 {
height: 50px;
width: 145px;
margin-top: -70px;
margin-left: 179px;
background-image: none;
}
#bt3 {
height: 50px;
width: 145px;
margin-top: -55px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 323px;
background-image: url(images/images/sig-shop-layout-before-buttons-tex2t_04.jpg);
}
#bt4 {
height: 50px;
width: 147px;
margin-top: -50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 468px;
background-image: url(images/images/sig-shop-layout-before-buttons-tex2t_04.jpg);
}
body {
background-color: #A16146;
}
-->
</style>
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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>
</head>

<body onload="MM_preloadImages('images/images/images/sig-shop-layout-before-buttons-tex3t_01.jpg','images/images/images/sig-shop-layout-before-buttons-tex3t_02.jpg')">
<div id="wrapper"> <br />
<div id="navbar"><br />
</div>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/images/images/sig-shop-layout-before-buttons-tex3t_01.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_01.jpg" name="home" width="178" height="63" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/images/images/sig-shop-layout-before-buttons-tex3t_02.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_02.jpg" name="Image2" width="145" height="61" border="0" id="Image2" /></a>
<div id="bt2"><br />
</div>
<div id="bt3"><br />
</div>
<div id="bt4"><br /></div>
</div>
</body>
</html>

I have all the buttons sliced. The 1st pic is what i want the rollover to look like. Then in the 2nd pic is its normal state,I also have the click effect. Placing these buttons where i want them has led me too bang my head against my desk......time and time again

urbanrays
09-27-2009, 09:41 AM
Hi
There may be an easier way, but have you tried this

a:link {
background-image: url(img/buttoff.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 30px;
width: 70px;
display: block;
}
a:visited {
margin: 0px;
padding: 0px;
height: 30px;
width: 100px;
background-image: url(img/buttoff.gif);
background-repeat: no-repeat;
display: block;
}
a:hover {
background-image: url(img/buttho.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 30px;
width: 100px;
display: block;
}
a:active {
background-image: url(img/buttoff.gif);
background-repeat: no-repeat;
height: 30px;
width: 100px;
margin: 0px;
padding: 0px;
display: block;
}
.button1 {
margin: 0px;
padding: 0px;
height: 30px;
width: 70px;
display: block;
}

jk3000
09-27-2009, 05:34 PM
Thank you for your response, I tried doing what u told me with no luck.
But after watching some more tutorials I did get it.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper {
background-image: url(images/sig-shop-layout-before-buttons-text.jpg);
margin: auto;
height: 800px;
width: 770px;
}


body {
background-color: #A16146;
}
#navbar {
height: 52px;
width: 770px;
margin-top: 0px;
padding-top: 178px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav {
height: 50px;
width: 770px;
margin-top: 200px;
}
-->
</style>
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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>
</head>

<body onload="MM_preloadImages('images/images/images/sig-shop-layout-before-buttons-tex3t_01.jpg','images/images/images/sig-shop-layout-before-buttons-tex3t_02.jpg','images/images/images/sig-shop-layout-before-buttons-tex3t_03.jpg','images/images/images/sig-shop-layout-before-buttons-tex3t_04.jpg')">
<div id="wrapper">
<div id="navbar"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/images/images/sig-shop-layout-before-buttons-tex3t_01.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_01.jpg" alt="home" name="home" width="178" height="61" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/images/images/sig-shop-layout-before-buttons-tex3t_02.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_02.jpg" alt="gallery" name="Gallery" width="145" height="61" border="0" id="Gallery" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/images/images/sig-shop-layout-before-buttons-tex3t_03.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_03.jpg" alt="contact" name="contact" width="145" height="61" border="0" id="contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/images/images/sig-shop-layout-before-buttons-tex3t_04.jpg',1)"><img src="images/images/sig-shop-layout-before-buttons-tex2t_04.jpg" alt="links" name="links" width="156" height="61" border="0" id="links" /></a></div>
<br />
</div>
</body>
</html>

Tried it in IE, firefox and chrome. I guess a lot of this stuff is trial and error