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>
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>
I am creating a small site for my department. My first page is called the "Home" page and it is located inside a file called index.html. In my body tag I have a header tag where I welcome the users to the site and a paragraph tag saying what this particuylar site is for. This is the HTML code I have from the title tage to the last nav menu I have:
<title>Welcome | Finance Department</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Finance and Accounting Portal</span></h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Welcome to the Finance Department Homepage</h1>
<p>This is an inter-organizational site where employees can find popular documents pertaining to financials.</p>
</div>
<img src="./img/hello.jpg">
</section>
<nav>
<ul>
<li class="current"><a href="index.html">Home</li>
<li><a href="accountspayable.html">Accounts Payable</li>
<li><a href="purchasing.html">Purchasing</li>
<li><a href="payroll.html">Payroll</li>
<li><a href="documents.html">Documents</li>
<li><a href="faqs.html">FAQs</li>
</ul>
</nav>
With this as it is now, the welcome to.. header and the This is an inter-organizational... paragraph tags are clickable and when I click them, it takes me to the FAQ page. I just want the header and the paragraph to be plain text, not clickable links.
When I inspect the header and paragraph tags that are causing issues in my browser, I have an additional <a href="faqs.html"> before my section id="showcase">. When I delete that additional tag, the header & paragraph tags are no longer clickable. But, my html does not have that additional <a href... tag so I'm confused as to where it came from. Does anyone know if how I can correct this for good?
You have not closed Hyperlinks tag in you code.
<li class="current">Home</li>
<li>Accounts Payable</li>
<li>Purchasing</li>
<li>Payroll</li>
<li>Documents</li>
<li>FAQs</li>
Check your code properly.
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
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