CODEWITHSUNDEEP
htmlcss
user432584920684
user432584920684

Reputation: 389

HTML CSS Box Styling

I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action. enter image description here

Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.

Included is the CSS code and an example of usage.

<style type="text/css">
  boxytest
  {
    padding: 10px;
    text-align: center;
    line-height: 400%%;
    background-color: #fff;
    border: 5px solid #666;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
  }
</style>

<body>
  <div align="center">
   <boxytest> Hey guys! What's up? </boxytest>
  </div>
</body>

Any help is greatly appreciated.

Upvotes: 1

Views: 883

Answers (2)

Simon West
Simon West

Reputation: 3788

As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;

jsfiddle here

Upvotes: 2

chipcullen
chipcullen

Reputation: 6960

Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.

I would do something like this:

<body>
  <p class="boxy">Test sentence</p>
<body>

The in CSS:

 .boxy {
  padding: 10px;
  text-align: center;
  line-height: 400%%;
  background-color: #fff;
  border: 5px solid #666;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  /* to prevent word wrapping */
  white-space: nowrap;
  overflow: hidden;
  }

The last bit is based on this post.

Upvotes: 1

Related Questions