HTML5:Parallax effect and navigation bar. Problem with headers - html

I'm trying to make a website with a navigation bar and parallax effect,but i have a problem. Navigation bar and parallax effect use the same header in body and i wish to know how i can use multiple headers on a page. Can you add please a code example with multiple headers that can be edited separated in CSS?
I will atach down my code
<!DOCTYPE html>
<html>
<head>
<title>Ce inseamna o cariera in it si tech?</title>
<link rel="stylesheet" href="Main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header class="navigation-bar">
<div class="container">
<div class="logo">
<img src = "IT & TECH.png" width = 200px height = 99px >
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Cum sa incepi o cariera?</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
PS I tried with header1 and header2 but i can't edit them in CSS file.

Use section instead of nav or header and assign id/class for it may be it will help

Related

Why CSS is not taking effect on my simple HTML page?

The CSS file is not able to take effect in the HTML files. What could be the reason if I ask please?
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\Desktop\Header\header.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="header">
</div>
<div class="inner_header">
<div class="logo_container">
<h1>MY<span>APP</span></h1>
</div>
</div>
<ul class="navigation">
<a><li>Home</li></a>
<a><li>About</li></a>
<a><li>Portfolio</li></a>
<a><li>Contact</li></a>
</ul>
</div>
</body>
</html>
Am I making mistake to include CSS file?
The issue is in the path where your css is being called from.
Replace this
<link rel="stylesheet" type="text/css" href="C:\Users\gadhavi\code\hussain\src\header.css">
with
<link rel="stylesheet" type="text/css" href="header.css">

href doesn't appear as a clickable link

I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>

Is it okay to put the nav tag outside of the header tag?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scarface</title>
<link rel="stylesheet" href="normalize/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="wrapper">
<header>
<h1>The World Is Yours</h1>
</header>
<nav>
<li>Home</li>
<li>Pictures</li>
<li>Contact</li>
</nav>
</div>
</body>
</html>
Is it okay if I put my nav tag outside of the header tag? I know many people/developers like to have the navigation "wrapped" inside of their header tags. Thank you in advance for any help with my question.

Image link area extends outside image

I am designing a simple HTML website. The problem I have is with my images that I am using as links. I had them positioned where I wanted them but then I noticed that the link area extended to the left of the image. I was using relative positioning and thought that might have something to do with it, but I removed all CSS from my website and it still happens. I have a strictly HTML page and the link area still extends outside the size of the image.
Any idea what's causing this?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Zach's Website</title>
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen/projection">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection">
<![endif]-->
<div id="header">
<div class="container clearfix">
<img id="headbanner" class="span-24" src="img/headerbanner.png">
<a id="headerLogo" href="index.html"><img class="prepend-3" src="img/ZBLogoHeader.png"></a>
<ul class="navigation">
<li>Experience</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="social">
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
<li><img src="img/tumblr.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/github.png"></li>
</ul>
<img id="bodyPattern" src="img/body.png">
</div>
</div>
</head>
<body>
<div id="project1" class="container clearfix">
<img id="novel" class="prepend-2" src="img/ANovelIdea.jpg" onmouseover="this.src='img/hoverNovel.png'" onmouseout="this.src='img/ANovelIdea.jpg'" />
<img id="barminder" class="prepend-8" src="img/Barminder.jpg" onmouseover="this.src='img/hoverBar.png'" onmouseout="this.src='img/Barminder.jpg'" />
</div>
</body>
<footer>
<div class="container clearfix">
<img id="footerLogo" src="img/ZBLogoFooter.png">
<img id="footerBanner" src="img/footerbanner.png">
</div>
</footer>
</html>
Are you setting a height/width to the 'a' tag? Ideally you should be setting height, width and display:block, so that the 'a' tag has its exact size.
a{
display:block;
height:100px;
width:100px;
}
This worked for me.
<!-- HTML -->
<img src="#" alt="logo image">
/* CSS */
a {display: block; width: 50%;}
img {width: 100%;}
You set the width of the link then you set the width of the image to 100% of the link width. Then you adjust the width of the link until the image is the size you need. Link won't go past the width of the image this way.
So...I stumbled on this because I was having the same issue. Then, when I didn't see the answer here, I tried one last-ditch effort. I set all of my images wrapped in A tags to display: block; in the CSS. Before that, the A tag was allowing users to click far outside the image to the right where there was just white space caused by the display: block; default. Try display: inline-block because it caused the link to force itself down only to the edges of the image. Hope that works for you!

HTML 5: #Header or <header>

I am a little confused now by html so i've a question about the semantic element:
Should i use like this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<header class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
Or this?
<html>
<head>
<title>Some page</title>
</head>
<body>
<div class="main-header">
<!-- menu and imaganary logo -->
<nav>
<ul>
<li>Demo</li>
</ul>
</nav>
</header>
</body>
</html>
I read http://html5doctor.com/the-header-element/ about the header element. It tells that it usefull for the headings of a <article>
It doesn't give me information about this situation.
<header> is also good for the page header or for a <section>'s header not just for articles. You can use both your examples without a problem. I recommend you use <header> for easier readability.
According to the HTML Specification
The <header> element is intended to usually contain the section's heading (an <h1>-<h6> element or an <hgroup> element), but this is not required. The element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
So, you should probably go with the first example, although the second one too can be used without a problem.
Also you can directly use the header element in your CSS like below.
header {
// style the header
}