I've started html basics and I'm trying to do simple nav menu with 3 sites like this (index on the bottom is main page and these in "podstrona" folders are subpages):
My code looks just like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
<meta charset="UTF-8">
<title>Podstrony</title>
</head>
<body>
<ul id="menu_lista">
<li>Strona Główna</li>
<li>Podstrona nr 1</li>
<li>Podstrona nr 2</li>
</ul>
</body>
</html>
I tried different paths as you can see but no one can bring me to any subpage. What should I type to get to them? I searched in web but I didn't find anything helpful with this.
You're in podstrony, remove the first slash of the 1st link, and the /podstrony/ from the 2d.
When you leave the slash, it means your page will search at the root directory of your server. Without it, the path is relative to the current file path.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
<meta charset="UTF-8">
<title>Podstrony</title>
</head>
<body>
<ul id="menu_lista">
<li>Strona Główna</li>
<li>Podstrona nr 1</li>
<li>Podstrona nr 2</li>
</ul>
</body>
</html>
Related
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
This is the HTML:
<!DOCTYPE html>
<head>
<title> navigation practice</title>
<link rel="stylesheets" type="text/css" href="style.css"/>
</head>
<body>
<ul>
<li> HOME</li>
<li> ABOUT
<ul>
<li><a>camp sites</a></li>
<li><a>our team</a></li>
<li><a>wildlife</a></li>
<li><a>resources</a></li>
</ul>
</li>
<li> CONTACT
<ul>
<li><a>email</a></li>
<li><a>phone</a></li>
</ul>
</li>
<li>things to do
<ul>
<li><a>shops</a></li>
<li><a>activities</a></li>
<li><a>trails</a></li>
</ul>
</li>
<li> MORE</li>
</ul>
</body>
</html>
The CSS just has:
body {
background: blue
}
both the HTML and CSS are in the same file. I’ve checked spelling on the link, syntax and any errors in the CSS. I’ve also tried opening the file in a different browser. I have this problem every time I start a new project. I’m using Notepad++.
The problem is on your stylesheet tag, you added a unnecessary "S" at the end of the word, it is supposed to be:
<link rel="stylesheet" type="text/css" href="style.css"/>
not stylesheets.
And you forgot to open the html tag after the <!doctype html> declaration, and the charset declaration. Here is how it is supposed to be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> navigation practice</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!--YOUR CODE HERE-->
</body>
</html>
Try validating your code here: https://www.freeformatter.com/html-validator.html. It will show what's wrong on it.
i have main.html page where i have 3 href link.
and i have my data in excel file with 3 columns.
what i want to do is when i click on the link in main.html it should fetch data in excel file by using python and display it in html page on browser.
this is what i have written now:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="HOME.css" />
<meta charset="UTF-8">
<title>Racdm GUI</title>
</head>
<body>
<div id="navigation_bar">
<ul>
<li><a class="active" href="HOME.html">iDRAC</a></li>
<li>System</li>
<li>Life Cycle Controller</li>
<li>BIOS</li>
<li>NIC</li>
<li>STORAGE</li>
<li>FC</li>
</ul>
</div>
</body>
</html>
I put the link into all of my html pages and my css only shows up on my first page but none of the others.
<head>
<title>Angels Drawings</title>
<link rel="stylesheet" href="style.css">
<STYLE>
<!--
A{text-decoration:none}
-->
</STYLE>
</head>
<body>
<h1>Angel</h1>
<ul>
<li>Home</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<h2>This is her website</h2>
<p>And this is all the info</p>
</body>
The other pages (Page2.html and Page3.html) are inside the "Pages" directory. You cannot use the same url for the css because it is a relative path. That means it will try to find the css into the "Pages" directory, and it will fail because it doesn't exist.
Answer updated after discussing the real use case with the OP.
In the Angelswebsite.html use the following:
<link rel="stylesheet" href="style.css">
In all pages inside the Pages subdirectory use the following:
<link rel="stylesheet" href="../style.css">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
i am trying to create a simple webpage for our team.
So far, I have created 3 links in the home page(referred as: Page1), clicking on each link in Page1 will take me to a new pages(Page2, Page3 and Page4 ). Page2, Page3 and Page4 will contain the daily team status reports which will changes daily but their file names will remain the same. Ill manually delete the old ones and put the new ones daily. Only Page1 will remain constant which is basically for navigating to the above 3 pages alone.
Now, in each of Page2, Page3 and Page4, Im trying to display the 3 links(links to Page2, 3 and 4) at the top of the page.
Can this be done without making any changes to Page2, Page3 and Page 4(as this would mean I have to make changes daily)? Can this be done by adding some piece of code to Page1 alone
If you really want to have the HTML for your links in just one place, I would recommend to dig in a server-side programming language.
Let´s say you have four different (static, no server-side programming) HTML files, like page1.html for your home page, page2.html, page3.html and page4.html.
So, because the file names remain constant you could place the same HTML markup for your links in all four HTML files. Now you should use CSS to style the links the way you like. This CSS goes into another file, `styles.css' , for example.
Example HTML for page1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page 1</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this is the reference to your css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page 1</h1>
<ul class="navigation">
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</body>
</html>
Example HTML for page2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page 2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- this is the reference to your css -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page 2</h1>
<ul class="navigation">
<li>Page 1</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
<!--
here comes the content you will change daily
-->
</body>
</html>
Example CSS for styles.css
.navigation {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.navigation > li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
}
By the way, index.html would be a better name for your home page, so you can reach the file with a URL like http://www.yourDomain.com and don´t have to place the file name in the URL like http://www.yourDomain.com/page1.html.
Now you have the same HTML markup for your links in your four HTML files. That means any time you have to change the HTML of your links, you have to do the same changes in all HTML files. But you have the code which is responsible for the layout in just one place.
Because you just want to change the content of the three pages daily, this approach seems reasonable to me.