I tried making menu with 4 links but one of them can be clicked anywhere on the whole page. I tried looking for unclosed tags but can't seem to find anything. I also tried to use sites that check for code errors and they say that there is unclosed tag but either I'm blind or there are no unclosed tags... :/
I know it's noob question but I'm trying for 20 minutes now to find the unclosed tag? that I can't find.
Edit: about.html opens if I click anywhere on the page
I don't know how to upload files so I'm just pasting code below (I also have some css code but I don't think that CSS is the issue):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="description" content="opis strony" />
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
<title> Kurs HTML i CSS3</title>
</head>
<body>
<div class="container">
<header>
<div class="title">
<h1>Kurs HTML5 i CSS3</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Start</li>
<li><a href="html5.html">HTML5</li>
<li><a href="css3.html">CSS3</li>
<li><a href="about.html">O mnie</li>
</ul>
</nav>
</header>
<div class="content">
<div class="main-content">
<section>
<article id="html5">
<h2>Artykuł o HTML5</h2>
<figure>
<img src="html5.png">
<figcaption>Logo HTML5</figcaption>
</figure>
<p>Witaj na mojej stronie poświęconej HTML5 i CSS3</p>
</article>
<article id="css3">
<h2>Artykuł o CSS3</h2>
<figure>
<img src="css3.png">
<figcaption>Logo CSS3</figcaption>
</figure>
<p>
Przykładowa treść 1 <br>
Przykładowa treść 2
</p>
</article>
</section>
</div>
<div class="sidebar">
<aside>
<h2>JavaScript</h2>
<p>Warto wiedzieć, że do tworzenia stron internetowych często wykorzystuje się również język JavaScript.
Pozwala on na zaprojektowanie interaktywnych stron internetowych poprzez reagowanie na zdarzenia.</p>
</aside>
</div>
</div>
<footer>Wszelkie prawa zastrzeżone ©</footer>
</div>
</body>
The problem is here:
<nav>
<ul>
<li><a href="index.html">Start</li>
<li><a href="html5.html">HTML5</li>
<li><a href="css3.html">CSS3</li>
<li><a href="about.html">O mnie</li>
</ul>
</nav>
You should close the element after the text of link in this way:
<nav>
<ul>
<li>Start</li>
<li>HTML5</li>
<li>CSS3</li>
<li>O mnie</li>
</ul>
</nav>
If you don't close it everything that comes after the a element is "inside" the anchor element
Related
So I added smooth scrolling and a button that scrolls you to the bottom and that's the point but now every time I load in and reload the site etc. it automatically scrolls down. I also want to put the "About me" heading further down so it isn't visible unless you click "Click to learn more"
Picture of the site: https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg
HTML CODE:
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
</body>
</html>
I don't understand what you want to say provide CSS for easy to understand your problem.
Set #down as default display: none and then add script(see my code) and also add onclick="show()" in button element,
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
<script>
function show() {
document.getElementById("down");
down.style.display = "block";
}
</script>
</body>
</html>
This
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
is invalid - you cannot nest interactive elements like that. Either use a button or use an anchor.
If your page is automatically scrolling, I'd assume you're reloading the page after clicking this anchor. I suspect that if you look at your browser's navigation bar, it will end with #down, like
https://whateveryourdomain.is/somepage.html#down
That's how page anchors work - the browser will attempt to scroll the page until the matching anchor tag or id'd element is at the top of the viewport.
<a href="Services.html">
<button type="button"class="btn">Book Now!</button>
<div id="contact">
<p> <b> Contact us: </b> CapitalExplorers#Wellington.com</p>
</div>
</body>
Trying to find out what is causing the </body> to be red. I believe it has something to do with the <a href part but not sure. Any ideas on a potential fix?
Remember to close your tag:
<head>
...
</head>
You're missing the closing tag of the first list.
<body>
<ul id="navigation">
<li>FAQ</li>
<li>Bookings</li>
<li> Services </li>
<li>Home</li>
</ul> <!-- Include here a closing tag -->
The <a> tag also needs to be closed.
<a href="Services.html">
<button type="button"class="btn">Book Now!</button>
</a> <!-- For example, if you want the link only in the button (even if it is not a good practice) -->
<div id="contact">
<p><b>Contact us:</b> CapitalExplorers#Wellington.com</p>
</div>
</body>
looking at the provided snippet. i think this is what your html should look like. added some closing tags and removed some spaces.
<!DOCTYPE html>
<html>
<head>
<title>Capital Explorers- Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Arvo:wght#700&family=Chelsea+Market&family=IBM+Plex+Sans:wght#400;600&family=Lato:wght#300&family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<ul id="navigation">
<li>FAQ</li>
<li>Bookings</li>
<li> Services </li>
<li>Home</li>
</ul>
<h1>Capital <span> Explorers </span></h1>
<div id="header">
<h2>Explore Wellington.</h2>
</div>
<div id="paragraph">
<p> At Capital Explorers, our mission is to provide Fun, Adventurous and <span> Eco-friendly </span> Tours of Wellington City and beyond.
</p>
</div>
<div id="SubPara">
<p> <b>- Maori</b> culture and history, Te Papa, The Cable Car and many more!
<br>
<b>- Travel on</b> foot, with scooters or bicycles, and also electric vehicles.
<br>
<b> - Family </b> owned and operated, with over 15 years of experience in the tourism industry.
<button type="button"class="btn">Book Now!</button>
</div>
<div id="contact">
<p> <b> Contact us:</b> CapitalExplorers#Wellington.com</p>
</div>
</body>
</html>
I recently started to learn CSS and HTML and I am doing a front page for exercise. However, the browser is overriding and turning my other elements (in different div) into links. I tried CSS to solve it, nothing worked. I removed all CSS and it still is the same.
The container div and all the elements inside it is are now links and when I click, it tries to redirect to hrf.html page.
Can you please tell me where I am doing a mistake?
Elements in container div in the dev tool have this code:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conquer</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li><a href="hrf.html">Homepage</li>
<li><a href="hrf.html">About Us</li>
<li><a href="hrf.html">Services</li>
<li><a href="hrf.html">Contact</li>
<li><a href="hrf.html">External</li>
</ul>
</div>
</div>
<div class="container">
<div class="first-sec">
<div class="first-img">
<img src="image1.jpg" alt="image">
</div>
<div class="heading">
<h1>CONQUER</h1>
<h2>Simple Website Design</h2>
</div>
</div>
</div>
</body>
</html>
it is necessary to close the tags properly otherwise there scope will disturb effects of other tags too..here in your code you forget to close <a> anchor tags thats why its become worry for you..try this
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
</ul>
</div>
</div>
Best of luck ahead
This is because you haven't closed any <a> tag. You must close it or else you will face same issue.
<li>Homepage</li>
Follow this practice in all <li> elements.
That should fix your code. Let me know.
you haven't closed the anchor tags inside your "navlist" class.
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
try this..
The top third of my page, including a graphic and headline, shows up just fine in Firefox and Explorer, but does not appear in Chrome when accessed from my server. It does appear in Chrome when viewing the page as a file.
The graphic is defined in the CSS file as:
/** adbox **/
#adbox {
background: #020a13 url(../images/bg-adbox.jpg) no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
min-height: 433px;
margin: -56px 0 22px;
And the HTML file is:
<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>donfiler.net - web design </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div class="wrapper clearfix">
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Gallery
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div id="contents">
<div id="adbox">
<div class="wrapper clearfix"><p></p><p></p>
<div class="info">
<h1>Web Design & Social Media Marketing</h1>
<p>
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality.
</p>
</div>
</div>
<div class="highlight">
<h2>707-217-8457 if you want a mobile friendly web site.</h2>
</div>
</div>
<div class="body clearfix">
<div class="click-here">
<h1>Impact Marketing</h1>
Click Here!
</div>
<p style="font-size:12px;">
Proven Consultant, Author | Helping Companies Translate Their Business Goals to Reality. We design web sites with dynamic database interaction; deliver computer based training; create comprehensive marketing campaigns; specialize in hand coding HTML, CSS, PHP, Mysql and JavaScript to customize web design and user interface.
</p>
</div>
</div>
<div id="footer">
<ul id="featured" class="wrapper clearfix">
<li>
<img src="images/THUMBNAIL_IMAGE4.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Memories of growing up in Europe during the Cold War. The first book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE3.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
A catchy tune by the Beach Boys in the mid-sixties, the lyrics of "Be True to Your School" hit many highlights of high school in that era.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE2.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
College Years and Rock Band Entrepreneur. The third book in a series about Don's life.
</p>
</li>
<li>
<img src="images/THUMBNAIL_IMAGE1.jpg" alt="Img" height="204" width="180">
<h3>Order Now</h3>
<p>
Contributing to others is the highest form of success you can achieve and I wanted to impart what I have learned over the years working for a living.
</p>
</li>
</ul>
<div class="body">
<div class="wrapper clearfix">
<div id="links">
<div>
<h4>Social</h4>
<ul>
<li>
Google +
</li>
<li>
Facebook
</li>
<li>
Youtube
</li>
</ul>
</div>
<div>
<h4>Blogs</h4>
<ul>
<li>
Blogspot
</li>
<li>
Marketing Blog
</li>
<li>
Web Design Blog
</li>
</ul>
</div>
</div>
<div id="newsletter">
<h4>Newsletter</h4>
<p>
Sign up for Our Newsletter
</p>
<form action="https://donfiler.us/newsletter" method="post">
<!--<input type="text" value="">-->
<input type="submit" value="Sign Up!">
</form>
</div>
<p class="footnote">
© Copyright © 2016 Don Filer all rights reserved.
</p>
</div>
</div>
</div>
</body>
</html>
The Google Chrome extension AdBlock is blocking that element for me, because its ID is adbox. Check if you have that extension enabled, as well.
In general, try avoiding the word "ad" when naming HTML elements.
From the start, I can see a major flaw in the code- you named an element adbox. Most ad-blocking extensions work this way- they scan for ads, and that element will be perceived as an ad, simply because of it's name.
To quote CapitalQ,
In general, try avoiding the word "ad" when naming HTML elements.
Check if you have an ad-blocking extension turned on, and if so, try the site without that extension. Also, rename that element ASAP!
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8” />
<title>Footer Design</title>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body>
<div id=“footer”>
<div id=“footer-col-one”>
<h3>Categories</h3>
<ul>
<li>Snow</li>
<li>Surf</li>
<li>Travel</li>
</ul>
</div>
<div id=“footer-col-two”>
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<div id=“footer-col-three”>
<h3>Follow Me</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
</body>
</html>
For some reason I cannot get my CSS stylesheet to apply. It's not the same directory as this html file. I'm using TextEdit and set it up for use with html & css. I did notice that any where I had double quotes I'm getting some weird output on Chrome Developer Tools like the following:
<link rel=“stylesheet†type=“text/css†href=“style.css†/>
You can't delimit HTML attribute values with “ characters, you must use " or '.
Left/Right quotes will be treated as part of the value (and thus the URL) and not as HTML special characters.
Your problem is most likely caused by writing code using a Word Processor with Smart Quotes turned on. Use a text editor (I'm fond of Sublime Edit 2 myself, but there are many other excellent choices such as Komodo Edit and Brackets).
This would have been picked up (albeit not explicitly) had you used a validator.
Please use this source formatting .Do not use “ . Use " . If your style.css file is in the other location means suppose that style.css is in the css folder so give the path like href="css/style.css"
Hope the answer and use this below html code which I have modified!
Footer Design
<body>
<div id="footer">
<div id="footer-col-one">
<h3>Categories</h3>
<ul>
<li>Snow</li>
<li>Surf</li>
<li>Travel</li>
</ul>
</div>
<div id="footer-col-two">
<h3>Navigation</h3>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
<div id="footer-col-three">
<h3>Follow Me</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
</body>
</html>