I'm building WEB with HTML5 for the first time and I encountered with the little problem.
I have code:
<header></header>
<section>
<header></header>
<article></article>
<footer></footer>
</section>
<footer></footer>
and the problem is, that my Section footer inherits my footer style. i don't know how to remove inheritance from my code. Can you help me?
P.S.: my section footer inherits footer style, not footer. There is a photo: link to photo
Andrew is right just add a class to footer or make style: 'section > footer{}' or 'body > footer{}'
You could add an ID or CLASS to your section footer or style the section footer like:
section > footer { }
However that may not work in all browsers and is somewhat sloppy. I would just add an ID or CLASS.
Related
My question is almost exactly like this one : CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page The main difference being that I could not get any of these answers to work in my case
What I am trying to achieve :
if the page does not posses enough content for a scroll, the footer is displayed at the bottom of the page
if the page posses enough content to scroll, the footer is displayed at the bottom of the content ( does not stick to the bottom of the screen )
The main issue here is that I have a lot of extra div in the hierarchy and I struggle to understand how to apply the given solution on them.
The best I could achieve was either to get the div at the bottom of the content regardless of it's length or to overlap the header.
My code looks like this :
( index.html ):
<html>
<head>
<!-- ... -->
</head>
<body>
<app-root></app-root>
</body>
</html>
( app.component.html )
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
( footer.html )
<div id="footer">
<p>footer works!</p>
</div>
Move your footer component out of body-container and apply the following style:
index.html
<body>
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</body>
Your css file
html, body {
height: 100%;
margin: 0;
}
#body-container {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
#footer {
height: 50px;
}
Tips: It's a good practice use the footer tag to footer of the page, header tag to header the page. Like this:
<header>The header page </header>
<main>Your content</main>
<footer>The footer page </footer>
I received designs for one project and client wants footer placed in sidebar which is main navigation. Is it correct to have structure like this? I mean from design part it looks good, but from code it looks weird.
<nav class="Navbar">
<div class="Navbar-content">
<!-- some stuff -->
</div>
<footer class="Footer">
<!-- footers content -->
</footer>
</nav
In w3 there is no exact rule which would forbid nesting footer in navbar.
https://www.w3.org/html/wiki/Elements/footer
Also the w3 validator doesn't recognize it as any kind of error, so I guess it's okay?
You can have a footer element in a nav element. But it would represent the footer for that navigation, not the footer for the whole page.
For a footer that applies to the whole page, you have to place the footer element so that its nearest section parent is the body element. This means it can’t be a descendant of section/article/nav/aside nor of a sectioning root element other than body (blockquote, figure etc.). See an example.
If you want to show the navigation and the footer in a sidebar, you can use a div element for the sidebar:
<body>
<h1>…</h1>
<div class="sidebar">
<nav><!-- site-wide navigation --></nav>
<footer><!-- site-wide footer --></footer>
</div>
</body>
When you are reading blog post, on almost all blogs, there is a "sidebar" with similar articles, latest comments, etc. In the layout I'm going to implement, I've got a huge article header (with photo, and trailer) with the 100% width. After that, I've got article body, with described sidebar, and after that, I've got (once again 100% width) author information, and comments.
In that case, I cannot escape with the "sidebar" out of the main article tag. Minimal example:
<article>
<!-- ARTICLE HEADER -->
<header style="width: 100vw; height: 100vh">
<h1>title</h1>
<p>trailer</p>
<time>...</time>
</header>
<!-- ARTICLE BODY -->
<h2>...</h2><p>...</p><ul>...</ul> x few
<!-- SIDEBAR - PROBLEM -->
<div id="sidebar">
<h2>Similar articles</h2><ul>...</ul>
<h2>Latest comments</h2><ul>...</ul>
</div>
<!-- ARTICLE FOOTER -->
<footer id="author" style="width: 100vw; height: 100vh">
<h1>Details</h1>
<section>
<h1>Author</h1>
<address>...</address>
</section>
<section>
<h1>Comments</h1>
<ul>...</ul>
</section>
</footer>
</article>
The problem is with div#sidebar and what kind of element it sohuld be in.
This of course is not the part of article (so it cannot be div)
This is probably not aside (aside inside of article is highly related to article, but can be ommited while reading, and this sidebar is auto generated and not related to article at all)
This is probably a section, but of course should not be inside of article tag
There is no chance, to make this element out of article, and make is simple section, because the positioning (absolute, or flex) will be to difficult to manage, because of the full screen footer and header.
Any help?
I've got a solution using jquery, I can cut the element out of the "flow", and paste it somewhere else, but maybe there is a semantic solution using HTML5 only?
Why not put the article body in <article> and give it like a 75% width and the related links in an <aside> with a 25% width and float them both? The <aside> tag is used for content that is somewhat related, but separate from the content itself. Related links are def. a fit for <aside>.
codepen
W3C information on <aside>
I have gone through a discussion regarding header and footer. As HTML5 provides header, footer, content elements, I believe it should be used once per page. I state them in following snippet.
<!-- My understanding -->
<header>
<!-- code goes here -->
</header>
<content>
<!-- code goes here -->
<!-- code goes here -->
</content>
<footer>
<!-- code goes here -->
</footer>
Few people have header, footer elements approach like below.
<!-- People understanding -->
<header>
<!-- code goes here -->
</header>
<content>
<!-- code goes here -->
<!-- code goes here -->
</content>
<footer>
<header>
<!-- They also use <header> in footer. -->
</header>
<!-- code goes here -->
</footer>
Can header be used in footer element? In other words, What would you suggest to build a HTML structure?
No this isn't valid.
The header element represents a header for the content, however the header element must not be a descendant of the footer element.
The footer section of the HTML5 specification states that the footer element is:
Flow content, but with no header, footer, or main element descendants.
If you paste the below code into W3's HTML Validator you'll get the following error:
Line 8, Column 20: The element header must not appear as a descendant of the footer element.
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
<footer>
<header>
</header>
</footer>
</body>
</html>
Ignoring the invalid content element, your first example is valid and you should stick with that instead.
I suggest that you should stick to your first line idea:
// My understanding
<header>
//code goes here
</header>
<content>
//code goes here
//code goes here
</content>
<footer>
//code goes here
</footer>
For me, it is more easy way to understand how to make a HTML file on this format.
The second example would technically work fine, as all of the <header>, <content> and <footer> functionally work similarly to <div>s, but semantically it'd be very bad practice. I'd go with your initial thoughts, which would certainly be the spirit in which those elements are intended.
According to MDN:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
so I don't suggest you to use footer tag inside header tag.
I got something like that:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
<footer>
//My footer content
</footer>
</div>
Is it semantically correct to move my footer tag outside the div id="page" so to have:
<div>
<header>
//My content
</header>
<nav>
//My nav
</nav>
</div>
<footer>
//My footer content
</footer>
I think yes, but not 100% sure. I accept advices.
Thanks
It really depends on how you interpret the definition of the footer tag:
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Personally, I'd use the first example. The contents of the <div> act as one section of your document.