www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 23 of 23

Thread: using an image as a table corner

  1. #16
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    The only problem stefan is that the corner picture isn't in there.
    Yes it is, but you of cource have to provide the correct URL for it in this section of the CSS

    background:purple url(corner4.gif) 100% no-repeat;
    // Stefan Huszics

  2. #17
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    whoops, didn't see that, let me check it out...

    Thoughts on the bottom TD not touching the bottom of the screen?

  3. #18
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span.

    Any way around that? Would it be possible to nest two spans, or something like that.

    I appreciate your help.

  4. #19
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    Ok, it works, with one exception. The way I have it set up, the span it's in uses a border for the left and top, when I use your example it adds the border line over the image because it is in the span.

    Any way around that? Would it be possible to nest two spans, or something like that.
    Yes, you could use 2 spans if you like, with the second only containg the backgrund.
    Alternativly you could put the image back into the page and float it left too, but that is more tedious if you decide to modify the layout in the future as you then have to change it on every page.

    Perhaps this would be the best actually


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title></title>
    <style type="text/css">
    body {background:#ccc;}

    .tab {text-align:right}
    .tab em {float:left; width:100px; text-align:left; padding-left:10px; color:white; background:purple;}
    .tab span {float:left; width:15px; background:url(corner4.gif) 0 no-repeat;}

    </style>
    </head>
    <body>

    <div class="tab"><em>A Title</em><span> </span><a href="#">Brizzett</a> | 12-12-12 3:45 AM</div>
    <div>hello<br>hello<br>hello</div>

    </body>
    </html>
    Last edited by Stefan; 12-26-2002 at 12:06 AM.
    // Stefan Huszics

  5. #20
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Unless I'm missing it, that didn't show the image.

    Your example is located here, it's on the very bottom of the page, http://www.geocities.com/manhattanse...ree/test2.html

  6. #21
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    Unless I'm missing it, that didn't show the image.
    Sorry, my mistake

    <span> </span>
    should read
    <span>&amp;nbsp;</span>
    // Stefan Huszics

  7. #22
    Join Date
    Dec 2002
    Location
    Manhattan, KS
    Posts
    133
    Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be. I thought it might be because some of the text is larger than I wanted it to be, so I added some font changing CSS. Also, instead of useing the <EM> tag, I used another <span> flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work.

    Another problem that seemed to happen was that the first line of the text below became centered, not sure on that. Again, you can view the test page at:

    http://www.geocities.com/manhattanse...ree/test2.html

    The referenced style sheet is located here:
    http://www.geocities.com/manhattanse...ree/style2.css

    Again, thank you for your time.

  8. #23
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by thejoker101
    Adding the non-breaking space did add the picture. however, it added it about 2 pixels lower than it needs to be.
    You controll the hor & vert position of the background with the values you give in % or px

    eg
    background:url(corner4.gif) 2px 3px no-repeat;

    Also, instead of useing the <EM> tag, I used another <span> flag, but I also added Class names to them, and in my style sheet I referenced them by: .tab span.SpanClassName This seemed to work.
    Yepp it works fine that way too. I just used <em> since it made scence both structurally in the markup but also alowed for a much shorter code.
    If both are spans you will have to add the class="whatever" to each and every span on the page which bloats the code unnessecarily in this case.

    Another problem that seemed to happen was that the first line of the text below became centered, not sure on that.
    That looks like a small IE bug.
    Should be easy enough to work around. I presume simply specifying the height of the tab div should fix that
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles