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ésumé </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ésumé </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ésumé </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ésumé </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>
Related
I am trying to put some easy mathematical symbols on my html-page. To this end, I followed
this manual and included
<script type="text/javascript" async
scr="https://cdnjs.cloudflare.com/ajax/libsmathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
into the header. Then, I put some very easy LaTeX-Code in my html-file, namely
$$\pi$$ \(\mathbb{R}\)
Unfortunately, these mathematical symbols are not displayed. Do you have any idea why MathJax does not work properly?
Here is the whole html-Code: Maybe you find some reason why MathJax does not work.
<!DOCTYP html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" href="../../style1.css" type="text/css">
<style> #picture {max-width: 350px; height: auto; } </style>
<link rel="stylesheet" href="../style2.css" type="text/css">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<script type="text/javascript" async
scr="https://cdnjs.cloudflare.com/ajax/libsmathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</head>
<body>
<?php include ("kopf.php"); ?>
<div class="bodydiv">
<h2 class="title2">Title1</h2>
<hr /><br />
<img id="picture" src="picture.jpg" alt="picture">
<p> This is just a test... $$\pi$$ \(\mathbb{R}\)</p>
<h3 class="title">Title2</h3>
<p><ul>
<li>Link 1 </li>
</ul></p>
<h3 class="title">Title3</h3>
<p><ul>
<li> Link 1</li>
<li> Link 2 </li>
<li> Link 3 </li>
<li> Link 4 </li>
</ul></p>
<h3 class="title3">Title4</h3>
<ul>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
<li> Literature 1</li>
</ul>
<br />
<?php include ("footer.php"); ?>
</div>
</body>
</html>
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>
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>
Hi guys so a site I've been working on is acting up and has randomly re-positioined itself wierdly on the top bar and I have no idea why. I thought everything was fine before, however recently I saw the site and it just so happened that theres a wierd space at the top of the page between the nav bar and the window url. Can someone inspect it and help me figure out whats causing this and if there would be a quick or easy fix. The site is www.omegadesignla.com
and any help would be appreciated, thanks.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
There's a line " " right after the body tag. Remove it and this should reposition the navigation bar correctly.
I just realized that you can only see this if you 'inspect element' in development tools.
If you can edit the page's source, make sure that the <nav class="top-bar" data-topbar> comes right after <body>. Right now, there is a blank line (line 16).
Solve this problem try this
body{
font-size: 0;
}
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>