CODEWITHSUNDEEP
htmlcss
user1751797
user1751797

Reputation: 15

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">
    <a href="#">Home</a>
    <a href="#">About us</a>
    <a href="#">Areas of Practice</a>
    <a href="#">Reviews</a>
    <a href="#">I'm running out of ideas</a>
    <a href="#">Boring....</a>
</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>

Upvotes: 0

Views: 722

Answers (4)

user752723
user752723

Reputation:

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c3c3c3;">blah</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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.

Upvotes: 0

sinθ
sinθ

Reputation: 11493

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/

Upvotes: 2

The Alpha
The Alpha

Reputation: 146191

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>.

Upvotes: 1

Major Productions
Major Productions

Reputation: 6042

You cannot have structural elements (like your <div>s) in a <head> element. All structural elements belong in the <body>.

Upvotes: 1

Related Questions