Header display overlaps with adjacent Elements (HTML/CSS)Adding HTML entities using CSS contentConvert HTML + CSS to PDF with PHP?Retrieve the position (X,Y) of an HTML elementHow to display HTML in TextView?What characters can be used for up/down triangle (arrow without stem) for display in HTML?CSS selector for first element with classHow can I set the default value for an HTML <select> element?offsetting an html anchor to adjust for fixed headerWhy the content is not covered by the background of an adjacent element when there is an overlap?CSS Why do the divs overlap?
Can a stoichiometric mixture of oxygen and methane exist as a liquid at standard pressure and some (low) temperature?
How does electrical safety system work on ISS?
Why does AES have exactly 10 rounds for a 128-bit key, 12 for 192 bits and 14 for a 256-bit key size?
Delete multiple columns using awk or sed
Why is it that I can sometimes guess the next note?
Did the UK lift the requirement for registering SIM cards?
Why Shazam when there is already Superman?
What is the highest possible scrabble score for placing a single tile
Has any country ever had 2 former presidents in jail simultaneously?
C++ copy constructor called at return
How to convince somebody that he is fit for something else, but not this job?
Mimic lecturing on blackboard, facing audience
awk assign to multiple variables at once
Why do some congregations only make noise at certain occasions of Haman?
When were female captains banned from Starfleet?
Microchip documentation does not label CAN buss pins on micro controller pinout diagram
Showing a sum is positive
Make a Bowl of Alphabet Soup
Is there a way to have vectors outlined in a Vector Plot?
How to preserve electronics (computers, iPads and phones) for hundreds of years
Why can't the Brexit deadlock in the UK parliament be solved with a plurality vote?
Why is the "ls" command showing permissions of files in a FAT32 partition?
What does Apple's new App Store requirement mean
Does "he squandered his car on drink" sound natural?
Header display overlaps with adjacent Elements (HTML/CSS)
Adding HTML entities using CSS contentConvert HTML + CSS to PDF with PHP?Retrieve the position (X,Y) of an HTML elementHow to display HTML in TextView?What characters can be used for up/down triangle (arrow without stem) for display in HTML?CSS selector for first element with classHow can I set the default value for an HTML <select> element?offsetting an html anchor to adjust for fixed headerWhy the content is not covered by the background of an adjacent element when there is an overlap?CSS Why do the divs overlap?
In my website, I have a layout like this:
<header>
Dropdown nav menu consisting of <nav>, <ul> and <li>
</header>
<div>
content
</div>
However, the header overlaps with the div, as if the div content were a background element with a lower z-index. I can fix this by changing the HTML:
<div>
Dropdown menu consisting of <nav>, <ul> and <li>
</div>
<div>
content
</div>
Why does this happen, and is there a way to get blocking behavior w/ the header element? I've toyed w/ the header's position, display, z-index, etc but haven't been able to have any effect.
html css
add a comment |
In my website, I have a layout like this:
<header>
Dropdown nav menu consisting of <nav>, <ul> and <li>
</header>
<div>
content
</div>
However, the header overlaps with the div, as if the div content were a background element with a lower z-index. I can fix this by changing the HTML:
<div>
Dropdown menu consisting of <nav>, <ul> and <li>
</div>
<div>
content
</div>
Why does this happen, and is there a way to get blocking behavior w/ the header element? I've toyed w/ the header's position, display, z-index, etc but haven't been able to have any effect.
html css
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07
add a comment |
In my website, I have a layout like this:
<header>
Dropdown nav menu consisting of <nav>, <ul> and <li>
</header>
<div>
content
</div>
However, the header overlaps with the div, as if the div content were a background element with a lower z-index. I can fix this by changing the HTML:
<div>
Dropdown menu consisting of <nav>, <ul> and <li>
</div>
<div>
content
</div>
Why does this happen, and is there a way to get blocking behavior w/ the header element? I've toyed w/ the header's position, display, z-index, etc but haven't been able to have any effect.
html css
In my website, I have a layout like this:
<header>
Dropdown nav menu consisting of <nav>, <ul> and <li>
</header>
<div>
content
</div>
However, the header overlaps with the div, as if the div content were a background element with a lower z-index. I can fix this by changing the HTML:
<div>
Dropdown menu consisting of <nav>, <ul> and <li>
</div>
<div>
content
</div>
Why does this happen, and is there a way to get blocking behavior w/ the header element? I've toyed w/ the header's position, display, z-index, etc but haven't been able to have any effect.
html css
html css
asked Mar 8 at 0:03
user11073059
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07
add a comment |
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07
add a comment |
1 Answer
1
active
oldest
votes
Per https://www.w3schools.com/tags/tag_header.asp:
Most browsers will display the element with the following default values:
header
display: block;
Try removing/adjusting margin/padding from the <nav>, <ul> and <li> until you discover what is throwing your layout off.
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054777%2fheader-display-overlaps-with-adjacent-elements-html-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Per https://www.w3schools.com/tags/tag_header.asp:
Most browsers will display the element with the following default values:
header
display: block;
Try removing/adjusting margin/padding from the <nav>, <ul> and <li> until you discover what is throwing your layout off.
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
add a comment |
Per https://www.w3schools.com/tags/tag_header.asp:
Most browsers will display the element with the following default values:
header
display: block;
Try removing/adjusting margin/padding from the <nav>, <ul> and <li> until you discover what is throwing your layout off.
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
add a comment |
Per https://www.w3schools.com/tags/tag_header.asp:
Most browsers will display the element with the following default values:
header
display: block;
Try removing/adjusting margin/padding from the <nav>, <ul> and <li> until you discover what is throwing your layout off.
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
Per https://www.w3schools.com/tags/tag_header.asp:
Most browsers will display the element with the following default values:
header
display: block;
Try removing/adjusting margin/padding from the <nav>, <ul> and <li> until you discover what is throwing your layout off.
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
answered Mar 8 at 0:07
WEBjujuWEBjuju
3,02511124
3,02511124
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
add a comment |
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
1
1
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
Found the issue. Had a CSS class named "header" and missed the . in its rule. That'll show me to be more careful w/ my naming. Thanks for the response!
– user11073059
Mar 8 at 0:47
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054777%2fheader-display-overlaps-with-adjacent-elements-html-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
header and div wihout any CSS are exactly the same ... share your CSS to be able to find the issue
– Temani Afif
Mar 8 at 0:07