Skip navigation
newbiewebdesigner
Currently Being Moderated

How to put text over bg in cell

Feb 3, 2013 11:11 AM

Hello:

 

I made a table, put the images in which I created as slices in photoshop (making sure they all fit in tidy columns and rows) and in one cell I want to put text over an image, so I hit 'edit rule' and set the background image and then told it not to repeat, etc, but although the background image shows up in dreamweaver, it does not show up in either firefox or internet explorer.  Here is a link to the page so you can see what I am talking about.   I have never used this feature in dreamweaver before - used to use an earlier version without the 'edit rule' button.  I probably did it wrong, but cannot figure out what was wrong.

 

Thanks a ton in advance.  Feel free to comment on everything about how I did it - if it is sloppy or a bad idea, let me know.

 

http://www.jhermansen.com/testingcell.html

 
Replies
  • Currently Being Moderated
    Feb 3, 2013 11:24 AM   in reply to newbiewebdesigner

    Photoshop & Fireworks are great for creating images but suck when it comes to generating HTML code.  Why? Because the code (actually tables), are too rigid to hold anything other than the image slices they were generated for.   As soon as you start trying to add real content to this kind of layout, it blows apart.

     

    To do it correctly, use Pshop or Fireworks for images only.  Use DW to create your HTML and CSS Layout.

     

    This 3 part tutorial explains the procedure.  It's essentially the same no matter which graphics editor you use.

     

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 12:10 PM   in reply to newbiewebdesigner

    Had a quick look at the URL you provided and there is no background set for your table cell.

     

    Try this:

    <td id="Text" style="background: url(images/printc3r3.jpg);">Just testing the text here to see what it looks like</td>

     

    (Using table for layout is not a good idea, by the way.)

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 2:27 PM   in reply to newbiewebdesigner

    Still have a problem

    newbie.jpg

    To fix, change this CSS from 14px to 12px

     

     

    #cell {

        background-image: url("images/printc3r3.jpg");

        background-repeat: no-repeat;

        font-family: "Myriad Pro","Arial Black",Gadget,sans-serif;

        font-size: 12px;

        font-style: normal;

        height: 167px;

        text-align: left;

        vertical-align: text-top;

        width: 498px;

    }

     

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2013 2:29 PM   in reply to newbiewebdesigner

    > What is the best way to lay out a website?

     

    Semantic HTML for holding the information and Stylesheet for presentation. Therefore <table> should only be used for structuring tabular data, not for placing visual elements.

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points