Please help me with my html code. :(

R

Rubella

New Member
Hey.

In class, we have to make a website. The teacher didn't teach us how, though. She just typed stuff in and made us copy her, and she gave vague explanations for some things but we're still mostly left in the dark. I can't contact her because she doesn't check her email.

Here is my home page so far. I'm not up to adding buttons yet.

http://www.gilad91.limewebs.com/


Here is how I want it to look:

Website_wide.jpg


Why is there that gap between the masthead and the content thingy? Also, what's wrong with my header? And how do I vertically center the text in it? We have to make it a liquid layout. Also, I don't want there to be any need to scroll.

Thanks for any help.

EDIT: The text on the page is taken from a random Wikipedia article. No, it will not be used in the final version. -_-
 
Last edited:
smoovo

smoovo

New Member
The Gap
Most of your problems are because of non-reset stylesheet. You have to reset your style that it would be no issues with the browsers. The lightest reset code is to add this ->
HTML: 
body, p, img, h1, {
    margin:0;
    padding:0;
    border:none;
}

This way you won't have any gaps.

Your Header
In you code you have used <p></p> for header, you should use <h1></h1> instead.

Scrolling
Your horizontal scrolling comes from your code to padding right and left for 5%. When you are using padding it gives a gap from your border and out, and you want it to take a gap between your border and inside.

So, you should erase that padding you have all over your CSS code, and use margin instead. Use #content width of 90% and give it margin-left of 5%, that's it. (Don't forget the padding in your wrapper, you don't need it at all)
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Well to start off, you are wanting a "liquid layout" but the menu is not conducive to that, meaning it has fixed design. The content container is also fixed with the width of the menu. Also, even with a liquid layout you can still have scroll bars. All depends on how much content you have in comparison to the available viewing area (monitor size).

That being said...

  • As smoovo stated already, always, always, always use a css reset when creating a new site from scratch. This eliminates any default settings from any browser. Clears the the slate so to speak, and makes you life easier :D
  • Don't use javascript to swap images in a menu, this is a more intensive and inefficient method. Instead use css and psuedo classes like ":hover". If you are unsure what these are, just ask. Many of us here can provide you with examples.
  • Like smoovo also stated, dont use paragraph tags for your headings, leave them for, well, paragraphs :) Use heading tags for headings (h1, h2, h3, etc.) Every page in your site MUST have a one and only one h1 heading. All other headings can be multiple times in a page.
  • Don't use empty paragraph tags to create empty space. It bad practice, bad habit. Instead, this empty space should be generated through either "padding" or "margin". Padding will add space to the interior of an element, and margin visa versa.
  • Personally speaking I am not a fan of using percentages, they are just not exact enough for me.

I can provide you with a basic layout, that you can modify, if you would like.
 
Last edited:
R

Rubella

New Member
smoovo said:
The Gap
*instructions*
Click to expand...

Thank you for replying. I removed the padding and did the margin stuff but those gaps on the left and right are still there. :\ Also, I said I was annoyed about the header before. I actually meant the footer. Sorry. I don't know why I even said header.

PixelPusher said:
*more instrcutions, yo*
Click to expand...

Thanks for replying. I'm about to change the heading and do the other stuff. But don't tempt me with the suggestion of an editable code. :p I'm not sure I'd be allowed, even though it's hard to refuse.
 
You must log in or register to reply here.
Top