Newbies buttons/links

Question

turock 0 Newbie Poster

17 Years Ago

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.

3 Contributors
23 Replies
148 Views
3 Months Discussion Span
Latest Post 17 Years Ago Latest Post by turock

All 23 Replies

GreenDay2001

17 Years Ago

Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.

roryt 150 Nearly a Posting Virtuoso

17 Years Ago

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>
<head>
</head>
<body>
<div>hello</div>
</body>
</html>

roryt 150 Nearly a Posting Virtuoso

17 Years Ago

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.

roryt 150 Nearly a Posting Virtuoso

17 Years Ago

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.

roryt 150 Nearly a Posting Virtuoso

17 Years Ago

Sorry mate but even 900px is really quite wide. But that is your decision. Have you managed to get the buts to work yet?

I would really hope you are being sarcastic about z-index. You really have over used it though.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

turock 0 Newbie Poster · Answer 1 · 2006-10-27T10:44:27+00:00

turock 0 Newbie Poster

17 Years Ago

heres the code file as requested ..and thanks

Turock.

Edited 11 Years Ago by TrustyTony because: fixed formatting

turock 0 Newbie Poster · Answer 2 · 2006-10-27T10:46:24+00:00

Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.

Hi
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

turock 0 Newbie Poster · Answer 3 · 2006-10-27T12:13:02+00:00

Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.

Hi i tried to send a code file but this site doesnt handle such
if u emailm e agian i should be able to attach it.

turock

turock 0 Newbie Poster · Answer 4 · 2006-10-29T05:43:37+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<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>&nbsp;</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">&nbsp;</p>
<p align="left">&nbsp; </p>
<p align="right">&nbsp;</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="[EMAIL="melsline9@hotmail.com"]mailto:melsline9@hotmail.com[/EMAIL]" 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">&nbsp;</p>
<p align="right">&nbsp;</p>
<p align="right">&nbsp;</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">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div id="Layer35">
  <div align="center"><img src="images/PANEL3-.jpg" width="900" height="200" /></div>
</div>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<div id="Layer36"></div>
</body>
</html>

turock 0 Newbie Poster · Answer 5 · 2006-10-30T07:42:08+00:00

Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.

hi
This is the URL where I am trying to pout this site
together
http://www.kooltube1.com

Turock

turock 0 Newbie Poster · Answer 6 · 2006-10-30T16:33:47+00:00

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.

hi thanks
anyway thats how much a newbie i am to dreamwaeaver
what is z-index..
Ok ill make it smaller say 900 wide

Im abig and bold person..there's sa professional reason behind that.
i have one page up at
www.kooltube1.com

but ill resize it right now and put it back up in 30 minits or so.

thank you

turock

turock 0 Newbie Poster · Answer 7 · 2006-10-31T16:07:05+00:00

Sorry mate but even 900px is really quite wide. But that is your decision. Have you managed to get the buts to work yet?
I would really hope you are being sarcastic about z-index. You really have over used it though.

i have no training in Dreamweaver at all, i just opened it and
started clicking and doing things you can look at http://www.koolotube1.com
and see the code I guess
I revamped the size and thats where its right for
what i want etc.

so when i say z-index? i m giving it to you straight
i think i know what index.html is but z-index????

I have the butts working and most things going ok although im
starting to get into movies and swf and maybe streaming and wow
it's bit of a head scratching time I guess.
Turock

roryt 150 Nearly a Posting Virtuoso · Answer 8 · 2006-10-31T23:32:58+00:00

Well z-index is basically used to set layers up on your page. It could be used to create a layered image almost exactly like in photoshop. It requires absolute positioning on a page and is really not a good idea to use.

turock 0 Newbie Poster · Answer 9 · 2006-11-01T05:09:57+00:00

Well z-index is basically used to set layers up on your page. It could be used to create a layered image almost exactly like in photoshop. It requires absolute positioning on a page and is really not a good idea to use.

Thanks for that i'll charge onward and
hope my project gets done and works..i guess i have to
work out some other issues on swf video or streaming from server
for whatevere will work the best...

thanks again

Turock

turock 0 Newbie Poster · Answer 10 · 2006-11-01T09:10:19+00:00

Since this problem could be solved more efficiently by viewing the whole work, so please send the code so that we could help you.

since i came on this site looking for an aswer No one has provided me with an answer on hos to stop the atbesl ro layers guides from moving around and they are
still doing it...Cumsee

<!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= ozwarriors, webman,chameleons, moveis, videos, comics, books, news, television <meta name=
"text/html; charset=iso-8859-1"text/html; charset=iso-8859-1" />
<title>Kooltube1</title>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=" /></head>
<body>
<div id="Layer73">
<div align="center"><a href="page2.html"><img src="images/skycity.jpg" width="364" height="50" border="0" /></a></div>
</div>
<div id="Layer72">
<div align="center"><a href="page1.html"><img src="images/webmanbuttn.jpg" width="363" height="49" border="0" /></a></div>
</div>
<div id="Layer74">
<div align="center"><a href="page4.html"><img src="images/dis.jpg" width="136" height="135" border="0" /></a></div>
</div>
<div align="center"><img src="images/homepage.jpg" width="900" height="862" align="top" />
<div class="style48" id="Layer75">Since 1993 </div>
<div class="style44" id="Layer68"><a href="page3.html" class="style45">Click Here To Register </a></div>
<div class="style40" id="Layer65">GAMES</div>
<div class="style40" id="Layer64">LINKS</div>
<div class="style40" id="Layer63">RING T ONES </div>
<div class="style40" id="Layer62">ABOUT</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</p>
</div>
</div>
<div id="Layer7">
<div align="center" class="style26">NEWS</div>
</div>
<p> </p>
<p align="center"> </p>
<p align="left">  </p>
<p align="center"> </p>
<p align="right"> </p>
<p align="right"> </p>
<p align="right"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</body>
</html>

turock 0 Newbie Poster · Answer 11 · 2007-02-02T18:52:58+00:00

turock 0 Newbie Poster

17 Years Ago

o

turock 0 Newbie Poster · Answer 12 · 2007-02-02T18:54:14+00:00

turock 0 Newbie Poster

17 Years Ago

thnks]

turock 0 Newbie Poster · Answer 13 · 2007-02-02T18:56:30+00:00

turock 0 Newbie Poster

17 Years Ago

thanks

turock 0 Newbie Poster · Answer 14 · 2007-02-02T18:58:47+00:00

turock 0 Newbie Poster

17 Years Ago

thehelp was beneficial

turock 0 Newbie Poster · Answer 15 · 2007-02-02T18:59:31+00:00

turock 0 Newbie Poster

17 Years Ago

the info helped

turock 0 Newbie Poster · Answer 16 · 2007-02-02T19:00:02+00:00

turock 0 Newbie Poster

17 Years Ago

thanks a lot

turock 0 Newbie Poster · Answer 17 · 2007-02-02T19:01:45+00:00

turock 0 Newbie Poster

17 Years Ago

thankyou

turock 0 Newbie Poster · Answer 18 · 2007-02-03T10:11:42+00:00

this addres sand dialogue somehow got onto google and comes up when my sites url is typed into google search ..how are all these posts removed ?

Newbies buttons/links

Recommended Answers Collapse Answers

All 23 Replies

Recommended Answers