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>
Related
I am trying to have an anchor inside a list item to be changing colors when the mouse is hovering over. It is not working properly for PORTFOLIO and CONTACT (when I hover over ABOUT, CONTACT changes color) but it not working at all for HOME and ABOUT (HOME and ABOUT do not change color at all). Why might that be?
Here is my CSS code:
li a:hover{color: #E3872D;}
And here my HTML code:
<div class="leftpart_wrap">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="leftpart_bottom">
<ul id="icons">
<!--Icons go here and their hovering attribute works perfectly-->
</ul>
</div>
</div>
It could be a few things. Your code is correct but probably has some overwriting style in your CSS. Try using more specific CSS to see if it resolves:
.navbar li a:hover{color: #E3872D;}
I am almost done, with the navbar, I just want to add 1 font icon, that will open "my account" page.
i tried this:
the navbar looks good, just font is missing.
<header>
<nav id="navbar">
<div class="container">
<h1 class="logo">censord</h1>
<div class="my_account >
<i class="fas fa-user-cog"></i>
</div>
<ul>
<li>Categories</li>
<li>Post</li>
<li>Search</li>
<li>About</li>
<li>My account</li>
</ul>
</div>
</nav>
</header>
Two points here:
You have a missing quotation mark on this line, messing up the HTML: <div class="my_account >
Make sure that the CSS property font-family: FontAwesome is applied on your <i> element.
Edit: You can also try to manually set the contents of the i element by adding this to your CSS:
i.fa-user-cog {
content: '\f4fe';
}
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.
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 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/