CODEWITHSUNDEEP
htmlcss
Munira
Munira

Reputation: 153

How do I make this box in CSS (please see my image)?

In my div box I have a body and header part. I want to give the header part a separate border that must sit inside the div box, and must not have any padding. Exactly should look like my given image:

image

This is what I have tried:

HTML:

    <div id="story">
    <p>

    Story Header

    </p>
    story body.
   </div>

.CSS:

#story{

    border: 1px solid blue;
    padding:10px;

}
#story p{
    border: 1px solid blue;
    background-color:black;
    color:white;
}

See it here: Demo

Upvotes: 2

Views: 267

Answers (6)

Turnip
Turnip

Reputation: 36642

You could use negative margins on the header..

#story{
    
    border: 1px solid blue;
    padding:10px;
    
}
#story p{
    border: 1px solid green;
    background-color:black;
    color:white;
    padding: 10px;
    margin: -11px -11px 10px -11px;
}
<div id="story">
    <p>
    Story Header     
    </p>
    story body.
</div>

JSFiddle version

Upvotes: 6

luxas
luxas

Reputation: 438

Would this work?

#story {
  //something general

}
#story p {
  background: black;
  color: white;
  margin: none;
}
#story div {
  padding: 10px;
  border: blue 2px solid;
  border-top: none;
}
<div id="story">
  <p>header</p>
  <div>body</div>
</div>

I can't make a fiddle just now, but try this code. Happy coding!

Upvotes: 1

FelipeAls
FelipeAls

Reputation: 22161

You really should have a container for each different part. It's more obvious when you use (more realistic) faux text:

<div class="story">
    <header class="story-header">
        <h1>Story Header</h1>
    </header>
    <div class="story-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto inventore in similique explicabo voluptate eveniet. Consectetur suscipit soluta nam dolore officia nemo architecto natus voluptates iste laboriosam debitis adipisci.</p>
    </div>
</div>

I use classes a lot that are then used as selectors in CSS. It's a bit more efficient and especially avoids CSS specificity problems and is more clearer imho.

  • padding: set it on each child .story-header and .story-content. You can remove padding-bottom from header and padding-top from content if needed, or define resp. padding: 10px 10px 0 10px and padding: 0 10px 10px 10px
  • border: same technique: each child has a border and you then remove the 2 in-between "lines". Define a (default) color on both of them and change it on the other one (shorter CSS in general)

CSS

.story-header,
.story-content {    
    border: 1px solid red;
    padding: 10px;
}
.story-header {
    border-bottom-width: 0;
    /*padding-bottom: 0; maybe */
    background-color:black;
    color:white;
}
.story-content {
    border-color: blue;
    border-top-width: 0;
}
.story-header h1 {
    /* Styles you can add */
    /*margin: 0;*/
    /*line-height: 1.5;*/
}

Fiddle: https://jsfiddle.net/dada0s0d/6/

Upvotes: 2

Pranali Maske
Pranali Maske

Reputation: 132

HTML

<div class="container">
<div class="header">Header story</div>
</div>

css

    .container{width:300px;
height:400px;
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    border-left: 3px solid blue;
    border-bottom: 3px solid blue;
}
.header{background:black;color:white;font-size:20px;font-weight:bold;
height:100px;text-align:center;line-height:100px;
}

See the Fiddle for more

Upvotes: -1

Vicky
Vicky

Reputation: 378

HTML

<div id="story">
    <header>Story Header</header>
    <div class="story-body">Story body.</div>
</div>

css

#story{    
    border: 1px solid blue;
    text-align:center;
    height:300px;
    width:200px;
}

header{
      padding:10px;
      background-color:#000;
      color:#fff;height:30px}
.story-body{
    padding:20px 10px 10px;
}

here is your Demo

Upvotes: 0

Damien
Damien

Reputation: 1217

With separate containers for all elements (no need for extra margins etc).

.story{
    border: 1px solid #000;
}

.story header {
    background: #000;
    color: #fff;
    padding: 10px;
}

.story__body {
    padding: 10px;
}
<div class="story">
    <header>
        Story header
    </header>
    <div class="story__body">
        <p>Story body</p>
    </div>
</div>

Upvotes: 3

Related Questions