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.
Related
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>
So I'm hosting a website from github, and I want to add a blog section to it, therefore, I chose Jekyll.
And the problem is on my main page I add a Blog section to link it to the Jekyll autogenerated html site, and it doesnt show any of the css, just only shows pure html
How does I fix this problem?? Thanks
Picture
<header>
<div class="container">
<nav>
<ul>
<li> Home</li>
<li> About me</li>
<li> Resume </li>
<li> Projects </li>
<li> Hobbies</li>
<li> Blog</li>
</ul>
</nav>
</div>
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 have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation.
Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:
<div id="topWrap">
<div id="topNavWrap">
<nav id="utilityLinks">
<ul>
<li>Home</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav">
<ul>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
</ul>
</nav>
</div>
</div>
My question is:
In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?
When using Aria, should I use role="main" on my main navigation or my main header element?
Yes, it makes sense to use header for both of these.
As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.
The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.
If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.
A more suitable HTML setup would be:
<header id="topWrap" role="banner">
<div id="topNavWrap">
<nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2">
<h2 class="at" id="utilityLinksH2">Site menu</h2>
<ul>
<li>Home</li>
...
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
...
</ul>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav" aria-describedby="mainNavH2">
<h2 class="at" id="mainNavH2">Service menu</h2>
<ul>
<li>Main Service Page</li>
...
</ul>
</nav>
</div>
</div>
</header>
Notable points are:
wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.
Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.
I have a problem with Foundation 4 rendering on a small screen.
When on a local server i have the following html code, my custom css is turned of and so is my cutom js. All the needed libraries are loaded correctly as is the foundation library:
Why isnt my topbar showing in a very small browser window?
Below is a html snippet:
<div class="row show-for-touch show-for-portrait show-for-small">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><h4>Dungeon</h4></li>
<li><h4>Pricing information</h4></li>
<li><h4>Contact</h4></li>
</ul>
</section>
</nav>
</div>
You won't be able to see your bar in a small browser if you add this visibility class: show-for-touch, which displays only on a real mobile environment.
If you like to see on a small browser, simply remove this class:
<div class="row show-for-portrait show-for-small">
It works on this plunk.