How to structure layout of an HTML page? - html

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.

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");

Notepad ++ basic programming EVERYTHING BOLD

Ok, please don't hate me for my idiocy. I'm literally beginning programming html RIGHT NOW. so, first problem.
I am following a simple guide to learn the basic html formats and this is all I have:
<html>
<head>
<title>www.fuyah.com</title>
</head>
<body>
<div id= "Header" class = "shared_elements">
<!--#divs don't really do anything, just for organization and targeting with css-->
<h1>The Adventure Begins<h1>
<span> this is my page. </span>
This is the beginning down my road of web development. It begins with one step...
</div>
</body>
</html>
For some reason when I look online at my page, everything is bold. I'm not sure why.
You haven't closed your <h1> tag and also <span "> there's unnecessarily " in there
<html> <head> <title>www.fuyah.com</title> </head>
<body>
<div id= "Header" class = "shared_elements">
<!--#divs don't really do anything, just for organization and targeting with css-->
<h1>The Adventure Begins</h1>
<span > this is my page. </span>
This is the beginning down my road of web development. It begins with one step...
</div>
</body>
</html>
Open your file in notepad and verify the contents before uploading the file.
If your see the file contents differently, do a "view source" in the the browser to see the contents.

header fixed and anchor links

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>

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

Html Hierarchy: Whats acceptable when extending the <head>?

When creating an html document my code works either way, but how do others like to organize their html hierarchy? for example I like to put my site's banner and the navigation bar in <head>.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type='text/javascript' src='script.js'></script>
<title> User's Profile'</title>
<div id="header">
<img src="http://svc004.bookeasy.com/images/MARGS/flourish-website-banner3.jpg" />
</div>
<div id="toolbar">
<span>Username</span>
<p>Profile</p>
<p>Medals</p>
<p>Account Settings</p>
<p>logout</p>
</div>
</head>
<body>
<div id="left_nav">
<p>Home</p>
<p>Scout</p>
<p>Attack</p>
<p>Fourms</p>
<p>Contact</p>
</div>
</body>
</html>
You shouldn't put anything in your head that you want to display as en element, because it's not the correct element for it.
It may work but you never know when it may not (or have subtle bugs). It will also confuse anyone who has to maintain this markup after you.
The spec says that the <head> element has to contain:
One or more elements of metadata content, of which exactly one is a title element.
Further down:
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
You can only put these tags in there:
<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>
The way you're doing it isn't good. Put the header in a <header> element in the <body>.