header fixed and anchor links - html

I'm using a fixed header for my website and I have a problem: when I use anchor link, the first content go under the header.
When I'm on the page, I can use a script like this:
$('.action').click(function(event){
event.preventDefault();
$('html, body').animate({scrollTop:$('#projects').position().top - 60},800);
});
But when I'm on another page, using href="index.html#projects" the problem come out.
There is a solution which allow to use not methods with margin?
Thank you!

This may not be the best solution for you, but I'll tell you what I would do. Normally when I work with fixed head element, I create a fixed body or content element too.
<html>
<head>
</head>
<body>
<div id="header" style="position:fixed;top:0px;left:0px;right:0px;height:50px;">
<!-- header html here -->
</div>
<div id="content" style="position:fixed;top:50px;left:0px;right:0px;bottom:0px;">
<!-- content html here -->
</div>
</body>
</html>

Related

html/css - html website with multiple pages - have one menu that can be called?

MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");

Have Edits on Sidebar Show on All Pages

Would it be possible for me to make edits on a particular item that is on all page on my website and have it be edited on all pages.
For example, if I had a sidebar on all pages of my website, and I wanted to change the announcements box within that sidebar to a new announcement, could I do so without having to make the changes on all pages? How would I be able to if so?
What you're looking for is an iframe, you'll find tons of tutorials about that, but here's a quick example:
In your page e.g. index.html:
<html>
<head>
</head>
<body>
<div id="sidebar">
<iframe width="100" height="500" src="sidebar.html"></iframe>
</div>
<div>
Your main page content
</div>
</body>
</html>
In your sidebar.html:
<html>
<head>
</head>
<body>
<div>
Sidebar content goes here...
</div>
</body>
</html>
Now anything you update on the sidebar.html will be updated on index.html.
Add this iframe to every page that you want to contain this sidebar.
Hope this helps...

JQuery Mobile, mutlipage HTML5 and a common menu

I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div

How to structure layout of an HTML page?

I was wondering if anyone had any suggestions as how to structure a website. I have a logo at the top, I wanted a navigation bar below that, and finally below that I wanted to have the page's contents. I messed around with it for hours, but I can't seem to get the navigation bar to go below the logo and above the main content. Does anyone have any ideas? Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<style>
#Slideshow1 img { width:1200px; height:500px }
</style>
<title> Law Firm </title> <!-- Seriously, don't forget to change that.-->
<div class="heading">
<div id="head">
<div id="logo">
<img src="logo.png" alt="Logo" width="1700" height="175">
</div>
<div id="navigation">
Home
About us
Areas of Practice
Reviews
I'm running out of ideas
Boring....
</div>
</div>
</div>
<!-- Include content types, links to external resources, keywords for the search engine, epirations and stuff, and whatever else needs to go here like titles and website icons. -->
</head>
<body> <!-- Obviously, the body starts here. -->
<div class="main">
<div id="content"> <!-- Let's kick it off with some stuff, of course. -->
<!-- Now let's get some java up in here!! -->
<script>
var imgArray = new Array();
imgArray[0] = "images/pic1.png";
imgArray[1] = "images/pic2.png";
slideshowFade('Slideshow1','',imgArray,20,5000);
</script>
</div>
</div>
</body>
</html>
It might help if you made a JSFiddle of what was going on, but I think I can answer this.
1) You're putting stuff in the head tag. I think you misunderstand what it means. It's not the "heading" of the page, it is ment for information that won't show up on the page itself (like what the page is called, what type of page it is). EVERYTHING (Meaning every div) goes in the body tag! The body doesn't mean the body of the website, it means what shows up on the page!
2) I can only guess because you haven't attached the style sheet, but I'm guessing you don't have clear: both on navigation, heading, and logo styles.
3) To the same elements I mentioned in #2, you may also want to add display: block just in case that isn't already set.
4) If 2 and 3 don't work, try defining heights for all of the elements as well (Sometimes this works for me, depending on what is causing the problem)
1 doesn't fix your problems, but it's right. 2 should fix your problem, but you really need to put main.css into your question because I can't know for sure. Also, look into using a ul tag for menue. It's worth doing.
Here is a JSFiddle example: http://jsfiddle.net/5JqUt/
You cannot have structural elements (like your <div>s) in a <head> element. All structural elements belong in the <body>.
You are writing your HTMLK code in the head trag so it's not visible. You should
write everything in between <body></body> tags of your page. Just bring your <div class="heading"> out of the head tags and put it inside body tag.
Here is an answer about HTML, if you look at the fiddle examle then you can understand it a bit. Remember that, every visible elements in a web page is the contents of the body tag, which means that, whatever you see in a web page, belongs to <body>your page content goes here</body>.
Here's a little messy code (functional, though) that I make for you:
<body bgcolor="#f5f5f5">
<link href='http://fonts.googleapis.com/css?family=Lato:100|Lato:300' rel='stylesheet' type='text/css'>
<div style="position:absolute;top:0px;left:0px;width:100%;">
<center>
<div style="color:#c3c3c3;font-size:75px;font-family:Lato;padding-top:25px;font-weight:100;">designing rocks</div>
<div style="text-align:left;width:465px;font-size:20px;font-family:Lato;font-weight:300;padding-top:10px;"><span style="color:#00bbbb;">home</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span> <span style="color:#c3c3c3;">blah</span>
</center>
<div style="position:absolute;top:165px;left:0px;width:100%;">
<center>
<div style="text-align:left;width:600px;background-color:white;font-family:Lato;font-weight:300;padding:25px;color:gray;">I LOVE content!</div>
</div>
</div>
You can always do embellishments, like a hover effect for the navigation links...
Tell me if it's functional. :)
You could always scrape a little of the ideas for your project.
Oh, and the other answers are correct, the reason why your layout doesn't work could be due to the fact that the page content is in the head. The head is for the title of the page, (title), and scripts you want to load before any other go in the head. The body is the part of the page that's visible to the user.

In HTML5, can the <header> and <footer> tags appear outside of the <body> tag?

I'm currently using the above tags in this way (classic tag order):
<html>
<head>...</head>
<body>
<header>...</header>
<section>...</section>
<footer>...</footer>
</body>
</html>
Tag usage and specifications were very rigid in previous versions of HTML (4.x), while HTML5 doesn't really need <head> and even <body> tags.
So I would use the following structure, which IMHO is much more semantic than the previous one.
<html>
<header>...</header> <!-- put header and footer outside the body tag -->
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
What do you think?
Well, the <head> tag has nothing to do with the <header> tag. In the head comes all the metadata and stuff, while the header is just a layout component.
And layout comes into body. So I disagree with you.
Let's get a canonical answer here. I will reference the HTML5 spec.
First of all, 12.1.2.4 Optional tags:
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
Then, the 4.1.1 The html element:
Content model: A head element followed by a body element.
Having the cited restrictions and strictly defined element order, we can easily work out what are the rules for placing implicit <body> tag.
Since <head/> must come first, and it can contain elements only (and not direct text), all elements suitable for <head/> will become the part of implicit <head/>, up to the first stray text or <body/>-specific element. At that moment, all remaining elements and text nodes will be placed in <body/>.
Now let's consider your second snippet:
<html>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</html>
Here, the <header/> element is not suitable for <head/> (it's flow content), the <body> tag will be placed immediately before it. In other words, the document will be understood by browser as following:
<html>
<head/>
<body>
<header>...</header>
<body>
<section>...</section>
<section>...</section>
<section>...</section>
</body>
<footer>...</footer>
</body>
</html>
And that's certainly not what you were expecting. And as a note, it is invalid as well; see 4.4.1 The body element:
Contexts in which this element can be used: As the second element in an html element.
[...]
In conforming documents, there is only one body element.
Thus, the <header/> or <footer/> will be correctly used in this context. Well, they will be practically equivalent to the first snippet. But this will cause an additional <body/> element in middle of a <body/> which is invalid.
As a side note, you're probably confusing <body/> here with the main part of the content which has no specific element. You could look up that page for other solutions on getting what you want.
Quoting 4.4.1 The body element once again:
The body element represents the main content of the document.
which means all the content. And both header and footer are part of this content.
I see what you are trying to do, you are trying to use the <body> tag as the container for the main content of the page. Instead, use the <main> tag, as specified in the HTML5 spec. I use this layout:
<!DOCTYPE html>
<html>
<head> *Metadata* </head>
<body>
<header>
*<h1> and other important stuff </h1>*
<nav> *Usually a formatted <Ul>* </nav>
</header>
<main> *All my content* </main>
<footer> *Copyright, links, social media etc* </footer>
</body>
</html>
I'm not 100% sure but I think that anything outside the <body> tag is considered metadata and will not be rendered by the browser. I don't think that the DOM can access it either.
To conclude, use the <main> tag for your content and keep formatting your HTML the correct way as you have in your first code snippet. You used the <section> tag but I think that comes with some weird formatting issues when you try to apply CSS.
If you really want it to look more semantic like having the <body> in the middle you can use the <main> element. With all the recent advances the <body>element is not as semantic as it once was but you just have to think of it as a wrapper in which the view port sees.
<html>
<head>
</head>
<body>
<header>
</header>
<main>
<section></section>
<article></article>
</main>
<footer>
</footer>
<body>
</html>
According to the HTML standard, the content model of the HTML element is:
A head element followed by a body
element.
You can either define the BODY element in the source code:
<html>
<body>
... web-page ...
</body>
</html>
or you can omit the BODY element:
<html>
... web-page ...
</html>
However, it is invalid to place the BODY element inside the web-page content (in-between other elements or text content), like so:
<html>
... content ...
<body>
... content ...
</body>
... content ...
</html>
I agree with some of the others' answers. The <head> and <header> tags have two unique and very unrelated functions. The <header> tag, if I'm not mistaken, was introduced in HTML5 and was created for increased accessibility, namely for screen readers. It's generally used to indicate the heading of your document and, in order to work appropriately and effectively, should be placed inside the <body> tag. The <head> tag, since it's origin, is used for SEO in that it constructs all of the necessary meta data and such. A valid HTML structure for your page with both tags included would be like something like this:
<!DOCTYPE html/>
<html lang="es">
<head>
<!--crazy meta stuff here-->
</head>
<body>
<header>
<!--Optional nav tag-->
<nav>
</nav>
</header>
<!--Body content-->
</body>
</html>
This is the general structure of an html document.
<html>
<head>
Title, meta-data, scripts, etc go here... Don't confuse with header
</head>
<body>
You body stuff comes here...
<footer>
Your footer stuff goes here...
</footer>
</body>
</html>
Even though the <head> and <body> tags aren't required, the elements are still there - it's just that the browser can work out where the tags would have been from the rest of the document.
The other elements you're using still have to be inside the <body>