CODEWITHSUNDEEP
htmlcssheaderborder
Tews
Tews

Reputation: 53

Is there a way to make a border in html+css?

I know this sounds kind of confusing but I am wondering if it is possible to make a thick border line where the header is supposed to be?

I will try to explain it by giving an image:

I want the top part of my website page to have a different color, and then the lower part another color.

Is there any way I could use a html/css code to make this happen?

Upvotes: 0

Views: 45

Answers (4)

Filip Bartoš
Filip Bartoš

Reputation: 46

There is a way, you have to use CSS to do this lets say you have.It doesnt matter if you are using HTML5 or HTML4 the code below is only example

<section>Header</section>
<article>Body</article>

now you need to add to your <head></head> , style tag

<style></style>

but if you are using HTML4 it must be

<style type="text/css"></style>

Now you need to select one of those and give them color, in my example I will give them both color

<style>
 section{
  background-color:#000000;
 }
 article{
  background-color:#FFFFFF;
 }
</style>

background-color neednt to be in hexadecimal like #FFFFFF it can be in rgb(0,0,0) or rgba(0,0,0,0).

Upvotes: 0

user3669859
user3669859

Reputation: 61

if i understand correctly, you can create a div and append following css:

border-top: 50px yellow solid; background-color: #000000;

==============

In this way the header part will be only for design, you can't put a relative code inside the border.

If you want to use that space you can do the following:

<style type="text/css">

div.header {
text-align:center;
background-color: yellow;
color: #00000;
padding: 20px;
width: 100%;
}

div.body {
width: 100%;
backgroun-color: #000000;
color: #ffffff;
}
</style>

<div class="header">Title</div>
<div class="body">Content</div>

Hopefully will help you, Cheers

Upvotes: 1

Roman Oxman
Roman Oxman

Reputation: 397

You can try having an element for your header, this way you can include content in it.

HTML5 has added multiple new tags for better understanding, you can use the tag header for it and then define you content inside the tag main

For example: 

body {
  background: #FAFAFA;
  padding: 0;
  margin: 0;
}

header {
  background: #3F51B5;
  padding: 20px;
  text-align: center;
  color: white;
}

main {
  padding: 20px;
}
<header>This is the header</header>

<main>
  This is the content
</main>

Upvotes: 0

CodeWeis
CodeWeis

Reputation: 856

this is the way to do it but for a question like this you should researsh a bit and learn the basics

.header{
  background-color:yellow;
  width:100%;
  height:150px;
  }
  .rest{
  background-color:black;
  width:100%;
  height:700px;
  }
<div class="header">
</div>
<div class="rest">
</div>

Upvotes: 2

Related Questions