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
Related
This question already has answers here:
What are the allowed tags inside a <li>?
(4 answers)
Allowed child elements of ul
(3 answers)
Closed 3 years ago.
This is probably child's play to anyone who actually knows what they're doing (but I'm completely self-taught so I need a little help).
The site: http://www.sandhtestsite.kaylynnehatch.com
The W3 HTML Validator keeps returning this error:
"Element li not allowed as child of element nav in this context."
This is my nav code:
<nav id="mainav" class="clear">
<li class="active">
<li>About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</li>
Problem is, I'm not sure how else to set this up. If I remove the li tags (and related CSS), how do I get them to display properly AND still work responsively with mobile?
A list item (li) should be a child of either an ordered list (ol) or unordered list (ul). Either can be a child of nav.
In your code, you have a closing ul misplaced - that would be an issue for validation.
So, try using an unordered list around your list items.
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
This happens because <li> elements should be children of <ul> or <ol>elements. In your case, you have improper formatting, thus making it seem you are missing the <ul>
write it like this instead:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
Source: http://www.w3schools.com/tags/tag_li.asp
I would wrap your Lis in a ol or ul tag.
HTML:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
You're opening one tag type of item and then closing a different item. Open and close tags need to be a 1:1 relationship. It should look more like this:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
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>
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.
The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.
On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:
<!-- Header and Nav -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="http://www.mac-media.co.uk">
mac media
</a>
</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Top Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
<ul class="dropdown">
<li><label>Pages</label></li>
<li>Home</li>
<li>Contact Us</li>
<li class="divider"></li>
<li><label>Our Services</label></li>
<li>Web Design</li>
<li>Photo</li>
<li>Video</li>
<li>Hosting</li>
<li>Emails</li>
<li>Domain Names</li>
<li class="divider"></li>
<li><label>Existing Clients</label></li>
<li>Control Panel</li>
<li>Webmail Login</li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
</section>
</nav>
Can anyone help please!?
In ZURB Foundation 3, this line:
<li class="toggle-topbar"></li>
should be changed to:
<li class="toggle-topbar"></li>
This is just a placeholder for jQuery
Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.