<nav class="Navbar">
<ul>
<li>
<a href=“index.html”>Home</a></li>
<li>
<a href=“contact.html”>About</a></li>
<li>
<a href=“Services.html”>Services</a></li>
<li>
<a href=“Contact.html”>Contact</a></li>
This is the error i get
Cannot GET /%E2%80%9CContact.html%E2%80%9D
The contact form you saved as "contact.html", check that the page can load independently and please check if it is saved in same folder as your document. You might want to get its src/ folder.
close your </ul> and </nav>
check your link and learn about relative and absolute links. a url will solve that problem if it is remote. if its local, make sure its not in a different directory.
check this page out
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
i bet one of those 2 things helps. keep us posted
Related
I have an index.html that includes:
<li>
<a href="imprint.html#imprint-link">
<div class="main-menu-title">IMPRINT</div>
</a>
</li>
When I click on this item another html file (imprint.html) is loaded, but when I click on Home, which includes the following code to go back to index.html, it doesn't work!
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
What is wrong here?
Update 1: When hovering the mouse over the link I get:
try using this code :
<a href="index.html">
<div class="main-menu-title">HOME</div>
</a>
inplace of :
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
To answer your original question.
What's wrong here?
As a couple kind folks already commented and one person already provided a nice solution, clicking on your original link
href="#index-link"
while you are on the imprint.html page will not take you to your index.html page. Why? Because
<a href="#index-link">
<div class="main-menu-title">HOME</div>
</a>
is saying, "Take me to an element on the current page (imprint.html) that has an ID of 'index-link'. If there is no element with and ID set to index-link, on the imprint.html page, nothing will happen. And, you will stay on the current page because you didn't specify an URL outside of the current page, which is still imprint.html.
So, with that current setup, you will not get to see index.html.
So, I'll try to keep this short. I am making a navigation and I want my logo to act as the homepage link. Like this:
However, I'm having trouble with it. Any help would be appreciated!
Code at codepen:
`http://codepen.io/aaronmtx/pen/NRYqOm`
Is the codepen for an example or is that the site you are talking about that should be working?
To make a logo a homepage link you just put an href around the image and set the path to "/".
Example:
<img src="images/example.jgp" />
In your codepen, the # sign in the links is a standard kind of "change me later with the right path" symbol that just links to the top of the current page. You need to change all of those to be a path. / is your root or home page. Anything after that will navigate to other pages.
So you will end up with / for the home page, /services or /services.html etc. depending on your folder and file names.
<nav>
<ul>
<li class="nav-logo"><img src="http://baseframe.co/a/img/White-B.png"></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
This would make the image a link and upon click it would navigate to the root. Obviously replace your image with the correct logo path.
If that doesn't help, can you clarify by adding your code with file names and folder structure?
Hope this helps!
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs
Is there a way to link to a form using only HTML/CSS? I am still a beginner in web dev and have not yet started on JavaScript or JQuery.
So what I want to do is,
<div>
<ul>
<a href="??" target="_parent">
<li class="toggle1">Guest</li>
</a>
<a href="??">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
...in the tags in the I want to link to a form which has elements like First name, Last name etc, such that when I click on "Guest" the form for the guest should appear and likewise for "Owner"
There is! Make the href tags to #guestform and #ownerform. Then, make each form's id attribute those values (guestform and ownerform). This looks like so:
<div>
<ul>
<a href="#guestform">
<li class="toggle1">Guest</li>
</a>
<a href="#ownerform">
<li class="toggle2">Owner</li>
</a>
</ul>
</div>
<form id="guestform">...</form>
<form id="ownerform">...</form>
Then, in the css, do the following:
form {
display:none;
}
form:target {
display:block;
}
Hope this helped you!
EDIT: As sdcr said, the a tag should be inside the li, and not the other way around for it to be semantically correct. It should be like this instead
<div>
<ul>
<li class="toggle1">
Guest
</li>
<li class="toggle2">
Owner
</li>
</ul>
</div>
I may have misinterpreted your answer based on the lack of information given.
If you don't care who the end user is, and make both forums accessable to them no matter if they're a guest or owner, you'd simply create another HTML document and link to that document (provided that your web server can serves "static" content).
For instance, say you created another file called owner_form.html and somewhere within the body, you had:
<form>
...
</form>
From your index.html you could link to owner_form.html via a <a> tag like this:
... Contents that will redirect you
(old answer)
No, this is not possible in only HTML and CSS. Not even (securely & validly) with JavaScript.
HTML and CSS don't have the ability to differentiate the client using the page on their own. And JavaScript can't securely do this either.
You should look into server-side programming. This is where the magic would happen for you. You can try many different frameworks / scripting languages that have web-server functionality to them, for instance, some of the popular ones are:
Ruby on Rails
PHP
NodeJS
Django
I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"