3 Replies Latest reply: Jan 9, 2009 5:45 PM by Newsgroup_User RSS

    Inserting Images into Dreamweaver through Div Tag

    DThandi
      Hi im quite new to Dreamweaver and i've got CS3...I've just designed and sliced up a website in Photoshop and have started to compile it together in Dreamweaver using HTML and CSS. I've just added a Div tag and added images into the page and i've got stuck, i cant seem to put another image next to one iv already placed their.

      I need help on how to work with Div Tags and applying images so that i can fix my website like a Jigsaw.

      I have provided the code i hav in my HTML so far...
        • 1. Re: Inserting Images into Dreamweaver through Div Tag
          Newsgroup_User Community Member
          You need some basic HTML understanding to go further. Because you have
          placed your two images within div tags (why did you?), and because the <div>
          tag is a block tag, you cannot place them side by side without using a CSS
          float on one, or both.

          Why not just put your images flat on the page?

          <img src="images/Header.jpg" alt="MIJ Header" width="1280" height="338"
          /><img src="images/Left-Side-Short.jpg" alt="left side short" />

          The <img> tag is an inline tag, and you will be able to place as many as you
          want horizontally adjacent on the same line (subject to the imposed width of
          the line).

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "DThandi" <webforumsuser@macromedia.com> wrote in message
          news:gk87bt$8c$1@forums.macromedia.com...
          > Hi im quite new to Dreamweaver and i've got CS3...I've just designed and
          > sliced
          > up a website in Photoshop and have started to compile it together in
          > Dreamweaver using HTML and CSS. I've just added a Div tag and added
          > images
          > into the page and i've got stuck, i cant seem to put another image next to
          > one
          > iv already placed their.
          >
          > I need help on how to work with Div Tags and applying images so that i can
          > fix
          > my website like a Jigsaw.
          >
          > I have provided the code i hav in my HTML so far...
          >
          > <head>
          > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          > <title>Stainless Steel Exhausts, Custom Stainless Steel :: UK</title>
          > <style type="text/css">
          > <!--
          > body {
          > background-color: #1D1505;
          > }
          > -->
          > </style>
          > <link href="css/layout.css" rel="stylesheet" type="text/css" />
          > </head>
          >
          > <body>
          > <div id="wrapper">
          > <div id="header"><img src="images/Header.jpg" alt="MIJ Header"
          > width="1280"
          > height="338" /></div>
          > <div id="left short"><img src="images/Left-Side-Short.jpg" alt="left
          > side
          > short" /></div>
          > <div id="home">Content for id "home" Goes Here</div>
          > </div>
          > </body>
          > </html>
          >

          • 2. Re: Inserting Images into Dreamweaver through Div Tag
            DThandi Community Member
            Let me show you the before and after images of the site im working on, then maybe what im trying to describe can become more clearer...Your right that i do need some basic understanding, I actually used to know the answer to my own question but since i havn't played around with Dreamweaver for a while i seem to have forgotten.

            This was the image on Photshop:
            http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg

            This is where I am stuck now:
            http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg

            These are all the small images i have sliced up from Photshop:
            http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg

            As you can see i have trouble coding in HTML. So far i have been following a tutorial video showing me how to had images and align them through Div Tag...But now i am trying to put images side by side in the Navigation area and on top of and underneath each other. As you can see i have Home.jpg and Home-Scrap.jpg. Home Scrap needs to go under Home and both of them images need to go next to image Left-Short.jpg.

            Thank You
            • 3. Re: Inserting Images into Dreamweaver through Div Tag
              Newsgroup_User Community Member
              Maybe this will help you -

              Taking a Fireworks comp to a CSS-based layout in Dreamweaver
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
              http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html


              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "DThandi" <webforumsuser@macromedia.com> wrote in message
              news:gk8anj$4qc$1@forums.macromedia.com...
              > Let me show you the before and after images of the site im working on,
              > then
              > maybe what im trying to describe can become more clearer...Your right that
              > i do
              > need some basic understanding, I actually used to know the answer to my
              > own
              > question but since i havn't played around with Dreamweaver for a while i
              > seem
              > to have forgotten.
              >
              > This was the image on Photshop:
              > http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg
              >
              > This is where I am stuck now:
              > http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg
              >
              > These are all the small images i have sliced up from Photshop:
              > http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg
              >
              > As you can see i have trouble coding in HTML. So far i have been
              > following a
              > tutorial video showing me how to had images and align them through Div
              > Tag...But now i am trying to put images side by side in the Navigation
              > area and
              > on top of and underneath each other. As you can see i have Home.jpg and
              > Home-Scrap.jpg. Home Scrap needs to go under Home and both of them images
              > need
              > to go next to image Left-Short.jpg.
              >
              > Thank You
              >