 |  |  |  |  |  |  |  |
Newbies buttons/links
Thread Solved |
I Created a button in PShop and transferred it to the images folder in the Dreamweaver file..I then inserted the button image in a Table in a Layer in the right location on the page ..
Then the button moves from its position when the page is viewed in Explorer?
I have 7 buttons/links on the page , in line and at this rate without some much appreciated help the page might get done by 2010!
help appreciated..
Turock.
Then the button moves from its position when the page is viewed in Explorer?
I have 7 buttons/links on the page , in line and at this rate without some much appreciated help the page might get done by 2010!
help appreciated..
Turock.
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation: 
Solved Threads: 36
Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.
•
•
•
•
Originally Posted by vishesh 
Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.
hers the html code file
hope this helps
im not sure but i may have aother questions as i get along with this site
turock
•
•
•
•
Originally Posted by vishesh
Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.
if u emailm e agian i should be able to attach it.
turock
•
•
Join Date: Oct 2005
Posts: 1,283
Reputation:
Solved Threads: 14
If you are still interested just paste your html the text box ont he reply for between these two tags: [*html] and [/*html] (take away the stars. For example
[html]<html>
<head>
</head>
<body>
<div>hello</div>
</body>
</html>
[/html]
[html]<html>
<head>
</head>
<body>
<div>hello</div>
</body>
</html>
[/html]
[quote=roryt;269078]If you are still interested just paste your html the text box ont he reply for between these two tags: [*html] and [/*html] (take away the stars. For example
<!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= "video, games, ring tones, news,animation, ozwarriors, webman, chameleons "text/html; charset=iso-8859-1" />
<title>Kooltube1</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:108px;
height:17px;
z-index:1;
left: 320px;
top: 139px;
}
a:link {
text-decoration: none;
color: #0033FF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#Layer2 {
position:absolute;
width:105px;
height:22px;
z-index:1;
left: 322px;
top: 138px;
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0033FF;
}
#Layer3 {
position:absolute;
width:109px;
height:21px;
z-index:2;
left: 427px;
top: 138px;
}
#Layer4 {
position:absolute;
width:111px;
height:22px;
z-index:3;
left: 536px;
top: 138px;
}
#Layer5 {
position:absolute;
width:105px;
height:21px;
z-index:4;
left: 647px;
top: 138px;
}
#Layer6 {
position:absolute;
width:111px;
height:22px;
z-index:5;
left: 754px;
top: 138px;
}
#Layer7 {
position:absolute;
width:104px;
height:22px;
z-index:6;
left: 869px;
top: 137px;
}
#Layer8 {
position:absolute;
width:587px;
height:17px;
z-index:7;
left: 349px;
top: 178px;
background-color: #66CCFF;
}
#Layer9 {
position:absolute;
width:216px;
height:160px;
z-index:7;
}
#Layer10 {
position:absolute;
width:1197px;
height:21px;
z-index:7;
left: 8px;
top: 160px;
background-color: #FFFFFF;
}
.style9 {color: #FF00FF}
#Layer11 {
position:absolute;
width:909px;
height:208px;
z-index:8;
top: 181px;
}
#Layer12 {
position:absolute;
width:900px;
height:197px;
z-index:8;
top: 181px;
left: 5px;
}
#Layer13 {
position:absolute;
width:322px;
height:707px;
z-index:9;
left: 911px;
top: 183px;
}
#Layer14 {
position:absolute;
width:295px;
height:701px;
z-index:9;
left: 911px;
top: 184px;
}
#Layer15 {
position:absolute;
width:901px;
height:497px;
z-index:10;
top: 387px;
left: 9px;
}
#Layer16 {
position:absolute;
width:908px;
height:208px;
z-index:10;
top: 383px;
left: 5px;
}
#Layer17 {
position:absolute;
width:905px;
height:221px;
z-index:11;
top: 590px;
left: 5px;
}
body {
background-color: #FFFFFF;
}
#Layer18 {
position:absolute;
width:200px;
height:61px;
z-index:12;
left: 32px;
top: 42px;
}
#Layer19 {
position:absolute;
width:197px;
height:135px;
z-index:12;
left: 53px;
top: 72px;
}
#Layer20 {
position:absolute;
width:203px;
height:140px;
z-index:12;
left: 31px;
top: 66px;
}
#Layer21 {
position:absolute;
width:200px;
height:179px;
z-index:12;
left: 32px;
top: 43px;
}
#Layer22 {
position:absolute;
width:200px;
height:146px;
z-index:12;
left: 31px;
top: 47px;
}
.style24 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-weight: bold; font-size: 12px; }
.style26 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-size: 12px; font-weight: bold; color: #0033FF; }
#Layer23 {
position:absolute;
width:249px;
height:159px;
z-index:12;
left: 23px;
top: 71px;
}
#Layer24 {
position:absolute;
width:216px;
height:18px;
z-index:12;
left: 20px;
top: 39px;
}
.style28 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-weight: bold; font-size: 12px; color: #999999; }
.style31 {color: #000000}
#Layer25 {
position:absolute;
width:155px;
height:112px;
z-index:12;
left: -616px;
top: 47px;
}
#Layer26 {
position:absolute;
width:117px;
height:115px;
z-index:12;
left: -873px;
top: 247px;
}
#Layer27 {
position:absolute;
width:214px;
height:107px;
z-index:12;
left: 41px;
top: 46px;
}
#Layer28 {
position:absolute;
width:117px;
height:115px;
z-index:12;
left: 48px;
top: 49px;
}
#Layer29 {
position:absolute;
width:200px;
height:115px;
z-index:12;
left: 187px;
top: 49px;
}
#Layer30 {
position:absolute;
width:237px;
height:316px;
z-index:12;
left: 31px;
top: 297px;
}
#Layer31 {
position:absolute;
width:232px;
height:38px;
z-index:12;
left: 33px;
top: 256px;
}
#Layer32 {
position:absolute;
width:442px;
height:17px;
z-index:12;
left: 418px;
top: 1px;
}
#Layer33 {
position:absolute;
width:437px;
height:21px;
z-index:12;
left: 420px;
top: -2px;
}
#Layer34 {
position:absolute;
width:565px;
height:18px;
z-index:12;
left: 358px;
top: 160px;
}
#Layer35 {
position:absolute;
width:903px;
height:205px;
z-index:13;
top: 588px;
left: 7px;
}
#Layer36 {
position:absolute;
width:902px;
height:92px;
z-index:14;
left: 7px;
top: 790px;
background-color: #0033FF;
}
#Layer37 {
position:absolute;
width:690px;
height:23px;
z-index:15;
left: 323px;
top: 158px;
}
#Layer38 {
position:absolute;
width:107px;
height:18px;
z-index:15;
left: 322px;
top: 163px;
}
.style39 {
font-size: 12px;
font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline;
color: #FFFFFF;
}
#Layer39 {
position:absolute;
width:106px;
height:18px;
z-index:16;
left: 424px;
top: -220px;
}
#Layer40 {
position:absolute;
width:107px;
height:20px;
z-index:16;
left: 538px;
top: 163px;
}
#Layer41 {
position:absolute;
width:101px;
height:18px;
z-index:17;
left: 645px;
top: -220px;
}
#Layer42 {
position:absolute;
width:110px;
height:20px;
z-index:17;
left: 750px;
top: -220px;
}
-->
</style>
</head>
<body>
<div id="Layer38">
<div align="center" class="style39">About</div>
</div>
<div align="center">
<p><img src="images/bannr1.jpg" width="1200" height="142" /></p>
<div class="style39" id="Layer40">Upload Vi deo </div>
</div>
<div id="Layer2">
<div align="center" class="style3"><a href="page1.html" class="style24">HOME</a></div>
</div>
<div id="Layer3">
<div align="center" class="style26">ANIMATION</div>
</div>
<div id="Layer4">
<div align="center" class="style26">VIDEO</div>
</div>
<div id="Layer5">
<div align="center" class="style26">PRODUCTS</div>
</div>
<div id="Layer6">
<div align="center">
<p class="style26">COMICS/BOOKS</p>
</div>
</div>
<div id="Layer7">
<div align="center" class="style26">NEWS</div>
</div>
<p> </p>
<div id="Layer10">
<div align="center" class="style9"><img src="images/homep.jpg" width="1200" height="20" /></div>
</div>
<div id="Layer12">
<table width="900" height="146" border="0">
<tr>
<td align="left" valign="top"><img src="images/panel1.jpg" width="900" height="200" />
<div id="Layer29"><img src="images/trio2.jpg" width="213" height="114" /></div>
<div id="Layer28"><img src="images/webman.jpg" width="122" height="114" /></div>
</td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="left"> </p>
<p align="right"> </p>
<div id="Layer14">
<div align="center">
<img src="images/panel2sde.jpg" width="298" height="700" />
<div id="Layer31"><img src="images/webmanwwLOGO.jpg" width="233" height="38" /></div>
<div id="Layer30"><img src="images/webkickj.jpg" width="234" height="315" /></div>
<div class="style28" id="Layer24">
<table width="217" height="21" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FF0000"><span class="style31">Reg ister Here For Newsletter </span></td>
</tr>
</table>
</div>
<div id="Layer23">
<form action="mailto:melsline9@hotmail.com" method="post" name="my form" class="style24" id="my form">
<div align="center">Name
</div>
<p align="center">
<input name="name" type="text" id="name" size="38" />
</p>
<p align="center">E:MaIL </p>
<p align="center">
<input name="EMAIL" type="text" id="EMAIL" size="38" />
</p>
<p align="center">
<input name="hiddenField" type="hidden" value="MYHIDDENFIELD...HI" />
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
<p align="right"> </p>
<p align="right"> </p>
<p align="right"> </p>
<div id="Layer16">
<table width="906" height="207" border="0">
<tr>
<td><div align="center"><img src="images/PANEL2-copy.jpg" width="900" height="200" />
<div class="style39" id="Layer42">Rin g Ton es </div>
<div class="style39" id="Layer41">Games</div>
<div class="style39" id="Layer39">About Kool </div>
</div></td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<div id="Layer35">
<div align="center"><img src="images/PANEL3-.jpg" width="900" height="200" /></div>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<div id="Layer36"></div>
</body>
</html>
<!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= "video, games, ring tones, news,animation, ozwarriors, webman, chameleons "text/html; charset=iso-8859-1" />
<title>Kooltube1</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:108px;
height:17px;
z-index:1;
left: 320px;
top: 139px;
}
a:link {
text-decoration: none;
color: #0033FF;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#Layer2 {
position:absolute;
width:105px;
height:22px;
z-index:1;
left: 322px;
top: 138px;
}
.style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0033FF;
}
#Layer3 {
position:absolute;
width:109px;
height:21px;
z-index:2;
left: 427px;
top: 138px;
}
#Layer4 {
position:absolute;
width:111px;
height:22px;
z-index:3;
left: 536px;
top: 138px;
}
#Layer5 {
position:absolute;
width:105px;
height:21px;
z-index:4;
left: 647px;
top: 138px;
}
#Layer6 {
position:absolute;
width:111px;
height:22px;
z-index:5;
left: 754px;
top: 138px;
}
#Layer7 {
position:absolute;
width:104px;
height:22px;
z-index:6;
left: 869px;
top: 137px;
}
#Layer8 {
position:absolute;
width:587px;
height:17px;
z-index:7;
left: 349px;
top: 178px;
background-color: #66CCFF;
}
#Layer9 {
position:absolute;
width:216px;
height:160px;
z-index:7;
}
#Layer10 {
position:absolute;
width:1197px;
height:21px;
z-index:7;
left: 8px;
top: 160px;
background-color: #FFFFFF;
}
.style9 {color: #FF00FF}
#Layer11 {
position:absolute;
width:909px;
height:208px;
z-index:8;
top: 181px;
}
#Layer12 {
position:absolute;
width:900px;
height:197px;
z-index:8;
top: 181px;
left: 5px;
}
#Layer13 {
position:absolute;
width:322px;
height:707px;
z-index:9;
left: 911px;
top: 183px;
}
#Layer14 {
position:absolute;
width:295px;
height:701px;
z-index:9;
left: 911px;
top: 184px;
}
#Layer15 {
position:absolute;
width:901px;
height:497px;
z-index:10;
top: 387px;
left: 9px;
}
#Layer16 {
position:absolute;
width:908px;
height:208px;
z-index:10;
top: 383px;
left: 5px;
}
#Layer17 {
position:absolute;
width:905px;
height:221px;
z-index:11;
top: 590px;
left: 5px;
}
body {
background-color: #FFFFFF;
}
#Layer18 {
position:absolute;
width:200px;
height:61px;
z-index:12;
left: 32px;
top: 42px;
}
#Layer19 {
position:absolute;
width:197px;
height:135px;
z-index:12;
left: 53px;
top: 72px;
}
#Layer20 {
position:absolute;
width:203px;
height:140px;
z-index:12;
left: 31px;
top: 66px;
}
#Layer21 {
position:absolute;
width:200px;
height:179px;
z-index:12;
left: 32px;
top: 43px;
}
#Layer22 {
position:absolute;
width:200px;
height:146px;
z-index:12;
left: 31px;
top: 47px;
}
.style24 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-weight: bold; font-size: 12px; }
.style26 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-size: 12px; font-weight: bold; color: #0033FF; }
#Layer23 {
position:absolute;
width:249px;
height:159px;
z-index:12;
left: 23px;
top: 71px;
}
#Layer24 {
position:absolute;
width:216px;
height:18px;
z-index:12;
left: 20px;
top: 39px;
}
.style28 {font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline; font-weight: bold; font-size: 12px; color: #999999; }
.style31 {color: #000000}
#Layer25 {
position:absolute;
width:155px;
height:112px;
z-index:12;
left: -616px;
top: 47px;
}
#Layer26 {
position:absolute;
width:117px;
height:115px;
z-index:12;
left: -873px;
top: 247px;
}
#Layer27 {
position:absolute;
width:214px;
height:107px;
z-index:12;
left: 41px;
top: 46px;
}
#Layer28 {
position:absolute;
width:117px;
height:115px;
z-index:12;
left: 48px;
top: 49px;
}
#Layer29 {
position:absolute;
width:200px;
height:115px;
z-index:12;
left: 187px;
top: 49px;
}
#Layer30 {
position:absolute;
width:237px;
height:316px;
z-index:12;
left: 31px;
top: 297px;
}
#Layer31 {
position:absolute;
width:232px;
height:38px;
z-index:12;
left: 33px;
top: 256px;
}
#Layer32 {
position:absolute;
width:442px;
height:17px;
z-index:12;
left: 418px;
top: 1px;
}
#Layer33 {
position:absolute;
width:437px;
height:21px;
z-index:12;
left: 420px;
top: -2px;
}
#Layer34 {
position:absolute;
width:565px;
height:18px;
z-index:12;
left: 358px;
top: 160px;
}
#Layer35 {
position:absolute;
width:903px;
height:205px;
z-index:13;
top: 588px;
left: 7px;
}
#Layer36 {
position:absolute;
width:902px;
height:92px;
z-index:14;
left: 7px;
top: 790px;
background-color: #0033FF;
}
#Layer37 {
position:absolute;
width:690px;
height:23px;
z-index:15;
left: 323px;
top: 158px;
}
#Layer38 {
position:absolute;
width:107px;
height:18px;
z-index:15;
left: 322px;
top: 163px;
}
.style39 {
font-size: 12px;
font-family: AvantGarde, BatmanForeverAlternate, BatmanForeverOutline;
color: #FFFFFF;
}
#Layer39 {
position:absolute;
width:106px;
height:18px;
z-index:16;
left: 424px;
top: -220px;
}
#Layer40 {
position:absolute;
width:107px;
height:20px;
z-index:16;
left: 538px;
top: 163px;
}
#Layer41 {
position:absolute;
width:101px;
height:18px;
z-index:17;
left: 645px;
top: -220px;
}
#Layer42 {
position:absolute;
width:110px;
height:20px;
z-index:17;
left: 750px;
top: -220px;
}
-->
</style>
</head>
<body>
<div id="Layer38">
<div align="center" class="style39">About</div>
</div>
<div align="center">
<p><img src="images/bannr1.jpg" width="1200" height="142" /></p>
<div class="style39" id="Layer40">Upload Vi deo </div>
</div>
<div id="Layer2">
<div align="center" class="style3"><a href="page1.html" class="style24">HOME</a></div>
</div>
<div id="Layer3">
<div align="center" class="style26">ANIMATION</div>
</div>
<div id="Layer4">
<div align="center" class="style26">VIDEO</div>
</div>
<div id="Layer5">
<div align="center" class="style26">PRODUCTS</div>
</div>
<div id="Layer6">
<div align="center">
<p class="style26">COMICS/BOOKS</p>
</div>
</div>
<div id="Layer7">
<div align="center" class="style26">NEWS</div>
</div>
<p> </p>
<div id="Layer10">
<div align="center" class="style9"><img src="images/homep.jpg" width="1200" height="20" /></div>
</div>
<div id="Layer12">
<table width="900" height="146" border="0">
<tr>
<td align="left" valign="top"><img src="images/panel1.jpg" width="900" height="200" />
<div id="Layer29"><img src="images/trio2.jpg" width="213" height="114" /></div>
<div id="Layer28"><img src="images/webman.jpg" width="122" height="114" /></div>
</td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="left"> </p>
<p align="right"> </p>
<div id="Layer14">
<div align="center">
<img src="images/panel2sde.jpg" width="298" height="700" />
<div id="Layer31"><img src="images/webmanwwLOGO.jpg" width="233" height="38" /></div>
<div id="Layer30"><img src="images/webkickj.jpg" width="234" height="315" /></div>
<div class="style28" id="Layer24">
<table width="217" height="21" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FF0000"><span class="style31">Reg ister Here For Newsletter </span></td>
</tr>
</table>
</div>
<div id="Layer23">
<form action="mailto:melsline9@hotmail.com" method="post" name="my form" class="style24" id="my form">
<div align="center">Name
</div>
<p align="center">
<input name="name" type="text" id="name" size="38" />
</p>
<p align="center">E:MaIL </p>
<p align="center">
<input name="EMAIL" type="text" id="EMAIL" size="38" />
</p>
<p align="center">
<input name="hiddenField" type="hidden" value="MYHIDDENFIELD...HI" />
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
<p align="right"> </p>
<p align="right"> </p>
<p align="right"> </p>
<div id="Layer16">
<table width="906" height="207" border="0">
<tr>
<td><div align="center"><img src="images/PANEL2-copy.jpg" width="900" height="200" />
<div class="style39" id="Layer42">Rin g Ton es </div>
<div class="style39" id="Layer41">Games</div>
<div class="style39" id="Layer39">About Kool </div>
</div></td>
</tr>
</table>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<div id="Layer35">
<div align="center"><img src="images/PANEL3-.jpg" width="900" height="200" /></div>
</div>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<div id="Layer36"></div>
</body>
</html>
•
•
Join Date: Oct 2005
Posts: 1,283
Reputation:
Solved Threads: 14
The way you have used z-index and absolute positioning is really not going to help you page. It is extremely confusing reading you code.
•
•
•
•
Originally Posted by vishesh
Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.
This is the URL where I am trying to pout this site
together
http://www.kooltube1.com
Turock
•
•
Join Date: Oct 2005
Posts: 1,283
Reputation:
Solved Threads: 14
If you mean you tab style buttons across the top of the page, well first off they are not even in a table they are in DIVs. Also, I cannot actually see 7 buttons in the html and it doesn't seem to appear anywhere on my screen.
BTW. Your page is way to wide which is a result of absolute positioning and looks terrible on anything smaller than 1280*1024. This may be the web standard by 2010 but it isn't now.
I really think you have made this design very hard for yourself by having an extensive use of z-index. I would really advice you to start again and also take a bt more of a minimalist approach to your design because it is very big and bold. Less is sometimes more.
BTW. Your page is way to wide which is a result of absolute positioning and looks terrible on anything smaller than 1280*1024. This may be the web standard by 2010 but it isn't now.
I really think you have made this design very hard for yourself by having an extensive use of z-index. I would really advice you to start again and also take a bt more of a minimalist approach to your design because it is very big and bold. Less is sometimes more.
 |
Other Threads in the IT Professionals' Lounge Forum
- Previous Thread: What's this code?
- Next Thread: Any useful yum commands for mysql database
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest IT Professionals' Lounge Posts
- Today's Posts
- Unanswered Threads
1gbit advertising advice amazon answers archive british broadband business businessprocesses career carrier censorship cern china cio collectiveintelligence connectivity consumer consumers corporateearnings datatransfer debtcollectors dictionary digg digital ebay ecommerce email employment environment facebook food government grid high-definition hottub infodelivery infotech intel internet interview ipod isp japan kindle lhc library malware marketing mit moonfruit news onlineshopping piracy piratebay pope porn program questions r&d religion remoteworking research retail security sex shopping simple skype smallbusiness smb sms socialmedia socialnetworking software softwareengineer spam speed spending startrek statistics stocks study stumbleupon survey tabletpc technology touch-screen touchscreen twitter uk videoinprint voips web webdeveloper windows words
