CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Harsha M V
Harsha M V

Reputation: 54949

HTML CSS Box Container

I have a box container as shown bellow

enter image description here

Which i want to code in a modular way so that i can use the html css structure to build any size box in width and height. I will be using Bootstrap to code the website

Which is the best way to get started.

Upvotes: 2

Views: 9823

Answers (3)

COLD TOLD
COLD TOLD

Reputation: 13599

If you're willing to try jQuery ui you can simply use dialog to achieve what you want here is the link with more info.

http://jqueryui.com/demos/dialog/#default

Upvotes: 2

Sampson
Sampson

Reputation: 268414

I tried to keep this as similar to your example as I could with straight CSS. Given this approach, you won't find immediate support in IE8 and lower.

The markup for the box itself is pretty simple:

<div id="modal">
  <header><h1>Something Here</h1></header>
  <section>
    <p>Pellentesque habitant morbi tristique...</p>
  </section>
</div>

The CSS for this markup can be found below the preview image below.

Demo: http://jsbin.com/ogesuf/5/edit

enter image description here

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #modal {
    width: 600px;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
    overflow: hidden;
  }
  #modal header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
    box-shadow: 0 1px 2px #888;
    padding: 10px;
  }
  #modal h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
  }
  #modal section {
    padding: 10px 30px; 
    font-size: 12px;
    line-height: 175%;
    color: #333;
  }
</style>

Upvotes: 2

Raekye
Raekye

Reputation: 5131

Let's say that gradient on the top is named gradient.png

.box {
    border: 1px solid gray;
    border-radius: 3px;
    background: white url("gradient.png") ;
    background-repeat: repeat-y;
    padding-top: 20px;
}

I think it's mostly self explanatory; the repeat-y just makes it repeat accross the top but not throughout the rest of the image. The padding makes it so the text doesn't start at the top. See how it works for you.

By the way, is that from the Apple discusion page?

Upvotes: 3

Related Questions