Skip navigation
newbiewebdesigner
newbiewebdesigner Calculating status...
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

498 Views   8 Replies   Latest reply: newbiewebdesigner, Feb 4, 2013 7:11 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 3, 2013 11:24 AM   in reply to newbiewebdesigner
    Report

    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:
  • newbiewebdesigner
    Currently Being Moderated
    2. newbiewebdesigner,
    Feb 3, 2013 11:31 AM   in reply to Nancy O.
    Report

    I must have read that elsewhere from you because I did create my own table and bring each image in individually myself using the 'insert image' in one of the menus.  the problem is with that one cell that I want to put text in:  I cannot get the background image to show up, although I inserted it as a background image using the 'edit rule' button.

     

    But thank you for your input - your tutorials helped me realize and fix another problem I was having, simply by making my own table I was able to fix the problem.  Very helpful!

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

    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:
  • newbiewebdesigner
    Currently Being Moderated
    4. newbiewebdesigner,
    Feb 3, 2013 1:41 PM   in reply to kennethkawamoto2
    Report

    Thank you!  I fixed it based on what you said.  What is the best way to lay out a website?

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    5. Ken Binney,
    Feb 3, 2013 2:27 PM   in reply to newbiewebdesigner
    Report

    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:
  • kennethkawamoto2
    Currently Being Moderated
    6. kennethkawamoto2,
    Feb 3, 2013 2:29 PM   in reply to newbiewebdesigner
    Report

    > 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:
  • newbiewebdesigner
    Currently Being Moderated
    7. newbiewebdesigner,
    Feb 4, 2013 7:11 PM   in reply to kennethkawamoto2
    Report

    Thank you!!!! I will look into it.

     
    |
    Mark as:
  • newbiewebdesigner
    Currently Being Moderated
    8. newbiewebdesigner,
    Feb 4, 2013 7:11 PM   in reply to Ken Binney
    Report

    Thank you!  That fixed the problem.  I really appreciate you taking the time to examine my code and tell me what to do with a screen shot of the problem, and all.  It  has been a live saver.  Thank you again!

     
    |
    Mark as:
Actions

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