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>
Related
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>
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 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>
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;
}
Hi Localhost working fine after uploading all the files to server it's not showing images in web browser in html and layout design also got changes.I want exactly localhost how it's working same I want.
can any one please help me
html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_300.font.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_500.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/tms-0.3.js"></script>
<script type="text/javascript" src="js/tms_presets.js"></script>
<script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel .jCarouselLite').jCarouselLite({
btnNext: '.carousel .next',
btnPrev: '.carousel .prev',
speed: 600,
easing: 'easeOutQuart',
vertical: false,
circular: false,
visible: 4,
start: 0,
scroll: 1
});
});
</script>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="row-bot">
<div class="row-bot-bg">
<div class="main">
<div class="wrapper p6">
<img src="images/logo.png" align="right"/>
<div class="wrapper">
<figure class="img-indent2"><img src="images/page1-img1.png" alt=""></figure>
<div class="extra-wrap">
<strong class="text-1">There is no doubt that education is in the eye of the storm that is sweeping the world's economies,Innovation ,Creativity, Collaborative Leadership,Global Connection, and trans-disciplinary skills are among a few of the major drives of success today's professional.The only educational institutions are unique position of being able to lead the changes required by the entire education system to accommodate a new kind of thinking for a new kind of world. </strong><br>
<strong class="text-1">This makes there technologies readily accessible to you, at easily affordable prices and offers plans that suits academic institutes of all sizes and budgets.</strong>
</div>
</div>
</div>
</div>
</div>
</header>
<!--==============================aside================================-->
<aside>
<div class="carousel">
<div class="carousel-container">
<h3>Popular Design Projects</h3>
<div class="jCarouselLite">
<ul class="carousel-list">
<li>
<div class="img-border">
<img src="images/page1-img2.jpg" alt="" />
</div>
</li>
<li>
<div class="img-border">
<img src="images/page1-img3.jpg" alt="" />
</div>
</li>
<li>
<div class="img-border">
<img src="images/page1-img4.jpg" alt="" />
</div>
</li>
</ul>
</div>
</div>
</div>
</aside>
<!--==============================content================================-->
<section id="content"><div class="ic"></div>
<div class="main">
<div class="container_12">
<div class="wrapper">
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p0">Academic Institutions Benefits:</h3></div>
<ul class="list-1" >
<li>Admission & Financial Aid</li>
<li>Quick Registration & Scheduling</li>
<li>Parents Portal/ Student Portal & Teachers Portal</li>
<li>More Trust From Parents</li>
<li>Quicker Response Time</li>
<li>Better Services, at a Lower Cost</li>
<li>Complete Online Package</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Top Users:</h3></div>
<ul class="list-1">
<li>Instant Attendance Alerts(SMS,Email)</li>
<li>Progress Reports And Hall Ticket</li>
<li>Automatic Backup Technology</li>
<li>Exam Time Tables And Results</li>
<li>Online Surveillance System</li>
<li>Online Fees Payment Facility</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left2">
<div style="color:#0000FF">
<h3 class="p1">We Can Manage Which Helps In The Following:</h3></div>
<ul class="list-1">
<li>Customised And Self Branded Message(SMS,Email & Web)</li>
<li>No More Laborious And Time Consuming Paper Work</li>
<li>Online/Onsite Training Sessions </li>
<li>24x7 Customer Services</li>
<li>User Friendly System</li>
<li>Low Maintenance Cost</li>
</ul>
</div>
</article>
</div>
<div class="wrapper">
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Management:</h3></div>
<ul class="list-1">
<li>Manage Communication flow among stake holders</li>
<li>Integration of all activities performed in the school</li>
<li>To maintain transparency in the system</li>
<li>To fight stiff competition</li>
<li>To take care of pillars of school academic,administrative and finance</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left">
<div style="color:#0000FF">
<h3 class="p1">Students/parents:</h3></div>
<ul class="list-1">
<li>Every student is not able to get personal attention from teacher</li>
<li>Students are always overburdened</li>
<li>Only academic performance is considered while grading</li>
<li>Lateral thinking, life skills and thinking skills are not measured.</li>
<li>Online Surveillance System</li>
<li>Online Fees Payment Facility</li>
</ul>
</div>
</article>
<article class="grid_4">
<div class="indent-left2">
<div style="color:#0000FF">
<h3 class="p1">Teachers:</h3></div>
<ul class="list-1">
<li>Teachers have to manage large amount of data.</li>
<li>There are large numbers of students who are needed to be taken care of </li>
<li>Teachers have to deal with the repetitive administrative work.</li>
<li>The process of continuous comprehensive evaluation need to be followed.</li>
<li>Manage time table and proxy scheduling</li>
</ul>
</div>
</article>
</div>
</div>
</div>
</section>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="aligncenter">
<p class="p0">Rushda Infotech ©2014 School, all rights reserved. </p>
<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website </a> by rushdainfotech.in
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeOutQuad',
preset:'diagonalExpand',
slideshow:5000
})
})
</script>
</body>
</html>
Try to get image path from unloaded images by right click and properties. That will show image actual path. Try to validate that path. Its mostly when you deploy on different servers image path would change.