I am working on a website and I think it looks pretty good but I have a problem. The menu bar wont go to the place itīs supposed to be.
I have uploaded the page here so you can take a look at it. Please Help.
CSS Codes
New Comer (less than 5 posts)
Menu position
I am working on a website and I think it looks pretty good but I have a problem. The menu bar wont go to the place itīs supposed to be.
I have uploaded the page here so you can take a look at it. Please Help.
Regular Coders
Hey Grim Not really sure what you want to accomplish. Could you give a few more details about what you are trying to achieve?
Regular Coders
Also in the code for your menu, you may want to seperate your hrefs into individual elements instead of including them all as a single <h1> element i.e.This will allow for manipulation of each element in your menu individually.Code:<h1> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="portfolio.html">Portfolio</a> <a href="contact.html">Contact</a> </h1>
Also there is a closing paragraph </p> with no opening one.
New Comer (less than 5 posts)
Sorry for not telling what I want to accomplish. I want the menu to go up a bit to the dark top area.
I have fixed the code a little now but it still looks the same.
Global Moderator
Hi Grim
The first thing is to ensure consistency across browsers, so use a valid DOCTYPE - with the Markup you have, I think this one will suit;
Next thing is with those H1 tags.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>.....etc.
For SEO purposes, only include one set if those in a page (the other H tags can be used in any quantity). That being said, you need to make sure that you're using the most appropriate tag for the job and your menu isn't something that needs to be surrounded by the H1 tags - 1, they're telling Google that the menu is the main heading for the web page (which it isn't) and, 2, heading tags come with their own padding/margin so that's why you're having problems with positioning (you're wanting to put your menu to the top of the page but the default H1 padding is pushing it down)
BTW - default H1 tag margin/padding varies in different browsers (as they do on other html elements) so its common practice to zero them out on critical elements and style things yourself to guarentee more pixel-perfect placement. Lots of folk use a global reset like these: http://www.cssreset.com/ (the universal reset is the shortest, although it does cause more work for the browser to apply them all - the Eric Meyer one is the one I like, but adapted to each project)
So remove the H1 tags around the menu links and style your menu with its own dedicated CSS. I suspect that's why you've used the H1 tags - to make the text bigger? Try this, and alter the font-size however you like;
Code:#menu { padding:0; margin:0; font-size:14pt; font-weight:bold; }
Last edited by Beverleyh; 02-09-2013 at 12:11 PM. Reason: zeroing padding/margin comment + css reset link added
Focus on Function Web Design
Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps
Posting Permissions
Reply With Quote
Bookmarks