Container / header help [css]

CH33S30

CH33S30

New Member
Aug 28, 2013
18
1
Greetings! I have coded a container but i'm trying to get a header in the container, every time I attempt this I always mess up. so I was wondering if anyone could please help me as it is very simple.


Image of the design that I'm trying to code.
358uj45.gif


If you do not understand me or need any details then please leave a comment below.

Thanks! ~Homer
 
Sort by date Sort by votes
CH33S30

CH33S30

New Member
Aug 28, 2013
18
1
I haven't made the container as I know how to do that, it's just the header that goes in the container which is annoying, also I'm a newbie at coding so I may have allot of mistakes.

Css file
Code: 
#contentHeader {
font-weight: bold;
color: black;
height: 30px;
-moz-border-radius: 3px;
border-radius: 3px;
}

html
Code: 
<!DOCTYPE html>
<html>
<body>
<title>test</title>
<link rel="stylesheet" href="test.css"type="text/css">

       
        <div id="page-content-text">

                    <center>
        <div id="contentHeader" class="black">
        <p> YOUR NAME OR WHAT EVER HERE</p>
        </div>
      </center>
     

     
    
</body>
</html>

I think it may be the file name which is probs the reason why I cannot get it to work but I have tried everything so I'm not even sure anymore.
 
Upvote 0 Downvote
CH33S30

CH33S30

New Member
Aug 28, 2013
18
1
I have made 2 files which are in the same folder, one called 'test.css' and the other file called 'test.html' I'm trying to get the css file to work in the html file which it isn't so that's why it wont add the header, I thought I have done it right but it isn't working? It could be something very simple or it could be me coding this all wrong.
 
Upvote 0 Downvote
Nehalem

Nehalem

ツ
Aug 31, 2013
293
47
So you're trying to get a title to that 'box'? That's easy.
Let's say you've a box, written in pure CSS, no images at all.
Code: 
.box {
    background-color: #FFF;
    border-radius: 3px;
    padding: 10px;
    width: 200px;
}

Now, all you want is to add a title to that box, maybe with a coolish background color.
Code: 
.title {
    background-color: #F00;
    color: #FFF;
    padding: 10px;
    font-weight: bold;
    border-radius: 3px;
    margin-bottom: 10px;
}

And the HTML output will be:
HTML: 
<div class="box">
    <div class="title">Title/Header Here</div>
    And some content text here.
</div>

I hope that helps you out, since you'll have to do something similar to that.
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top