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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi:
How are you ? Greetings. Sorry I have started using experts-exchange after some time...if I miss something.
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
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>
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
ASKER
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
Regards
Sunnybrad
Sorry, but I can not understand the code you have in your page as you have this in the CSS -
and you have this in your HTML -
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?
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%;
}
and you have this in your HTML -
<header class="header">
header
</header>
<header1 class="header1">
header1
</header1>
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?
ASKER
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.
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]
Screen-Shot-2017-12-28-at-10.45.40-A.png
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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?
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.
<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
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.