SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS Fist Fight

  1. #1
    The short answer is yes... Herbster's Avatar
    Join Date
    Oct 2001
    Location
    Bay City, Oregon
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Fist Fight

    This won't make a lot of sense until my attachments display.

    Divide and conquer. This is a block that will appear on a page. I've gone crosseyed trying to lay it out using CSS. Finally went to a table out of desperation, but it still doesn't do what I want.

    Any ideas. And if this turns out to be simple and something I should have known - so much the better! lol
    Attached Images Attached Images

  2. #2
    Rabble Rouser bronze trophy
    Join Date
    Jan 2003
    Location
    Mountain View, CA
    Posts
    427
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See here for the technique. (I think this is what you're looking for.)

  3. #3
    The short answer is yes... Herbster's Avatar
    Join Date
    Oct 2001
    Location
    Bay City, Oregon
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I was finally able to get what I wanted after backing away from the keyboard for awhile. - and that link helped. Thank you.

    No idea why my attachments show as links rather than images...

  4. #4
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Well, I could do that with tables easy enough but I reckon it would be tricky with layers and CSS. Care to post some code so we can see how you've managed it?

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Herbster
    No idea why my attachments show as links rather than images...
    Cause you attached them?
    Aaron Brazell
    Technosailor



  6. #6
    The short answer is yes... Herbster's Avatar
    Join Date
    Oct 2001
    Location
    Bay City, Oregon
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uh... ok. I replaced confidential text with junk. Box #4 ended up being a round corner bordered table nested in a div. I left it in. Box #2 - I got rid of the <div> and just used the image I wanted (about 100px by 100px). Got rid of Box #3, too, putting the text in the container <div>.

    You'll need to substitute your own images. I've only tested this in IE5.5 and NS6.
    If you see an easier way or it looks goofy in a different browser, lemme know...

    Also, I'm too tired to cope with the code editor. Even though it gives cool colors, it always tries to second guess me and messes things up. Just cut and paste this into a new document.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Box</title>

    </head>
    <body>
    <div style="margin:0px;padding:0px 20px 0px 0px;border:1px solid #000000;">
    <img src="nm-dvd2.gif" alt="" style="margin:5px 0px 10px 20px;float:left;">
    <div style="margin:20px 0px 10px 20px;padding:0px;width:300px;float:right;">

    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:0px;padding:0px;border:0px;">
    <tr>
    <td width="14" height="14" style="background: url(nm-ul.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="14" alt="" /></td>
    <td width="100%" height="14" style="background: url(nm-ct.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="1" height="14" alt="" /></td>
    <td width="14" height="14" style="background: url(nm-ur.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="14" alt="" /></td>
    </tr>
    <tr>
    <td width="14" style="background: url(nm-cl.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="1" alt="" /></td>
    <td width="100%" style="background:#ffffff;margin:0px;padding:0px;border:0px;">The contents of your box goes here!<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog…...</p></td>
    <td width="14" style="background:url(nm-cr.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="1" alt="" /></td>
    </tr>
    <tr>
    <td width="14" height="14" style="background: url(nm-bl.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="14" alt="" /></td>
    <td width="100%" height="14" style="background: url(nm-cb.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="1" height="14" alt="" /></td>
    <td width="14" height="14" style="background: url(nm-br.gif);margin:0px;padding:0px;border:0px;"><img src="1x1spcr.gif" width="14" height="14" alt="" /></td>
    </tr>
    </table>

    </div>
    <p style="margin:0px;padding:0px 0px 10px 20px;clear:left;font-family:Verdana;text-align:justify;">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog…... The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog…...</p>
    <div style="margin:0px;padding:0px;height:0px;line-height:0px;clear:both;">&nbsp;</div>
    </div>



    </body>
    </html>

  7. #7
    The short answer is yes... Herbster's Avatar
    Join Date
    Oct 2001
    Location
    Bay City, Oregon
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sketch
    Cause you attached them? [img]images/smilies/wink.gif[/img]
    I must have done something differently. Last time I attached an image it appeared as an image.


Bookmarks

Posting Permissions

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