Sticky Header with with header divided in 40%|60% length

Hi All:

Here is my code for a sticky header. It creates a panel like effect at top of the page which is desired. To have a better effect I had to break the Css/panel in two parts. Please let me know how to show a beakup at 40% length. Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

header {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
</style>


<body>
<header class="header">
  header
</header>

<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>

Look forward to your response.

Regads

Sunnybrad
sunnybradAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Add this in the style css element:
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
  width:40%;
}

Open in new window

0
Slick812Commented:
greetings sunnybrad, .  I do not understand your question here? ? You speak of length as "40% length" and you talk of the header "break the Css/panel in two parts", BUT In your code as -
   <header class="header">
      header
   </header>
there are NOT two parts, just one part "header". So what are you talking about,? I do not understand?

Anyway, I did some code for your other question, and In the code below, I have added content to the <header> the typical Web Site Title and a menu, and I used two sections as a <p> and a <div> with the widths as 33%  and 64% and I added a hamburger Icon and used the CSS -
    @media screen and (max-width: 650px){
to hide the menu and show the Icon
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
html, body {
  height: 100%;
  margin: 0;
}
body {
  font: 16px Sans-Serif;
}
footer, header {
  background: #07c;
  color: white;
 /* line-height: 45px;*/
  padding: 0 20px;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
.content {
padding: 44px 0;
}
.content-inside {
padding: 10px 20px;
background: #cfc;
max-width: 55em;
margin: 0 auto;
}

#footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 45px;
padding-top: 10px;
box-sizing: border-box;
}

#header {
position: fixed;
padding-top: 4px;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
text-align: center;
box-sizing: border-box;
overflow:hidden;
}

#header em{
display: none;
width: 25px;
float:right;
margin-top: 10px;
cursor: pointer;
}

#header em b {
display: block;
margin: 4px 0;
border-top: 3px solid #fff;
}

#header p, #header div {
display: inline-block;
margin: 0;
box-sizing: border-box;
width:33%;
padding: 5px 5px;
/*background: #559;*/
vertical-align: middle;
}

#header p {
font-size: ;
font-weight: bold;
letter-spacing: 2px;
font: 116% comic sans ms, Helvetica, Sans-Serif;
font-weight:bold;
color: rgba(250,240,220,0.6);
text-shadow: 0 0 5px #FFF1A5, 
  0 0 10px #FFF1A5,
  0 0 20px #FFF1A5, 
  0 0 30px #FFF1A5,
  0 0 40px #FFF1A5;
}

#header div {
width:64%;
background: transparent;
}

#header div a{
display: inline-block;
font-size: 15px;
font-weight: bold;
color: #fff;
text-decoration: none;
padding: 1px 5px;
border-radius: 7px;
border: 1px solid #fff;
margin: 0 1.3%;
}

@media screen and (max-width: 650px){#header div{display:none;} #header em{display: inline-block;} #header p{width:80%;}}
</style>

</head>
<body>
<div class="content">
<header id="header">
  <p>Web Site Title</p><div><a href="#">Menu</a><a href="#">Menu</a><a href="#">Menu</a><a href="#">Menu</a><a href="#">Menu</a><a href="#">Menu</a></div><em><b></b><b></b><b></b></em>
</header>
  <div class="content-inside">
    <h1>Sticky Header and Footer</h1>
  
  <p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p><p>More content<br />Other content</p>
  </div>
<footer id="footer">
  Footer
</footer>
</div>
</body>
</html>

Open in new window


In order to get the elements in the correct size and positions, you need to have Content so you can change the CSS to have the elements be how you want them.
0
sunnybradAuthor Commented:
Hi:

How are you ? Greetings. Sorry I have started using experts-exchange after some time...if I miss something.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>

<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

header2 {
  background: #42A5F5;
color: white;
  line-height: 50px;
  padding: 0 20px;
  width: 40%;
}

header1 {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
  width: 60%;
}
</style>


<body>

<header class="header">
  header
</header>
<header1 class="header1">
  header1
</header1>


<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>

<footer class="footer">
  Footer
</footer>

Open in new window


I want the header to be 40% and then with a slight separation 60%. This has to be one seamless header with just slight separation.
With this code I have one header underneath another.

In addition to this I need various variation of this code...as I get a solution...I will keep working on them and ask them questions.

Best Regards,

Sunnybrad
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

sunnybradAuthor Commented:
In addition to this I need various variation of this code...as I get a solution...I will keep working on them and ask experts few questions.

Regards

Sunnybrad
0
Slick812Commented:
Sorry, but I can not understand the code you have in your page as you have this in the CSS -
header2 {
  background: #42A5F5;
color: white;
  line-height: 50px;
  padding: 0 20px;
  width: 40%;
}

header1 {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
  width: 60%;
}

Open in new window


and you have this in your HTML -
<header class="header">
  header
</header>
<header1 class="header1">
  header1
</header1>

Open in new window


They do not seem to have any correspondence. The CSS does NOT MATCH the HTML, and You did not say anything about the Page code I supplied you, Does it have any thing that looked like what you want to display?

ALSO the Page code you supplied, does NOT display correctly in a browser, Have you tried this code, and it works for you?
0
sunnybradAuthor Commented:
Hi Slick812:

The page code you gave earlier is relevant bit for a different need to create header and menu in index.html. This code example is for panel like effect via CSS.

I did not mean to include header2. I also changed my html and re-included code. I am also including rendered html code png file.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>

<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
header {
  background: #42A5F5;
  color: white;
 line-height: 50px;
  padding: 0 20px;
  width: 40%;
}

header1 {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
  width: 60%;
}
</style>


<body>

<header class="header">
  header
</header>
<header class="header1">
  header1
</header>


<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>

<footer class="footer">
  Footer
</footer>


</body>
</html>
I want header and header1 side by side with just a little spacing.
Correct me if I am wrong....I have started using things after a long time.

Best Regards

Sunnybrad[embed=file 1216932]

Open in new window

Screen-Shot-2017-12-28-at-10.45.40-A.png
0
Slick812Commented:
OK, but You do not seem to understand a <header> this usually holds ALL of the Header Content, so most everyone DOES NOT have TWO headers. So In my code I have ONE header and this has a left and right header Content, as two <div>, if you do the math 40% and 60% is 100%, so you can not have your "a slight separation" because that's more than 100%, my code below -
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>

<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
header {
  background: #42A5F5;
  color: white;
 line-height: 50px;
  padding: 0 20px;
  text-align: center;
}

.headerLeft {
display: inline-block;
width: 39.5%;
margin-right: 0.4%;
text-align: left;
background: #82c5FF;
box-sizing: border-box;
}

.headerRight {
display: inline-block;
width: 59.5%;
text-align: left;
background: #1090ED;
box-sizing: border-box;
}
</style>


<body>

<header class="header">
<div class="headerLeft">Header Left</div><div class="headerRight">Header Right</div>
</header>


<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>

<footer class="footer">
  Footer
</footer>


</body>
</html>

Open in new window


BUT you give no Header content in your code as TEXT, and NO WAY to see where the left and right elements end and begin, so I changed the background to different colors, in order to see the <div> an the separation. ALSO for this to work you can NOT HAVE blank space between the header <div> as you need it as-
   <header class="header">
   <div class="headerLeft">Header Left</div><div class="headerRight">Header Right</div>
   </header>

since this -
   <header class="header">
   <div class="headerLeft">Header Left</div>
   <div class="headerRight">Header Right</div>
   </header>
has a line break, which renders as a blank space in HTML, and will mess up the MATH for the width % an margin %
0
sunnybradAuthor Commented:
Hi:

I made slight change to code there smudged effect to the left and to the right. I have included the screen shot. I also need to make it work like two buttons from the left and right panel show to say. I have also included screen shot of the end effect as desired.

Here is the changed code:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>

<style>
html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
header {
  background: #42A5F5;
  color: white;
line-height: 50px;
  padding: 0 20px;
  text-align: center;
}

.headerLeft {
display: inline-block;
width: 39.5%;

text-align: left;
background: #82c5FF;
box-sizing: border-box;
}

.headerRight {
display: inline-block;
width: 59.5%;
text-align: left;
background: #1090ED;
box-sizing: border-box;
}
</style>
<body>
<header class="header">
<div class="headerLeft">Header Left</div><div class="headerRight">Header Right<\
/div>
</header>
<div class="content">
  <div class="content-inside">
    <h1>Sticky Header with Negative Margin 2</h1>
  </div>
</div>
<footer class="footer">
  Footer
</footer>
</body>
</html>

Open in new window



Look forward to your comments.

Best Regards,

Sunnybrad
Screen-Shot-2017-12-28-at-11.51.30-A.png
Screen-Shot-2017-12-28-at-11.54.20-A.png
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
Again , I do not understand, I looked at the image with the flights for Denver and San Fransisco, and it does NOT look like a <header> to me, it looks like "List" with many rows in it. AND there does not seem to be any CSS correspondence  to the Header CSS you have as -

header {
  background: #42A5F5;
  color: white;          
  line-height: 50px;
  padding: 0 20px;
}

has nothing to do with the image of flights you show, As the line-height you have is used to Center the text in the center of the row.

Also you say -
  "make two buttons from the left and right panel show to say. I have also included screen shot of the end effect as desired"

And I see very many things as HTML elements in that Image, and as I said, each element in that row will effect how the row needs to be laid out, and you say that this needs a 40% and 60% division, which could be the case? But there are other things inside each section, that likely need to change position if the width changes?

Sorry, But for me to try and get the HTML and CSS needed from just an image would take me too much time and effort, and I can not tell if that is responsive or not and the factors that are needed if the width changes?
0
Slick812Commented:
This question has been inactive for more than 14 days and Must be closed.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.