I'm starting a website and I'm coding using a MacBook Pro. The saving of the files has been something new to me but basically I opened TextEdit and when Saving the files I put them with the file extension .html instead of the file extension .txt. I have five files labelled homepage, about, services, portfolio, and contact, in that order, respectively.
Now, my homepage opens up easily. It's really simple, and I'm confused where I'm messing up. The file homepage.html shows a simple header and an unordered list that will serve as a navigation bar once I get onto the CSS part of the website. When I pull up the about page it only shows the header, correctly, and one of the dots of the unordered list followed by ZERO information.
I'm thinking it's how the files we're saved? But that wouldn't make sense because the homepage was saved the exact same way, in the same format, and it pulls up. The code is essentially the same with a different header and title. That's the only differences between the five webpages.
Anyways, the code is:
<!DOCTYPE html>
<html>
<title>Designs by Dante - About Me</title>
<body>
<h2>About Me</h2>
<ul id =“navigation”>
<li><a href="www.designsByDante.com/homepage.html”>Home</a></li>
<li><a href=“www.designsByDante.com/about.html”>About</a></li>
<li><a href=“www.designsByDante.com/services.html”>Services</a></li>
<li><a href=“www.designsByDante.com/portfolio.html”>Portfolio</a></li>
<li><a href=“www.designsByDante.com/contact.html”>Contact</a></li>
</ul>
</body>
</html>
Simple, right?
Could someone please explain what I'm doing wrong?
Thanks in advance.
you should try this
<html>
<title>Designs by Dante - About Me</title>
<body>
<h2>About Me</h2>
<ul id ="navigation">
<li>Home </li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact </li>
</ul>
</body>
</html>
Use double quotes as " not ”.
the reason for that is the / on the URL
www.designsByDante.com*/*contact.html
if the URL was with no / it would work fine.
Check the correct code
If you'd have used some HTML code editor or IDE then you would have easily noticed the wrong syntax highlighting.
You use wrong quotes - use " instead of “ . Perhaps your text editor replaced them automatically.
Use protocol with the links - "http://" or "https://".
Also, as others said, use the double quotes - ".
Hey may this is what it should look like
<title>Designs by Dante - About Me</title>
<body>
<h2>About Me</h2>
<ul id =“navigation”>
<li><a href='www.designsByDante.com/homepage.html'>Home</a></li>
<li><a href='www.designsByDante.com/about.html'>About</a></li>
<li><a href='www.designsByDante.com/services.html'>Services</a></li>
<li><a href='www.designsByDante.com/portfolio.html'>Portfolio</a></li>
<li><a href='www.designsByDante.com/contact.html'>Contact</a></li>
</ul>
</body>
</html>
Related
The local referencing does not work for some reason and I have tried countless things. I am using atom.io IDE, can anybody give a proper solution to this please?
<h1>
CAS DESIGN TECH CLASS </h1>
</body>
</html>
<div id="main_container">
<p class= "main_title">Contents</p>
<ul class= "main_list">
<li><a href= "/Users/Mac/.atom/Makey" >1 Makey Makey</a>
</li>
<li>2 LittleBits
</li>
<li>3 Lego Mindstorms
</li>
The issue you are facing is due to the reason that you have used absolute path name and it doesn't even contains the complete value in the path like "C:\Users\ganeshkumar\website\about.html"
While working in local system, you can try avoiding absolute pathname and use relative pathname. This will help you to overcome the issue.
You can learn more about the path approach in https://www.w3schools.com/html/html_filepaths.asp
I am trying to link my mobile menu to different sections on the homepage. It is a one page website. The links are not working. What is wrong with my mobile menu code? Thanks!
```
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services </li>
<li>Contact</li>
</ul>
</nav>
```
You need to remove index.html in your href or it will reload the page.
Set id for the element you want to link to:
About
And:
<section id="about-section">...
If everything is on one page, you can omit the page name in the link, i.e. just use
<a href="#targetabout">
instead of
<a href="index.html#targetabout">
Note: If (just in case) the linked element has the ID #about, don't use #targetabout, but just #about, like <a href="#about">
Don't include the "index.html" in the href in your links, or it will reload the page. It should just be <a href="#about">, <a href="#services">, etc. I'm not sure why you prefaced them with "target", that's not necessary. These should all correspond to <a name> tags, in the body of the page. Since this is a one-page website, and that <nav> only appears once, you don't need to keep linking to index.html.
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<a name="about"><h2>About Us</h2></a>
<!-- your page here -->
<a name="services"><h2>Services</h2></a>
<!-- and so on.... -->
<a name="contact"><h2>Contact</h2></a>
These <a> tags, with no href and only a name, do not visually affect their contents in any way. It's just a sort of "bookmark", to specify where on the page to jump to. For instance, you can't click on them, and they don't appear any different than regular text. You could use this, and it would work (and look) exactly the same.
<a name="about"></a> <h2>About Us</h2>
<a name="services"></a> <h2>Services</h2>
This technique also works with jumping up to the top of a page, as well as jumping down.
It is a bit late, but....
If you use jQuery mobile, this is expected behaviour (see mobile documentation). So you have to scroll to the section yourself:
<script language="JavaScript" type="text/javascript">
function getAnchor() {
return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;
}
function scrollTo(hash) {
if (hash){
location.hash = "#" + hash;
}
}
scrollTo(getAnchor());
</script>
I am modifying a site that has a menu with the following code:
<h3>Menu</h3>
<ul class="nav">
<li><a data-scroll href="#home">Home</a></li>
<li><a data-scroll href="#services">Service</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
As a user clicks on those links the user will be taken to the corresponding section on that page.
I need to modify this to allow for links that do not point to the same page.
I tried the obvious:
<h3>Menu</h3>
<ul class="nav">
<li>Google</li>
</ul>
but it won't work.
The status bar shows the correct link but when I click the page won't change.
Is there any special code I need to add (links on other places of the page work fine).
As we discussed, Javascript (specifically jQuery preventDefault) can override the default behavior of an anchor (that is to say, follow it). Therefore, check all Javascript for this situation.
Also, a link MUST have an http:// in front of it, to define the resource type. Links only work on the same page or domain if there isn't one.
It is clear to me that
Google
Will not work because you should write it like so:
Google
Give that a try, if the answer is not this, then you should share with us what else you are doing on your site that we cannot simply imagine by the snippet you have shared with us.
I am looking for a way to have a navigation bar in all my .html pages without having to copy and paste it multiple times.
Here is the code:
<center>
<nav>
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
Every time I make a change in one of the links, I need to make changes in all my HTML files. I was wondering if I could have this chunk of code be a "class" of some sort, and have a reference to it in all my html files with some sort of attribute representing it. So, when I change the list "class" all the html files will be reflected in that change.
You can give you navigation a class this way.
<link src="style.css"/>
<body>
<center>
<nav class="navClass"> //giving the nav element a class
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
</body>
If you do this to all your nav's and use the same css document for all the pages you can call them in css this way. You will need an external css doucment.
//style doucment
<style>
.navClass{background-color:#FF0000}
</style>
You could also try using a jquery template plugin
Check one out here:
https://github.com/codepb/jquery-template
You could make your menu with JavaScript or as suggested by using a server side technology.
But in clean html you'll probably have to use frames which I wouldn't recommend. There might be a solution in html5 but I'm not sure.
If you're used to OOP I'd recommend the server side aproach.
Good luck!
Most text editors have a Find and replace in files or directory function. Other people have mentioned the likely solutions for server-side solutions - Jeremy Keith's book Bulletproof AJAX proved to be useful for me but requires server-side technologies such as PHP or IIS installed.
Otherwise, I used to create templates using dreamweaver which allowed you to update a menu which then updated all the places that menu was included, but there are probably open source solutions that allow the same thing that people may suggest?
I am building a website, www.vitaminjdesign.com
In IE7, you will notice that in the footer, the first line of list items are indented a little bit. Does anyone know what CSS fix I need for this? THanks
try setting list-style-position: outside on your LI elements. Put it in a conditional stylesheet so it's only seen by IE7.
BTW, there are a lot of typos in your copy throughout the site -- you'll want to clean those up if people are to take your pitch seriously.
You could create an IE hack. Create a new stylesheet (e.g. ie-hacks.css) with the following (example class used, use whatever you want):
.ie-hack ul {
margin-left: -5px;
}
You may need to change the value of the margin-left in the style.
And in the footer, update the following code:
<ul id="info" class="ie-hack">
<li class="header">Vitamin J Design</li>
<li>a web & graphic design studio</li>
<li>info#vitaminJ.com</li>
<li>(609) 238-4513</li>
</ul>
<ul id="rfi" class="ie-hack">
<li class="header" class="ie-hack">Ready To Get Started?</li>
<li>Fill out our Request for Proposal form and tell us a little bit about your proejct</li>
<li style="margin-top:4px">How Much Will My Site Cost?</li>
</ul>
<ul id="navigate" class="ie-hack">
<li class="header">Navigate</li>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
And, in the "head" section of your markup, you need to add the following:
<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->
You have different css files for IE7. When I load the page in IE I notice there is a warning triangle down in the status bar. It complains about css_ims not being defined at line 55, char 3. Check the IE-specific files for syntax errors (I mean what MS considers syntax errors).