Link to home
Start Free TrialLog in
Avatar of sunnybrad
sunnybrad

asked on

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
SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
Avatar of sunnybrad
sunnybrad

ASKER

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
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
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?
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
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
This question has been inactive for more than 14 days and Must be closed.