SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inserting buttons

    i am trying to insert a fireworks button menu into a dreamweaver page.

    here is the location
    <td colspan="5" rowspan="12">
    <img src="images/homepage.jpg" width="269" height="262" alt="" /></td>

    whenever i try to insert the button code
    <img src="button menu/button menu2.png" alt="button menu" />

    it moves everything around and puts everything into dissaray. i know this is probably a really simple basic thing, but it is the "just starting section :-) thanks

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    hi second_decimal and welcome to sitepoint

    Where are you inserting the button code that makes it go screwy?

    Code HTML4Strict:
    <td colspan="5" rowspan="12">
        <img src="images/homepage.jpg" width="269" height="262" alt="" />
        <img src="button menu/button menu2.png" alt="button menu" />
    </td>

    should work fine.
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your reply.
    no i tried inserting it in a couple of different places and even creating its own
    <button> </button> tags as well as its own <td></td> and it still moved everything around on the site. i am at a loss since the colspan/rowspan obviously define the position/size of the background .jpeg slice. it almost seems that when i insert a line all the rest of the image slices get thrown off whack. why dont the buttons just sit right on top?

    on another subject, working with css, when i make changes to the html sheet, do i need to manually update the css?
    in what instances would i make changes in css?
    while the layout of the homepage and the subpages may differ, i would like to keep the menu in the same place. so do i insert the menu into css or into the html homepage?

    this is of course assuming that i understand the function of css and the difference correctly as being that the css serves as a master library for all the html page lol.

    sorry. so many questions... but i am determined to get a grasp on all this. thanks

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes CSS is(or can be) a master stylesheet for an entire web site.

    I cannot really elaborate on your specific issue, as I do not use FW to code layouts, nor do I know anything about table based layouts.

    The truth is that using FWs or Photoshop(imageready) to export HTML and CSS is not the most reliable way to produce cross browser complaint websites.

    Have you thought about learning to design using <divs> and <spans> using semantic markup vs using tables?

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by second_decimal View Post
    thank you for your reply.
    no i tried inserting it in a couple of different places and even creating its own
    <button> </button> tags as well as its own <td></td> and it still moved everything around on the site. i am at a loss since the colspan/rowspan obviously define the position/size of the background .jpeg slice. it almost seems that when i insert a line all the rest of the image slices get thrown off whack. why dont the buttons just sit right on top?
    It is really hard to give you an answer on this without being able to see the code.
    Quote Originally Posted by second_decimal View Post
    on another subject, working with css, when i make changes to the html sheet, do i need to manually update the css?
    Yes, most of the time you would change the CSS manually, unless you are using classes which you are applying to the new HTML elements and do not need to create further visual effects.
    Quote Originally Posted by second_decimal View Post
    in what instances would i make changes in css?
    Whenever you need to create/delete new styles, colors, fonts or positions... basically, when you want to change the look of your page, partially or completely
    Quote Originally Posted by second_decimal View Post
    while the layout of the homepage and the subpages may differ, i would like to keep the menu in the same place. so do i insert the menu into css or into the html homepage?
    Normally the menu is always kept in the same place due to usability. If you change it from one page to the next, the user would get annoyed. They expect easy browsing

    Regarding where you would do the changes or where you would keep it the same... HTML defines the structure, while CSS defines the look. Same menu with equal look have the same HTML and CSS code. You insert them in both, HTML and CSS.
    Quote Originally Posted by second_decimal View Post
    this is of course assuming that i understand the function of css and the difference correctly as being that the css serves as a master library for all the html page lol.
    By the questions you were doing and the way that you were doing them, I think that you do not fully understand what HTML and CSS are and how interact together. This comment simply confirms my belief

    HTML defines the structure of your page. That is, what elements are in the page (paragraphs, images, video, tables, etc) and in which order should be loaded (the browser loads the page sequentially from top to bottom)

    CSS defines where those elements should be and how they should look, which colors should be applied and anything that has to do with aesthetics.

    Quote Originally Posted by second_decimal View Post
    sorry. so many questions... but i am determined to get a grasp on all this. thanks
    That's what the forums are for

    Happy learning.

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BPartch View Post
    Yes CSS is(or can be) a master stylesheet for an entire web site.

    I cannot really elaborate on your specific issue, as I do not use FW to code layouts, nor do I know anything about table based layouts.

    The truth is that using FWs or Photoshop(imageready) to export HTML and CSS is not the most reliable way to produce cross browser complaint websites.

    Have you thought about learning to design using <divs> and <spans> using semantic markup vs using tables?

  7. #7
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    It is really hard to give you an answer on this without being able to see the code.

    HTML defines the structure of your page. That is, what elements are in the page (paragraphs, images, video, tables, etc) and in which order should be loaded (the browser loads the page sequentially from top to bottom)

    CSS defines where those elements should be and how they should look, which colors should be applied and anything that has to do with aesthetics.


    That's what the forums are for

    Happy learning.
    thank you for clarifying. i now understand why all the slices (seperate gifs) move around leaving white spaces when i try to drop the button menu into the html page. the css has everything layed out and i need to position the buttons on the css instead of the HTML.... right? lol thank you for your replies.

    Quote Originally Posted by molona View Post
    It is really hard to give you an answer on this without being able to see the code.
    ok you asked for it... here is the html code...
    <html>
    <head>
    <title>homepage edit3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="411 style.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (homepage edit3.psd) -->
    <table id="Table_01" width="760" height="759" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="13">
    <img src="images/homepage02.gif" width="526" height="59" alt="" /></td>
    <td colspan="4">
    <img src="images/homepage03.gif" width="76" height="59" alt="" /></td>
    <td colspan="3">
    <img src="images/homepage04.gif" width="76" height="59" alt="" /></td>
    <td colspan="4">
    <img src="images/homepage05.gif" width="81" height="59" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="59" alt="" /></td>
    </tr>
    <tr>
    <td colspan="24">
    <img src="images/homepage06.jpg" width="759" height="209" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="209" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5">
    <img src="images/homepage08.gif" width="269" height="62" alt="" /></td>
    <td colspan="18" rowspan="2">
    <img src="images/homepage20.gif" width="489" height="76" alt="" /></td>
    <td rowspan="2">
    <img src="images/homepage.jpg" width="1" height="76" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="62" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="2">
    <img src="images/homepage09.gif" width="269" height="40" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="14" alt="" /></td>
    </tr>
    <tr>
    <td colspan="19" rowspan="3">
    <img src="images/homepage21.gif" width="490" height="96" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="26" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5">
    <img src="images/homepage10.gif" width="269" height="40" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="40" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="2">
    <img src="images/homepage11.gif" width="269" height="40" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="30" alt="" /></td>
    </tr>
    <tr>
    <td colspan="19">
    <img src="images/homepage07.gif" width="490" height="10" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="4">
    <img src="images/homepage12.gif" width="269" height="40" alt="" /></td>
    <td colspan="16">
    <img src="images/homepage-16.jpg" width="441" height="14" alt="" /></td>
    <td rowspan="2">
    <img src="images/homepage22.gif" width="20" height="20" alt="" /></td>
    <td colspan="2" rowspan="15">
    <img src="images/homepage-18.jpg" width="29" height="193" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="14" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="11">
    <img src="images/homepage-19.jpg" width="53" height="149" alt="" /></td>
    <td colspan="12" rowspan="2">
    <img src="images/homepage23.gif" width="300" height="16" alt="" /></td>
    <td colspan="2" rowspan="11">
    <img src="images/homepage-21.jpg" width="88" height="149" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="6" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="10">
    <img src="images/homepage-22.jpg" width="20" height="143" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt="" /></td>
    </tr>
    <tr>
    <td colspan="12">
    <img src="images/homepage-23.jpg" width="300" height="10" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="5">
    <img src="images/homepage13.gif" width="269" height="40" alt="" /></td>
    <td colspan="7">
    <img src="images/homepage-25.jpg" width="206" height="11" alt="" /></td>
    <td rowspan="4">
    <img src="images/homepage25.gif" width="1" height="30" alt="" /></td>
    <td colspan="4">
    <img src="images/homepage-27.jpg" width="93" height="11" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="11" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="7">
    <img src="images/homepage-28.jpg" width="2" height="112" alt="" /></td>
    <td rowspan="5">
    <img src="images/homepage26.jpg" width="71" height="71" alt="" /></td>
    <td colspan="5">
    <img src="images/homepage-30.jpg" width="133" height="1" alt="" /></td>
    <td rowspan="7">
    <img src="images/homepage-31.jpg" width="10" height="112" alt="" /></td>
    <td colspan="2" rowspan="5">
    <img src="images/homepage27.jpg" width="66" height="71" alt="" /></td>
    <td rowspan="7">
    <img src="images/homepage-33.jpg" width="17" height="112" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="6">
    <img src="images/homepage-34.jpg" width="12" height="111" alt="" /></td>
    <td>
    <img src="images/homepage24.gif" width="3" height="5" alt="" /></td>
    <td colspan="3" rowspan="6">
    <img src="images/homepage-36.jpg" width="118" height="111" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="5" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="5">
    <img src="images/homepage-37.jpg" width="3" height="106" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="13" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="4">
    <img src="images/homepage-38.jpg" width="1" height="93" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="2">
    <img src="images/homepage14.gif" width="269" height="63" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="42" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img src="images/homepage-40.jpg" width="71" height="41" alt="" /></td>
    <td colspan="2" rowspan="2">
    <img src="images/homepage-41.jpg" width="66" height="41" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="21" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img src="images/homepage15.gif" width="80" height="23" alt="" /></td>
    <td rowspan="2">
    <img src="images/homepage16.gif" width="125" height="23" alt="" /></td>
    <td rowspan="2">
    <img src="images/homepage17.jpg" width="39" height="23" alt="" /></td>
    <td rowspan="2">
    <img src="images/homepage18.gif" width="25" height="23" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="20" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="3">
    <img src="images/homepage-46.jpg" width="38" height="30" alt="" /></td>
    <td colspan="6" rowspan="2">
    <img src="images/homepage28.gif" width="128" height="13" alt="" /></td>
    <td colspan="5" rowspan="2">
    <img src="images/homepage29.gif" width="167" height="13" alt="" /></td>
    <td colspan="5" rowspan="2">
    <img src="images/homepage30.gif" width="128" height="13" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="3" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5" rowspan="3">
    <img src="images/homepage19.gif" width="269" height="57" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="10" alt="" /></td>
    </tr>
    <tr>
    <td colspan="16">
    <img src="images/homepage-51.jpg" width="423" height="17" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="17" alt="" /></td>
    </tr>
    <tr>
    <td colspan="19" rowspan="3">
    <img src="images/homepage31.gif" width="490" height="100" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="30" alt="" /></td>
    </tr>
    <tr>
    <td colspan="5">
    <img src="images/homepage-53.jpg" width="269" height="35" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="35" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img src="images/homepage01.gif" width="50" height="50" alt="" /></td>
    <td colspan="4" rowspan="2">
    <img src="images/homepage-55.jpg" width="219" height="50" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="35" alt="" /></td>
    </tr>
    <tr>
    <td colspan="19">
    <img src="images/homepage-56.jpg" width="490" height="15" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="15" alt="" /></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="50" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="30" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="125" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="39" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="25" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="38" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="15" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="71" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="12" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="25" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="91" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="10" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="63" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="17" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="56" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="32" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="20" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="28" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt="" /></td>
    <td></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>



    and here is the css...

    @charset "utf-8";
    /** BASIC */

    html, body {
    height: 100%;
    }

    .bullet {
    padding-left: 15px;
    background: url(images/subpage01.gif) no-repeat left center;
    }

    .img1 {
    margin-top: 3px;
    }

    /** HEADER */

    #header {
    width: 759px;
    height: 268px;
    margin: 0px auto;
    background: url(images/homepage02.gif) no-repeat left top;
    }

    #header-menu {
    padding: 0px 0px 0px 526px;
    }

    #header-menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #header-menu li {
    display: inline;
    }

    #header-menu a {
    display: block;
    float: left;
    height: 59px;
    }

    #header-menu1 {
    width: 76px;
    background: url(images/homepage03.gif) no-repeat left top;
    }

    #header-menu2 {
    width: 76px;
    background: url(images/homepage04.gif) no-repeat left top;
    }

    #header-menu3 {
    width: 81px;
    background: url(images/homepage05.gif) no-repeat left top;
    }

    #header-menu b {
    position: absolute;
    left: -10000px;
    }

    #logo {
    margin: 0px;
    padding: 0px;
    }

    /** CONTENT */

    #content {
    width: 759px;
    margin: 0px auto;
    }

    #left {
    float: left;
    width: 269px;
    }

    #right {
    float: left;
    width: 489px;
    height: 375px;
    min-height: 375px;
    }

    html>body #right {
    height: auto;
    }

    /** MAINMENU */

    #mainmenu {
    }

    #mainmenu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #mainmenu li {
    display: inline;
    }

    #mainmenu a {
    display: block;
    width: 269px;
    }

    #mainmenu1 {
    height: 62px;
    background: url(images/homepage08.gif) no-repeat left top;
    }

    #mainmenu2 {
    height: 40px;
    background: url(images/homepage09.gif) no-repeat left top;
    }

    #mainmenu3 {
    height: 40px;
    background: url(images/homepage10.gif) no-repeat left top;
    }

    #mainmenu4 {
    height: 40px;
    background: url(images/homepage11.gif) no-repeat left top;
    }

    #mainmenu5 {
    height: 40px;
    background: url(images/homepage12.gif) no-repeat left top;
    }

    #mainmenu6 {
    height: 40px;
    background: url(images/homepage13.gif) no-repeat left top;
    }

    #mainmenu b {
    position: absolute;
    left: -10000px;
    }

    /** NEWSLETTER */

    #newsletter {
    }

    #newsletter b {
    position: absolute;
    left: -10000px;
    }

    #title1 {
    height: 63px;
    background: url(images/homepage14.gif) no-repeat left top;
    }

    #label1 {
    float: left;
    width: 80px;
    height: 23px;
    background: url(images/homepage15.gif) no-repeat left top;
    }

    #textfield1 {
    float: left;
    }

    #imagefield1 {
    float: left;
    }

    #newsletter .bg3 {
    clear: both;
    width: 187px;
    height: 57px;
    margin: 0px;
    padding: 0px 0px 0px 82px;
    }

    /** BOX1 */

    #box1 {
    }

    #box1 h2, #box1 h3 {
    position: absolute;
    left: -10000px;
    }

    #title2 {
    height: 76px;
    background: #262D33 url(images/homepage20.gif) no-repeat left top;
    }

    #box1 .content {
    padding: 0px 29px 0px 36px;
    }

    /** BOX2 */

    #box2 {
    height: 120px;
    min-height: 120px;
    margin: 20px 29px 0px 36px;
    padding: 13px;
    }

    html>body #box2 {
    height: auto;
    }

    #title3 {
    height: 36px;
    background: url(images/homepage23.gif) no-repeat left top;
    }

    #title3 b {
    position: absolute;
    left: -10000px;
    }

    #box2A {
    float: left;
    width: 197px;
    padding-right: 10px;
    background: url(images/homepage25.gif) repeat-y right top;
    }

    #box2B {
    float: left;
    width: 175px;
    padding-left: 10px;
    }

    #box2 .ul1 {
    padding-left: 95px;
    }

    html>body #box2 .ul1 {
    padding-left: 0px;
    }

    /** BOX3 */

    #box3 {
    padding: 20px 0px 0px 38px;
    }

    #box3 ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #box3 li {
    display: inline;
    }

    #box3 a {
    display: block;
    float: left;
    height: 13px;
    }

    #box3A {
    width: 128px;
    background: url(images/homepage28.gif) no-repeat left top;
    }

    #box3B {
    width: 128px;
    background: url(images/homepage29.gif) no-repeat left top;
    }

    #box3C {
    width: 128px;
    background: url(images/homepage30.gif) no-repeat left top;
    }

    #box3 b {
    position: absolute;
    left: -10000px;
    }

    #title4 {
    height: 76px;
    background: #262D33 url(images/subpage03.gif) no-repeat left top;
    }

    /** FOOTER */

    #footer {
    width: 759px;
    margin: -30px auto 0px auto;
    text-align: right;
    }

    #copyright {
    padding: 30px 30px 0px 0px;
    }

    #links {
    padding: 0px 30px 0px 0px;
    }

    .bg5 {
    background-position: right top;
    }

    i tried to post the button menu as well but appearently it contains a link so no go here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •