AP div tags/positioning within a box/can't do it/?

*I've drawn a container box for my home page, into which I want to add an image, and then freely position my interactive/rollover buttons and/or images within the confines of that box.  I've got the background...and the box...but Dreamweaver will not let me draw an apdiv tag within the box.  I can draw outside the box, but get a circle with a slash when I try to draw within the box.
I have a page online  www.bradmarsh.org.  I created it by just placing the image and then drawing the button boxes and placing them.  They are not placed relative to the confines of the box, so they move when I resize the browser.   Also..I might add...it's just a mockup.
At this point, I still don't understand html, but I am starting to grasp it somewhat.  If I can solve this little issue, I can carry on with creating my own site.
Help??
Thank you

I've drawn a container box for my home page,
DW is not a graphics application with which you freely draw boxes on a workspace.  It's pro-level web authoring software that requires you to possess a working knowledge of  Web Design concepts, HTML and CSS code.
Close DW.
Spend some time learning CSS and XHTML first.
Then work through this 3 part tutorial:
Taking a Fireworks comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

  • Layer or div tag positioning help wanted

    Okay, actually I have two problems: 1) I have managed to
    create a navigation bar, but I can't find out how to save it other
    than saving the html page it was created on. The help literature
    seems to vaguely indicate that a nav bar created can be saved and
    used on other pages, but I'll be damned if I can find where there
    are any details of this process.
    *BTW, my navbar has multiple elements or buttons, so I can't
    just copy paste, ctrl/shift doesn't seem to work selecting multiple
    elements, tho it works on regular images*
    2) Once I solve problem #1, I am goin to want to have the
    navigation bar "stay put" in it's position on the screen, immune to
    any scrolling that occurs on the page(s). So, I plan on putting
    into a layer or div that can be given this behavior or property.
    Unfortunately, I can't find or figure out how to do that, either.
    Is this a good plan? Is there a better way to make the Nav bar
    exempt from page scrolling?

    billuminatti wrote:
    > Thank you very much for the help. As someone who has
    done virtually ZERO
    > coding, even something as simple as copying and pasting
    code per
    > instructions...well, let's just say, it's not my forte.
    Needless to say, my
    > attempts to do just that, copy and paste per "persistent
    layer" instructions,
    > have not succeeded yet. There could be several reasons
    for this, that I have
    > noted, anyway. One is, I have an animated timeline, so
    when I replace my body
    > tag:
    > <body onload="MM_timelinePlay('Timeline1')">
    > with the new one (per instructions), my timeline
    animation goes bye bye.
    > Plus, the "persistence" desired is still not achieved,
    which leaves me to my
    > next observation: I can't see how the code refers to the
    layer that I want to
    > persist. IOW, how does it "know" which layer to persist?
    > I took the comon-sense measure of having that layer
    selected when I pasted my
    > code, but I'm not fool enough to think that this would
    make any difference.
    > I didn't even look into the Server Side Include yet, as
    i am just aiming at
    > making a layer, any layer, "persist". My comment at this
    point is that it seems
    > very hard for me to believe that a layer behavior
    (persistence, or floating) so
    > web-common wouldn't have a "design-view only" solution,
    in a package as
    > sophisticated as Dreamweaver. This is not a slander on
    your answer, BTW, which
    > I am sure is a fine one. Thanks again.
    >
    >
    No offense, but I think your approach may be a bit off base
    here (of
    course I have not seen a link to a a page showing what you
    are trying to
    achieve, so I could be completely wrong). The first part of
    your
    question already makes me nervous, because it makes me think
    you have
    used Fireworks or another image program to create your
    navbars.
    Depending on which version of Fireworks you are using, that
    could be
    disastrous or only unwieldly. The navigation bars created by
    Fireworks
    are definitely not the best solution,and you can go through
    years of
    posts, particularly by Murray, advising against their use.
    If you are interested in an easier way to create your
    navigation, post back.
    Second, wanting your navigation to stay put while the rest of
    the page
    scrolls is something I see here a lot, but it's not
    necessarily how the
    web works. People plunge into frame hell in order to
    accomplish it,
    but it is like trying to kill a mosquito with a jackhammer.
    There is a good extension that will do this for you if you
    insist, but
    given the problems you are having now, I would first create a
    properly
    coded page that behaves as a normal web page should, and ONLY
    THEN
    worry about server-side includes
    revisit the issue of fixed and scrolling page elements.
    An excellent tutorial for creating a cross-browser friendly,
    modern
    (e.g.not relying on tables for layout) page can be found at
    www.projectseven.com (search for "quickdraw" without the
    quotation
    marks), where you can also find an excellent tutorial for
    creating
    horizontal or vertical navigation menus that are simple and
    can be used
    in templates or server-side includes (search for "uberlink"
    without the
    quotation marks).
    Good luck.
    Oh, and don't apologize for not understanding code: learn to
    understand
    and write good, solid html and css. Elizabeth Castro's book
    HTML for
    the World Wide Web is excellent. For beginning css you might
    want to
    start here:
    http://www.mako4css.com/
    Bonnie in California
    kroko at
    sbcglobal dot net
    http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa

  • Position images at bottom of div tag?

    How do I position images at the bottom of a div tag?
    These images are going to be used as links and Im using a
    template which will double there size on certain pages, so I cant
    use background images.
    Please help as I cant believe this isn't possible!
    James

    I dont understand what you mean by;
    'If you do not know the widths, and you want them all to flow
    one after
    the other, the make another div as their container, and move
    the
    "position:absolute;right:0px;" styles to the new div'
    When I apply a rule for all images in the div tag, the images
    all sit on top of one another;
    .container img {
    position: absolute;
    bottom: 0px;
    If I set the images individually I can stop them from doing
    this;
    .container #image1 {
    position: absolute;
    bottom: 0px;
    left: 320px;
    The problem however is that this design is for a template.
    The images in the template will double in size when the user is on
    that page.
    If i use a pixel (or a %) value for the left position, then
    the left hand side of the image is centered, not the centre of the
    image. This means that the space between the images will vary when
    one of them enlarges.
    This could be solved if there was some way of making the
    images sit next to each other, without specifying a position left
    value (like when you insert images into a div tag with no rules).
    Can this be done?
    Alternatively, is there a way of using a position left value
    which controlled the position via the center of the image, not the
    left side? Then I could use % values and the images would still
    look ordered.

  • Div tag rendering issue in GroupLayout

    Hi,
    In my jspx page I have div tag to contruct a box with header inside that I am showing some data.
    So I have div class="planHeaderBox" in panelGroupLayout in my jspx1 page and this grouplayout will be refreshed from my bean class when ever I click on button in jspx1 page.
    Issue is every time I click on the button div tage is rendering and adding the headerbox in page(multiple boxes are coming), So how do I make div tag to be executed only once and when ever I click on button
    only the data should get refreshed not the div tag. Do I need to use switcher or any other way do I have?
    Please provide your inputs.
    Thanks in advance.

    That is the reason why you shouldn't do this.
    Can't you get your design using adf tags only?
    Timo

  • Div tags - I'm totally confused

    I just finished a website that employed AP divs...and was
    heartily chastised for doing so. So, I'm attempting to create
    another site that employs div tags.
    I created a new site and began working on the design. Banner
    at the top (jpg image in a div tag - 760 px wide, no float, no
    clear), left sidebar (jpg in a div tag - 154 px wide, no float, no
    clear), attempted to create another div tag (right sidebar) but I
    can't get the div tag to hug the right margin of the page at the
    same height as the left tag. It keeps appearing below the left
    sidebar div tag....I have no clue how to get the div tag to appear
    on the right side of the page.....assistance would be greatly
    appreciated. (I have lots of other questions, but if I can get past
    this issue, I MAY be able to work those out myself).
    David Bird

    Well, because #leftsidebar is a block tag, and because you
    have not
    controlled its width, it occupies the full width of its
    container, so there
    is no room to the right for anything. And by the way, why so
    many rules for
    #leftsidebar img? Also, you have misformed the selector for
    #rightsidebar.
    Anyhow, this may be what you are after - not sure, though....
    <!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>Home</title>
    <style type="text/css">
    <!--
    body {
    background-color: #CCCCCC;
    #wrapper {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    background-color: #CCCCCC;
    padding: 10px;
    width: 760px;
    margin-right: auto;
    margin-left: auto;
    overflow:hidden;
    #leftsidebar {
    float:left;
    width:606px;
    #leftsidebar img {
    width: 154px;
    padding: 0px;
    #topbanner img {
    width: 760px;
    #rightsidebar {
    width: 154px;
    float:left;
    -->
    </style>
    <link href="fsbstyle.css" rel="stylesheet"
    type="text/css" />
    </head>
    <body>
    <div id="wrapper"><div id="topbanner"><img
    src="Art/topbanner.jpg"
    alt="banner" width="760"
    height="153" /></div>
    <div id="leftsidebar">
    <p><img src="Art/Sidebar.jpg" width="152"
    height="474" /></p>
    </div>
    <div id="rightsidebar">Content for id "rightsidebar"
    Goes Here</div></div>
    </body>
    </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
    ==================
    "SwampeastMO" <[email protected]> wrote in
    message
    news:[email protected]...
    > Murrary....Here's the fsbstyle code
    >
    > #wrapper {
    > font-family: Arial, Helvetica, sans-serif;
    > font-size: 10px;
    > font-style: normal;
    > color: #000000;
    > background-color: #CCCCCC;
    > padding: 10px;
    > width: 760px;
    > margin-right: auto;
    > margin-left: auto;
    > }
    >
    > #leftsidebar img {
    > width: 154px;
    > padding-top: 0px;
    > padding-left: 0px;
    > position: relative;
    > left: auto;
    > }
    > #topbanner img {
    > width: 760px;
    > }
    > #leftsidebar img {
    > padding-left: 500px;
    > }
    > #leftsidebar img {
    > padding: 0px;
    > width: 154px;
    > margin-left: 600px;
    > }
    > #leftsidebar img {
    > width: 154px;
    > margin-left: 0px;
    > }
    > #right sidebar {
    > width: 154px;
    > margin-left: 452px;
    >

  • Div tag - how do you keep text within box

    I have looked at many of the sample documents where the
    columns, div boxes, etc are layed out for you. Margins and padding
    are set. However it seems when I type text within the boundry I can
    just keep typing clear outside the boundries. Shouldn't the text
    auto-wrap to stay within the box. What good does it do to have the
    div tag settings if they don't enclose the text for you? What am I
    missing here.

    Put a space in what you are typing, please. See what happens.
    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
    ==================
    "SnowmanTruckee" <[email protected]> wrote
    in message
    news:gkth4q$m1a$[email protected]..
    >I have looked at many of the sample documents where the
    columns, div boxes,
    >etc
    > are layed out for you. Margins and padding are set.
    However it seems when
    > I
    > type text within the boundry I can just keep typing
    clear outside the
    > boundries. Shouldn't the text auto-wrap to stay within
    the box. What good
    > does
    > it do to have the div tag settings if they don't enclose
    the text for you?
    > What
    > am I missing here.
    >

  • Position Image at Bottom of Div Tag

    OK, so this may be the stupidest question ever, but how do I
    Position an Image at Bottom of the Div Tag? I named the image and
    then set;
    vertical-align: bottom;
    But this doesn't seem to have worked. I could achieve the
    bottom alignment with multiple div tags but this seems needlessly
    complicated. How should i do this?

    > ok, is there a rule for when you should use an image as
    a background as
    > opposed to placing it normally?
    No. But there are things you can do with a background image
    that you cannot
    do with a foreground one, and vice versa. I'm sure that's not
    the answer
    you wanted to hear however.
    Anytime I need to place an image at a specific location
    within a container
    (like at the bottom, or the right edge), I'm thinking of
    using a background
    image.
    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
    ==================
    "jameswoody" <[email protected]> wrote in
    message
    news:fv5el0$dn1$[email protected]..
    > ok, is there a rule for when you should use an image as
    a background as
    > opposed to placing it normally?
    > Thanks

  • None editable Div tag within a editable Div tag template

    I am using a template i created to build a website and the only editable Div is the 'Content'. Using this template i have created a 2nd template for a portfolio page. On my 2nd template i have a Div tag within the 'Content' Div tag with list of all the jobs i have  done with hyperlinked to photos. I want this list to be only editable on  the template so when i update the 2nd template rest of the files related to  this template get updated.
    Is it possible to have a none editable Div tag within an editable Div tag?
    I hope i have explained this well. Many thanks for your help

    Thank you for your respond.
    I have a main template with just the 'Content' Div Tag editable. Using this template i created anyother template for my portfolio page. Inside the editable Div Tag i have another Div Tag with 2 sets of tables for my portfolio lists. I want this Div tag to be only editable through the 2nd template only as i will have portfolio lists of over 30 pages/links.
    I selected the Div Tag with the 2 set of tables and selected 'Add Object to Library'. First message was that the CSS coding will not be copied but errors messages as follows;
    'While executing canInspectSelectio in phatfusion slideShow_FAB75CA2.htm, a JavaScript error occurred.'
    'While executing canInspectSelectio in Ken Burns Slideshow.htm, a JavaScript error occurred.'
    'While executing canInspectSelectio in Shadowbox3b Gallery_2528933A.htm, a JavaScript error occurred.'
    Everytime i click inside the Div Tag, i keep getting these messages.
    I went to the library and amended the list but only the 2nd template changed, not the related pages linked to the 2nd template.
    Is there a place where i can upload my page in this website so you can see it?
    Please see below the coding for the 2nd template for my portfolio pages;
    <!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"><!-- InstanceBegin template="/Templates/main_templateV4.dwt" codeOutsideHTMLIsLocked="false" -->
    <!-- saved from url=(0014)about:internet -->
    <!-- this and above comment should be removed for live, non-demo use -->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <META NAME="robots" CONTENT="index, follow">
        <meta name="google-site-verification" content="a_way2ZMkNZuMTtOveF3o1bvtWsVMBQujbA5jw9i0Q0" />
        <META name="y_key" content="d38873598f3b3934" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>???s</title>
    <!-- InstanceEndEditable -->
    <link href="../_css/main.css" rel="stylesheet" type="text/css" />
    <!-- InstanceBeginEditable name="head" -->
        <link href="../Galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" src="../Galleria/jquery.min.js"></script>
        <script type="text/javascript" src="../Galleria/jquery.galleria-0.9.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){ $('ul.gallery_demo2').galleria({nextText:'Next portfolio item'}); }) // activates the gallery
        </script>
        <style media="screen,projection" type="text/css">   
        p,.caption{
        font-size: 10px;
        color:#006;
        .demo2{
        position:relative;
        clear:both;
        background:black;
        width: 600px;
        .gallery_demo2{
        width: 600px;
        .gallery_demo2 li{
        width:68px;
        height:50px;
        border:thin solid #000;
        background:#111;
        padding-left: 5px;
        overflow: hidden;
        .gallery_demo2 li.active{
        border-color:#623;
        .gallery_demo2 li div{
        top:60px;
        left:0;
        border:3px solid #111;
        background:#111;
        .gallery_demo2 li img.thumb{
        opacity:.3;
        padding-left: 3px;
        .gallery_demo2 li.active img.thumb,.gallery_demo2 li:hover img.thumb{
        opacity:.99;
        </style>
        <!--[if lt IE 8]>
        <style media="screen,projection" type="text/css">
            .gallery_demo2 li img.thumb { filter: alpha(opacity=30) !important; }
            .gallery_demo2 li.active img.thumb, .gallery_demo2 li:hover img.thumb, .gallery_demo2 li img.hover { filter: alpha(opacity=100) !important; }
        </style>
        <![endif]-->  
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <!-- InstanceEndEditable -->
    <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
        background-color: #FFF;
        background-image: url(../_images/background.jpg);
    </style>
    </head>
    <body>
    <div class="container">
      <div class="header">
        <div class="header2">
          <h4><strong>ARCHITECTURAL &amp; STRUCTURAL ENGINEERING SERVICES<br />
            PROJECT MANAGEMENT &amp; CONSTRUCTIONS</strong></h4>
        </div>
      <!-- end .header --></div>
      <div class="linkBar">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html">ABOUT US</a></li>
          <li><a href="service.html" class="MenuBarItemSubmenu">SERVICES</a>
            <ul>
    <li><a href="service.html">Overview</a></li>
    <li><a href="planning.html">Planning Permission</a></li>
    <li><a href="building.html">Building Regulations</a></li>
    <li><a href="partywall.html">Party Wall Act</a></li>
              <li><a href="schedule.html">Schedule of Work</a></li>
              <li><a href="project.html">Project Management</a></li>
              <li><a href="structural.html">Structural Surveys</a></li>
            </ul>
          </li>
          <li><a href="portfolio.html">PORTFOLIO</a></li>
          <li><a href="contact.html">CONTACT US</a></li>
        </ul>
      <!-- end .linkBar --></div>
      <!-- InstanceBeginEditable name="mainContent" -->
      <div class="content">
        <h3>PORTFOLIO- website under construction</h3><!-- #BeginLibraryItem "/Library/Untitled.lbi" --><div class="portfolioText">
          <h2 class="textSubHeading">Commercial</h2>
          <div class="portfolioCommercial">
            <table width="374" align="right">
              <tr>
                <td width="181" height="20">AA Partner Ltd</td>
                <td width="181" height="20">Railing London Ltd</td>
              </tr>
              <tr>
                <td height="20">Pemon Ltd</td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20">lhjffkhgkhg</td>
              </tr>
            </table>
    </div>
          <h2 class="textSubHeading"><br />
          </h2>
          <h2 class="textSubHeading"> </h2>
          <h2 class="textSubHeading"> </h2>
          <h2 class="textSubHeading"> </h2>
          <h2 class="textSubHeading">Residential</h2>
          <div class="portfolioResidential">
            <table width="374" align="right">
              <tr>
                <td width="181" height="20">Batchworth Lane, <span dir="ltr">Northwood</span></td>
                <td width="181" height="20">Derrylands, Harrow</td>
              </tr>
              <tr>
                <td height="20">Pine Walk, Surrey</td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20"> </td>
                <td height="20"> </td>
              </tr>
              <tr>
                <td height="20">teytdytyt</td>
                <td height="20"> </td>
              </tr>
            </table>
    </div>
        </div><!-- #EndLibraryItem --><div class="portfolioSlideshow">
          <p>Project Title Goes Here:</p>
          <div class="demo">
    </div>
    <div class="demo2">
    <ul class="gallery_demo2">
        <li class="active"><img src="../_images/portfolio/planning.jpg" alt="Planning sample drawing" width="600" height="400"></li>
        <li><img src="../_images/portfolio/building.jpg" alt="Building Reg sample drawing" width="600" height="400"></li>
        <li><img src="../_images/portfolio/structural.jpg" alt="Structural sample drawing" width="600" height="400"></li>
        <li><img src="../_images/portfolio/fabrication.jpg" alt="Fabrication sample drawing" width="600" height="400"></li>
    </ul>
    </div>
        </div>
      <!-- end .content --></div>
      <!-- InstanceEndEditable -->
      <div class="footer">
      <table width="1025" border="0">
      <tr>
        <td width="500"><h6>??? </h6></td>
        <td width="10"> </td>
        <td width="500" align="right"><h6>???</h6></td>
      </tr>
    </table>
      <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    <!-- InstanceEnd --></html>

  • How to Include More Than One Font and Font Color Within a Fluid Grid Div Tag?

    Using CSS code, I can make all the words within a fluid grid div tag the same font, font size, and font color, but how do I make a few of the words different?

    You can style the basic text and heading selectors with CSS:
    p { }
    h1 { }
    h2 { }
    h3 { }
    h4 { }
    etc...
    And you can make classes:
    .red {color:red}
    .highlight {background-color:yellow}
    Then apply classes to your text or sections of it using the HTML properties panel.
    <div>
         <p>This is a default paragraph style.</p>
         <p class="red">This is red.</p>
         <p class="highlight">This is highlighted.</p>
         <p>Default style with <span class="red highlight">red, highlighted text</span> and normal text.</p>
    </div>
    Incidentally, this will work in any layout.
    How to Develop with CSS?
    http://phrogz.net/css/HowToDevelopWithCSS.html
    Nancy O.

  • Can you place an image in a div tag and then add type over top of it?

    I told someone in class lastweek that I wanted to be able to
    place type over an image. They said you can just add the image into
    the div tag as a background image, which will allow you to then
    type over it if you like. How is this done? I have tried and
    failed. I have an image that is 200x590 going down the left side of
    my page. I want to run type over it, and keep the image consistent
    on every page, but change the header and type. I've seen this in
    several sites. How do you do this with the div tag box model method
    of building a page. Can I insert an image into the div and then run
    type over it. What does the code look like?

    Here's an example of using a css and a background image to a
    table cell...
    sample principle for a div
    #div {styles go here{
    http://tinyurl.com/yqeptp
    You may also want to go through the beginner css tutorials at
    the Adobe
    site:
    http://www.adobe.com/devnet/dreamweaver/css.html
    (pay attention to the ones
    by Adrian), beginner moving onto to creating full css
    layouts.
    Hope this helps :-)
    Nadia
    Adobe® Community Expert : Dreamweaver
    CSS Templates |Tutorials |SEO Articles
    http://www.DreamweaverResources.com
    ~ Customisation Service Available ~
    http://www.csstemplates.com.au
    Forum Posting Guidelines:
    http://www.adobe.com/support/forums/guidelines.html
    >I told someone in class lastweek that I wanted to be able
    to place type
    >over an
    > image. They said you can just add the image into the div
    tag as a
    > background
    > image, which will allow you to then type over it if you
    like. How is this
    > done?
    > I have tried and failed. I have an image that is 200x590
    going down the
    > left
    > side of my page. I want to run type over it, and keep
    the image consistent
    > on
    > every page, but change the header and type. I've seen
    this in several
    > sites.
    > How do you do this with the div tag box model method of
    building a page.
    > Can I
    > insert an image into the div and then run type over it.
    What does the code
    > look
    > like?
    >

  • Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

    I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
    here's my code if it helps to answer
    <!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>Main</title>
    <style type="text/css">
    body {
    background-image: url(images/realgrade.jpg);
    background-repeat: repeat-x;
    text-align: center;
    html, body {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 25px;
    #wrapper {
    width: 930px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
    background-repeat: no-repeat;
    #header {
    height: 192px;
    width: 237px;
    background-image: url(images/logo_fill.jpg);
    background-repeat: no-repeat;
    position: absolute;
    left: 35px;
    top: -25px;
    #mainNav {
    background-color: #33F;
    height: 200px;
    width: 272px;
    float: left;
    margin-top: 233px;
    #maincontent {
    height: 600px;
    width: 608px;
    float: right;
    margin-bottom: 45px;
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: center 270px;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
    #sidebar {
    background-color: #F36;
    height: 250px;
    width: 272px;
    clear: left;
    float: left;
    #footer {
    height: 525px;
    width: 870px;
    clear: both;
    padding-top: 45px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    background-image: url(images/footer_image.jpg);
    background-repeat: no-repeat;
    margin-top: 45px;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="mainNav">
    <p> </p>
    </div>
      <div id="maincontent"></div>
      <div id="sidebar"></div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    here's what I'm going for
    here's what I'm getting in the browser
    Please help!

    Your image files are pointing to your hard drive, not your server.  You have this
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
    and you should have this
    background-image: url(imag es/opaqueMaincontent.png);
    Also, is your images file named imag es?
    Gary

  • Trying to get content to fit better within a div tag

    I've got a couple sliced up jpgs placed within a couple div tags (boxes) and aren't sure how to improve the fit. There's excess space vertically and it's not quite centered horizontally.
    Here's the page: http://doughertyautomotive.com/New_Site/index.html
    Thanks.

    First off, from your post, we don't know which "couple of div tags" concern you. In Firefox, I did notice some elements not aligned with others that I am presuming are supposed to square up, but without a specific example it would be a waste of time to review your code in detail. Hazarding a guess, I'd say that you have assigned widths and heights to the jpegs that make them larger than the container you put them in. So you're just going to have to comb through all of your CSS and double check any assigned widths and heights of elements. It's also possible that you've added a CSS style which conflicts with one in the Project 7 style sheets. And for troubleshooting the Project 7 app, you need to go to its web forum.
    Chris
    www.cdeatherage.net

  • Where is the "Start New Row" check box when adding a div tag?

    Ever since I updated Dreamweaver, when i add a div tag i no longer see the "Start A New Row" check box. The only checkbox i see is "Insert as a Fluid Element". Has this option been removed or has it been moved to a new location?

    Hi MichaelMuirhead,
    We have updated Fluid grid in 12.2 release of DW as well as in CC release.
    Unlike before, Now DW smartly recognizes when a Fluid page is open and Converts Structure category to Fluid layout category.
    I.e. when any element is inserted from Structure category on to a fluid page it will be inserted with required CSS to make it fluid, Unless user advices otherwise.
    The idea is to enhance the support for almost all the structural elements as fluid elements, rather than just supporting Div as a fluid element. Hence, Insert Fluid Grid Layout Div Tag has been removed.
    Steps to Insert a fluid element:
    Select Insert > Layout.
    Select the element that you want to insert. (i.e Div or Header or footer etc) 3. In the dialog that appears, enter a new class name, or enter a value for the ID. The selected element is inserted on the layout.
    4) To insert a normal/non fluid element uncheck 'Insert as fluid element' check box in previous dialog.
    Now to answer second part of your concern " Regarding missing "Start A New Row" check box"
    All the elements inserted on a fluid page, start in a New row by default. If user wants to place the element in previous row then in can be achieved by clicking "Move Up a row" button which comes up on FG element HUD, after inserting that element.
    Please refer Screen shot for clearer understanding.
    For more details on update navigate to: http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver .html
    Here is the link to new Video on how to design a FG page using new FG in DW 12.2.
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Please note that "Layout" Category in 12.2 has been renamed to more appropriate sounding "Structure" Category in DW CC.
    Hope it helps.
    Kindly revert for any issues or concerns.
    Thanks,
    Puneet

  • How do I position AP Div Tags relative to a Table?

    Hi!
    I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)

    webdesigner3383 wrote:
    Hi!
    I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)
    Not sure why you want to do this as it can be hit and miss.
    I would insert a <div> in a table cell and set its position to relative and then insert an absolutely positioned <div> inside of the relatively positioned one:
    <td>
    <div style="position: relative;">
    <div style="position: absolute; top: 50px; left: 40px;">Content goes here</div>
    </div>
    </td>
    I think that should work although I havent tried inserting <divs> inside a <td> cell for many moons.

  • Help- check box on when the page is loaded first time have to show div tag

    posted Yesterday 11:48 PM
    Hi Friends,
    I have a check box and the information of if it is checked or not comes from Actionform get, I want the div tag to be displayed when the jsp is first loaded and the check box is checked.
    Can some one help me in sending the sample code for this.
    with regards,
    Bhargavi.

    Hi Scott,
    Declare a SessionBean variable to hold the unique key field value for that table. Set that value when the user clicks on the button. Use the value to select only that row on the next iterattion of the page in RowSet.setCommand statement.. You will want to do some conditional initialization for this page depending upon whether or not this seesion bean variable has been initialized.

Maybe you are looking for