Member Avatar for Fiorentino01^

Hi I am working on this page as an exercise. Until now I have always been able to nest div elements to obtain a better layout. With html 5 I cannot do it and I have to use a table. Can somebody tell me what is wrong with this code? Thanks a lot.

<html 5>
<head>
<title>Untitled</title>
<meta name="author" content="your name here">
 <meta charset="utf-8">
 <meta name="viewport" content="user-scalable=no, width=device-width">
 <meta name="DESCRIPTION" content="Place description of page here"> 
 <meta name="KEYWORDS" content="Place keywords or phrases here"> 
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="outline">
 <header>
 <h1>Create a Website with HTML5</h1>
 </header>
 <nav>
 <p><a href="index.html">Home</a>
 <p><a href="page2.html">Page 2</a>
 <p><a href="page3.html">Page 3</a>
 <p><a href="page4.html">Page 4</a>
 <p><a href="page5.html">Page 5</a>
 <p><a href="page6.html">Page 6</a>
 </nav>
 <div id="main">

 <div class="left_content"></div>


    </div>


    <footer>
 <address>© Copyright 2012 All Rights Reserved www.yourdomain.com</address>
 </footer>



    </div>


</body>
</html>



    .left_content {
    width: 400px;
    height: 350px;
    position: absolute;
    top: 200px;
    left: 150px;
    border: 1px solid black;
    }
Edited by pritaeas because: Added markdown.
  • 3 Contributors
  • 4 Replies
  • 131 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 4 Replies

Member Avatar for pritaeas

What are you trying to achieve?

Your p tags aren't closed. There's no doctype. Why is the 5 in the html tag?

Member Avatar for JorgeM

With html 5 I cannot do it and I have to use a table.

Why would you indicate that you can not do it with div elements. The recommendation is that table related elements should be used for displaying tabular data. however, we all know that its easy to use a table as a presentation tool.

As pritaeas mentioned, you have some issues with your markup. I always recommend you use a validation service, such as this online one to help find issues with markup.

http://validator.w3.org/

Member Avatar for Fiorentino01^

Hi I am sorry I did some mistake in copying the code. The Doc type declaration is supposed to be DOCTYPE HTML.You are also right about the p closing tags, however this was not my doing I just copied the code from a tutorial. I don't want to use tables that's why I am asking for help. I am still studying and when I run into a tutorial I check it because I figure there is always something to learn. This tutorial is about creating a liquid web site with html 5 and css, In this tutorial in the main div tag there is an image and some text wrapped around it. I am trying to change it replacing the main content with my own. I thought of creating two areas left and right using a div class tag. In the left area I would have a rollover image, in the right area a search form for hotel reservations. I can insert a table with 2 cells and insert an iamge in the right one and a search form in the other.But if I try to do the same using divs I get the footer above the main content and cannot figure why. I had a look at the html5 syntax but I have not understood yet what the new tags are about like the section one.I appreciate your help.Thank you

Member Avatar for JorgeM

Why dont you go ahead and post your code so we can see what you are working with. If you think it will be easier to post the code online because there will be many changes... I'd recommend you use jsfiddle.net. It allows you to post HTML, CSS and JavaScript very easily and save your code. Then you and others can update it and save new versions. its makes it alot easier to help you. So far this is the 5th post in this thread and as you can see it hasnt been too helpful so far for you or anyone else reading this thread.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.