creating tables in ccs in html rounded edges wrap text

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Nancy Sanders
    New Member
    • Dec 2010
    • 1
    #1

    creating tables in ccs in html rounded edges wrap text

    Looking for help in creating the following pic below with ccs in a html page, i have tried and cannot figure out how.

    http://www.dreadfulzombie.com


    I have been trying to insert the ccs into the <head> instead of a file.

    I have looked up so many websites on ccs and tables its crazy, trying to make this simple and work corectly with Firefox/Explorer etc..

    Code:
    -moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px; 
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px; 
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px; 
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px; 
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
    i have had a hard enuff time with basic nested html tables, but getting it into ccs, more difficult.

    Trying to create Table 1 with text that will wrap around Table2 inside of Table1 with both table edges being rounded.
    Without having to create 4 rounded edge pics or 1 top / 1 bottom rounded pic's.

    Anybody out there that can help create this please?
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      You should never use tables for layout. Learn how to use CSS with div and this will be a thousand times easier.

      Regards, Death

        Comment

        • AutumnsDecay
          New Member
          • Mar 2008
          • 170
          #3
          CSS has a word-wrap function that may allow for this.

          Code:
          <div style="word-wrap:normal; float:left; text-align:left;">
    <div style="float:right; text-align:left;">
        Text Text Text
    </div>
    <p align="left" style="float:left;">
        This is primary text
     </p>
</div>
          Completely untested, but may work.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434
              #4
              I am not aware of 'word-wrap:physical'. I don't believe there is any such thing.

                Comment

                • AutumnsDecay
                  New Member
                  • Mar 2008
                  • 170
                  #5
                  You're right, Howard. Not sure why I typed physical. I've corrected my code using 'normal' as the property for word-wrap.

                    Comment

                    Previous template Next
                    Working...