CSS (selector) not working on a WAMP server (W10) - html

I was a lot of time busy, with learning HTML, and i decided to make wamp server. Everything whent OK and i started to code the HTML. But when i started to code te CSS the selector will not show in the webpage on my local domain(rolfweb.net:8080). But in localhost it shows all CSS correctly!
Code:
<DOCTYPE html>
<html>
<head>
<title> RolfWeb </title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="/css/indexss.css"/>
<nav>
<ul>
<li> Home </li>
<li> Video's </li>
<li> Games </li>
<li> Contact en informatie </li>
<li> Over mij </li>
</ul>
</nav>
<p> Test </p>
<footer>
</footer>
</body>
</html>
And the CSS:
p {
color: blue;
}
/* This is not working! */
nav ul {
list-style-type: none;
background-color: #3f875f;
border: 3px solid #3a756c;
text-align: center;
}
So it shows good on localhost but on rolfweb.net:8080 not.
PS: Sorry for my bad english i'm dutch :P

Move your css link within the head tags:-
<DOCTYPE html>
<html>
<head>
<title> RolfWeb </title>
<link type="text/css" rel="stylesheet" href="/css/indexss.css"/>
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Video's </li>
<li> Games </li>
<li> Contact en informatie </li>
<li> Over mij </li>
</ul>
</nav>
<p> Test </p>
<footer>
</footer>

Related

HTML wont link with CSS. they are both in the same folder

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.

external style sheet isn't working

Hi there I'm having issues with my HTML not wanting to recognize my external style sheet.
<!DOCTYPE html>
<!-- Brock Paradise 4/28/18 -->
<html lang="en">
<head>
<title> Brock Paradise R&#233sum&#233 </title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"
<link rel=stylesheet" type='text/css'
href="CSS/stylesheet.css">
</head>
<header>
<h2> Oakland Brock Paradise R&#233sum&#233 </h2>
</header>
<body>
<nav>
<ul>
<li> Summary </li>
<li> Contact Information </li>
<li> Skills </li>
<li> Education </li>
</ul>
</nav>
<main>
<h2> Contact Information </h2>
<p id="Contact">
<ul>
<li> Oakland Brock Paradise </li>
<li> 918 East Alabama Avenue </li>
<li> Albertville, Alabama, 35950 </li>
<li> (256) 506-0522 </li>
<li> oakland.paradise#gmail.com </li>
</ul>
</p>
<h2> Summary </h2>
<p id="Summary">
Graduated from Boaz High School with an advanced diploma and currently attending Snead State Community College with a General Education major. Worked at Snead State Community College as a baseball manager attending to the players and umpires needs while keeping the inventory and making sure everything was cleaned and in its proper place. Volunteered at Hamacon a convention in Huntsville, Alabama where I was part of registration and also helping out anywhere that was needed. I’ve also worked for Marshall Medical South as a shuttle driver for a short period improving my communication skills and my ability to get where I need to be in a timely manner.
</p>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
th,td {
border: 1px solid black;
}
table.a {
table-layout: auto;
width: 180px;
}
</style>
<p id="Education">
<h2> Education </h2>
<table class="a">
<tr>
<th>School</th>
<th>Degree/Diploma</th>
<th>Graduated Year</th>
</tr>
<tr>
<td>Boaz High</td>
<td>Advanced Diploma</td>
<td>May 2013</td>
</tr>
<tr>
<td>Snead State</td>
<td>General Education</td>
<td>May 2018</t>
</tr>
</table>
</p>
<h2> Employment History </h2>
<ul>
<li> Snead State Baseball Manager from August 2014 - May 2015 </li>
<li> Volunteered at Hamacon a convention in Huntsville, Alabama from 2017 - Present </li>
<li> Marshall Medical South shuttle driver from Septemper 2017 - Febuary 2018 </li>
</ul>
<p id="Skills">
<h2> Professional Skills </h2>
<ul>
<li> Management </li>
<li> Sanitation </li>
<li> Inventory Work </li>
<li> Communication </li>
<li> Teamwork </li>
<li> Organization </li>
<li> Multitasking </li>
<li> Priortization </li>
<li> Adaptablility </li>
<li> Time Management </li>
<li> Quick Learner </li>
<li> Driving </li>
</ul>
</p>
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
<img class="responsive" src="Images/Thumbsup.jpg" alt="Thumbsup" width="400" height="100">
</main>
</body>
<footer>
<p> Brock Paradise 2018©</p>
</footer>
</div>
</html>
That's my current code and these:
https://gyazo.com/ac9fd81a642a7c0004056be68ac140aa
https://gyazo.com/d179a47cfd5e5b7ba4997617d21c6672?token=f93f8d160431f2913bcc6d388cd4eb05
are the file locations
I cannot figure out why it's not working and I'm really new at this so sorry If I'm not much help.
From the file you sent you are missing a closing tag at the end of your meta tag.
Change from this:
<html lang="en">
<head>
<title> Brock Paradise R&#233sum&#233 </title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"
<link rel=stylesheet" type='text/css' href="CSS/stylesheet.css">
</head>
To this:
<html lang="en">
<head>
<title> Brock Paradise R&#233sum&#233 </title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css">
</head>

HTML Nav tag not working as intended

I am dabbling with html, and want to make my own website. I was trying to get the links to my most frequently used websites on the left of the page, as i belive that is what nav does. Also, I can not seem to get the body of my text in the center of my page, nor the header. This is my code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
</head>
<header>Ian Witkowski</header>
<nav>
<h1>My Favorite Websites</h1>
<ul>
<li><a href=http://www.youtube.com/>YouTube</a>
<li><a href=http://www.google.com/>Google</a>
<li><a href=http://www.reddit.com/>Reddit</a>
</ul>
</nav>
<body>
<article>
<h1>The Penultimate Website</h1>
<h2>The Official Homepage of Ian Witkowski</h2>
<p>Thank you for visiting my webpage!</p>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>
Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>
nav does nothing. It's just a tag like div. But part of the HTML5 specification, they added section, nav, footer, header tag to simplify the description of the page.
Without css, it's just a tag without any special behavior regarding design
Second thing, you have error on your html. Everything thing except the head part shoud be inside body (including nav)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
</head>
<body>
<header>Ian Witkowski</header>
<nav>
<h1>My Favorite Websites</h1>
<ul>
<li><a href=http://www.youtube.com/>YouTube</a>
<li><a href=http://www.google.com/>Google</a>
<li><a href=http://www.reddit.com/>Reddit</a>
</ul>
</nav>
<article>
<h1>The Penultimate Website</h1>
<h2>The Official Homepage of Ian Witkowski</h2>
<p>Thank you for visiting my webpage!</p>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>
Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>

Hyperlinks change the content of the object tag

I have created a navigation menu that I have been inserting into my pages using the "object" tag. Whenever I click a link on the navigation menu, it takes me to the correct page but it is inside the object tag. The rest of the page remains the same including the original address in the address bar. I cannot seem to find anyone else having the same issue as I am.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="/css/body.css" />
<body>
<object id="navigation" type="text/html" data="/includes/inc.nav.php"></object>
<div id='page'>
<div id='pageTitle'>Knowledge Base</div>
<p>Here is the body</p>
</div>
</body>
</html>
inc.nav.php
<link rel="stylesheet" href="/css/navbar.css" />
<ul id="menu">
<li>Tickets
<ul>
<li>BLAH</li>
<li>Haha</li>
<li>Woohoo</li>
</ul>
</li>
<li>Equipment
<ul>
<li>Trucks</li>
</ul>
</li>
<li>Reports
<ul>
<li>Reports</li>
<li>User List</li>
</ul>
</li>
<li>Knowledge Base</li>
<li>Logout</li>
</ul>
I'm sure I am missing something simple. Any help would be appreciated.
Found information on the answer here
Links should look like this:
<li><a target="_parent" href="/vision/tickets.php">BLAH</a></li>

Linking between a navigation list and headings

I'm having trouble linking from some nav lists to some h2 headings.
When I click the navigation bar in my document, I want it to jump down to the correct heading in the page. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Wisconsin Colleges and Universities</title>
<script src="modernizr-1.5.js"></script>
<link href="hestyles.css" rel="stylesheet" type="text/css" />
<base href="url" target="collegeWin"/>
</head>
<body>
<header>
<img src="highered.jpg" alt="Higher Education" />
</header>
<section>
<h1>Wisconsin Colleges and Universities</h1>
<nav>
<ul>
<li>Private Colleges and Universities</li>
<li>Technical College System</li>
<li><a>University of Wisconsin System</a></li>
</ul>
</nav>
<h2 id="private">Private Colleges and Universities</h2>
<ul>
<li>Alverno College</li>
<!-- ... -->
<li>Wisconsin Lutheran College</li>
</ul>
<h2 id="technical">Technical College System</h2>
<ul>
<li>Blackhawk Technical College</li>
<!-- ... -->
<li>Wisconsin Indianhead Technical College</li>
</ul>
<h2 id="public">University of Wisconsin System</h2>
<ul>
<li>UW-Green Bay</li>
<!-- ... -->
<li>UW-Whitewater</li>
</ul>
<footer>
Higher ♦ Ed: The Directory of Higher Education Opportunities
</footer>
</section>
</body>
</html>
As you can see, I've put IDs on the h2 headers and I try linking to them using #-prefixed fragment IDs. But for some reason I'm getting an error message stating "Cannot find. make sure the path or Internet address is correct."
This is because you have a tag base. Remove it and it'll work. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
Try like this
<li>Private Colleges and Universities</li>
<li>Technical College System</li>
<li>University of Wisconsin System</li>
</ul>