Ok, so I'm trying to create my first website and I've got all the HTML pages I want to link together, so when I click on "contact" for example, it opens that page, but I can't seem to make it work. I've looked everywhere and tried everything and nothing seems to do the trick.
Here's my code so you can see if i did something wrong:
<header>
<nav>
<ul>
<li>Index</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
I've also tried this:
<header>
<nav>
<ul>
<li>Idex</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
<div id="contact" name="contact">
Hopefully you can help me! Thanks.
The 1st one code is right, but be sure that all files in same directory.
<html>
<body>
<header>
<nav>
<ul>
<li>Index</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
</body>
</html>
Related
When, I click on the home page, nothing is displayed. ie that the button homedoesn't react.
I think my problem is in my HTML code? My syntax is not correct ?
<nav>
<ul>
<li><a class="active"><href="index.html">Home</a></li>
</nav>
You have some syntax errors:
<nav>
<ul>
<li><a class="active" href="index.html">Home</a></li>
</ul>
</nav>
I am creating a navigation bar on my pages and im having trouble moving from one html doc to another. Its weird to word so i drew a picture ( pic )
Both html documents are within the same folder and i have cleared the cache just in case. The problem is i can move from 'mainpage' to 'about' page but not in reverse. Any tips or comments?
Folder of files
Main page
<div class="icon-menu">
<i class="fa fa-bars"></i> Menu
</div>
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</div>
About page
<div class="menu">
<div class="icon-close">
<img src="images/close_icon.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Map</li>
<li>Help</li>
</ul>
</nav>
</div>
It should work fine. Possible errors are that filename of mainpage may have an error or if you are using any framework, it may produce some error.
This code is working fine in plain html without any css or js. So provide more information in case.
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
I've only been coding for 3 months and I'm a total newbie so please take that into consideration when you answer.
I've got a margin/padding disparity between Firefox and Chrome on my li items for my menu. I was able to solve that for a window width above 1040px by getting rid of the margin-bottom on the logo and replacing that with padding. However, at a width of <= 1040px, the issue remains. (In Chrome the li items line up nicely; in Firefox there seems to be a padding issue.)
Here's the site: http://www.noticeeverything.com/home/
Here's the HTML (just for the menus):
<div id="menu">
<ul class="main">
<li><a id="home" href="http://www.noticeeverything.com/home/">HOME</a></li><li>ABOUT</li><li class="media">MEDIA<ul class="sub1"><li>AUDIO</li><li>VIDEO</li><li>PHOTOS</li><li>PRESS</li></li></ul><li class="media-click">☰MEDIA<ul class="media-sub-click"><li>AUDIO</li><li>VIDEO</li><li>PHOTOS</li><li>PRESS</li></ul></li><li>SCHEDULE</li><li>STORE</li><li>NEWS</li><li class="contact last">CONTACT<ul class="sub2"><li class="fan-mail">FAN MAIL</li><li class="booking-mail">BOOKING</li><li class="management-mail">MANAGEMENT</li></ul></li><li class="contact-click">☰CONTACT<ul class="contact-sub-click"><li class="fan-mail">FAN MAIL</li><li class="booking-mail">BOOKING</li><li class="management-mail">MANAGEMENT</li></ul></li></ul>
</div>
<div id="mobile-menu">
<li class="menu-button">☰MENU
<ul class="sub3">
<li><a id="home" href="http://www.noticeeverything.com/home/">HOME</a></li>
<li>ABOUT</li>
<li>AUDIO</li>
<li>VIDEO</li>
<li>PHOTOS</li>
<li>PRESS</li>
<li>SCHEDULE</li>
<li>STORE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</li>
</div>
And here's a link to my CSS (sorry for not posting it but the formatting was weird on here):
http://www.noticeeverything.com/css/responsive.css
I want my navigation menu to have 3 links on the left, the logo in the middle, and 3 more links to the right,
This is the first way I have tried:
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
Is this a good way?
Sorry I've never done this before so I just want to make sure I am doing it a good way
You need to float your menus and center header:
Html
<div id="header">
<ul class="left">
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul class="right">
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</div>
Css
#header h1 { display:block; text-align:center; }
#header .left { float:left; }
#header .right { float:right; }
http://jsfiddle.net/Ub3cP/
That would be just fine. Then you would have to use the CSS float property to get everything in line.
It's OK, but there's a gotcha to watch out for. You describe it as a navigation menu, and so it is, and I'm assuming that the <h1> is a page header. Now, if you were making a HTML5 page, you'd want to mark your navigation menu appropriately with a <nav> element. So you might do this:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
The problem is that this changes the semantics of the <h1> element. It would then be the heading of the nav area, not the heading of the page.
To guard against this, it might be better to have the <h1> element either before or after the navigation menu in the markup, and move it into the display position between the two <ul>s with CSS.
For example: http://jsfiddle.net/mJELq/