Webpage does not show the items correctly


#1

I created a page where I have a menu navigation bar at the top. The page does not show my background though it is set.

<!DOCTYPE html>
<html>
<head>
	
	<meta content="text/html; charset=UTF-8" http-equiv="content-type">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<style type="text/css">	
	i{
		font-size: 20px; color: #99ffff; text-shadow: 4px 4px 4px #000000;
	}


<title>Proiect</title>

body{
	margin: 0;
	**background: url("4.jpg");**
	background-repeat: no-repeat;
	background-size: cover;
	}

.nav{
	background-image: url("5.jpg");
	width: 100%;
	height: 60px;
	margin-top:2px;
	<!--opacity: 0.7; in caz ca se doreste ca bara de navigare sa fie transparenta-->
	<!--text-transform: uppercase;-->
	position: fixed;
  	top: 0;
  	overflow: hidden;
  	}	

ul{
	list-style: none;
	padding: 0;
	display: flex;
	margin: 0;
	justify-content: center;
	}

li{
	float: left;
	margin-top: 5px;
	}

a{
	width: :100px;
	color:  #ccffe6;
	display: block;
	text-decoration: none;
	font-size: 25px;
	text-align: center;
	padding: 10px 30px;
	border-radius: 10px;
	font-family: Calibri;
	font-weight: normal;
	}

a:hover{
	background-color:#00b3b3;
	transition: 0.7s;
	}

</style>

</head>
<body>

	<div class="margin-top"></div>
	<div class="nav">
		<ul>
			<li><a href="index.html"><i class="fas fa-home">&nbsp;Home</a></li></i>
			<li><a href="pages.html"><i class="fas fa-copy">&nbsp;Pages</a></li></i>
			<li><a href="materials.html"><i class="fas fa-folder-open">&nbsp;Materials</a></li></i>
			<li><a href="forums.html"><i class="fas fa-edit">&nbsp;Forums</a></li></i>
			<li><a href="live.html"><i class="fas fa-images">&nbsp;Gallery</a></li></i>
			<li><a href="members.html"><i class="fas fa-users">&nbsp;Members</a></li></i>
			<li><a href="out.html"><i class="fas fa-sign-out-alt">&nbsp;Sign-out</a></li></i>
		</ul>
	</div>
<br>
<br>
<br>
<br>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>

</html>



#2

are the images in the same folder as the html file?

using html comments in css is also a bad idea, use css comments


#3

They are in the same folder! About the comments, sorry my mistake… I’m a noob in this!


#4

Okay, can you upload the folder to dropbox/google drive/?? anything you find pleasant to use? Its the only way we can reproduce the problem and see what goes wrong


#5

Yes, I will try to upload the folder!
my folder


#6

24MB, i do hope that is not the webpage you want to serve to clients. Its massive. And the download is super slow (which is not my internet connection)


#7

Nooo… is only a project for the school… what clients? As I said… I’m a noob! The teacher put the html tags on the board and just mentioned the css and he thought he taught us how to make a web page. Now he asks to do more than he has taught.


#8

usually if you make a website, you want to put it online, so people can view your website (like this forum). Clients in this case referred to people wanting to use your website.

hm… i mentioned using html comments in css is bad, using html tags (<title>Proiect</title>) inside an internal stylesheet isn’t much better :wink:

<style></style> is known as an internal stylesheet, given its inside the .html file. move the title outside the internal stylesheet, the rest of the stylesheet can’t be read because of invalid css syntax/html syntax inside css


#9

That’s great! Now my background is showing me! The teacher never said anything about this. I’ve made the page only by tutorials.


#10

Of course, the job is not finished… because now I can’t align-center the navigation bar…


#11

please copy paste the content of the files you made change to too the forum


#12
<!DOCTYPE html>
<html>
<head>
	
	<meta content="text/html; charset=UTF-8" http-equiv="content-type">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<style type="text/css">	
	i{
		font-size: 20px; color: #99ffff; text-shadow: 4px 4px 4px #000000;
	}

body{
	margin: 0;
	/*background: url("8.jpg");*/
	background-repeat: no-repeat;
	background-size: cover;
	}

.nav{
	background-image: url("5.jpg");
	width: 96%;
	margin-left: 2%;/*here I tried to center the navigation bar, but the values are not equal
	margin-right: 3%;*/
	border-radius: 5px; 
	height: 60px;
	margin-top:2px;

	/*opacity: 0.7; bara de navigare sa fie transparenta*/
	position: fixed;
  	top: 0;
  	overflow: hidden;

  	}	

ul{
	list-style: none;
	padding: 0;
	display: flex;
	margin: 0;
	justify-content: center;
	text-decoration: none;
	}

li{
	float: left;
	margin-top: 5px;
	}

a{
	width: :100px;
	color:  #ccffe6;
	display: block;
	text-decoration: none;
	font-size: 25px;
	text-align: center;
	padding: 10px 30px;
	border-radius: 10px;
	font-family: Calibri;
	font-weight: normal;
	}

a:hover{
	background-color:#00b3b3;
	transition: 0.7s;
	}

#container {
    display: table;
    width: 100%;
    background: #ccc;
}
#container> div {
    display: table-cell;
    padding: 15px;
    width: 25%;
    scroll-behavior: auto;
}
#container> div:nth-child(2) {
    width: 50%;
    background: #666;
}

	h1{	
		text-align: center;
		font-family: Calibri;
		font-size: 50px;
		text-shadow: 3px 3px 4px teal;

		}

	h2{
		text-align:justify;
	}

	h3{
		text-align: justify;
		font-family: inherit;
		padding: 30px;
		font-size: 25px;
		text-shadow: 1px 1px teal;

	}

</style>
<title>Proiect</title>
</head>
<body>

	<div class="margin-top"></div>
	<div class="nav">
		<ul>
			<li><a href="index.html"><i class="fas fa-home">&nbsp;Home</a></li></i>
			<li><a href="pages.html"><i class="fas fa-copy">&nbsp;Pages</a></li></i>
			<li><a href="materials.html"><i class="fas fa-folder-open">&nbsp;Materials</a></li></i>
			<li><a href="forums.html"><i class="fas fa-edit">&nbsp;Forums</a></li></i>
			<li><a href="live.html"><i class="fas fa-images">&nbsp;Gallery</a></li></i>
			<li><a href="members.html"><i class="fas fa-users">&nbsp;Members</a></li></i>
			<li><a href="out.html"><i class="fas fa-sign-out-alt">&nbsp;Sign-out</a></li></i>
		</ul>
	</div>
<br>
<br>
<br>
<br>
<h1>Para mim, Ă© grego! It's greek to me!</h1>
<h3>A afirmação “Para mim, é grego!” corresponde a um assunto difícil e complicado. Por contrapartida, este projeto é dedicado à Grécia Antiga é um assunto dos alunos de 10-15 anos, em Portugal e Roménia. Vamos investigar uma das civilizações mais antigas e fazer o upload das descobertas para o TwinSpace comum.</h3>

	<div id="container">
    	<div>
        First Div
        <p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
    	</div>
    	<div>
        Middle Div
        <p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
    	</div>
    	<div>
        Last Div
        <p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
  		<p>Some text some text some text some text..</p>
    	</div>
	</div>

</div>

</body>

</html>



#13

there are tricks for centering, like this one:

  margin: 0 auto;
  left: 0;
  right: 0;

add that to you .nav, see this centering guide


#14

As always, you are right. Now it works and is centered! Tks a lot!:kissing_heart:


#15

Hi there again!
now I have another problem … after defining how the links in the navigation bar react, every time I hover the mouse over the links on the page that are not in the navigation bar, I get the same effect. How can I make the hover effect work only for the navigation bar and not for all the links on the page?

a: hover {
background-color: rgb (27, 152, 145);
transition: 0.7s;
overflow: hidden;
}

This is the new code for the page…

<!DOCTYPE html>
<html>
<head>
	
	<meta content="text/html; charset=UTF-8" http-equiv="content-type">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<style type="text/css">	
	


body{
	margin: 0;
	background: url("9.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	}

.nav{
	background-image: url("5.jpg");
	width: 96%;
	margin: 0 auto;
  	left: 0;
  	right: 0;
	border-radius: 7px; 
	height: 60px;
	margin-top:1px;
	position: fixed;
  	top: 0;
  	overflow: hidden;
  	}	

ul{
	list-style: none;
	padding: 0;
	display: flex;
	margin: 0;
	justify-content: center;
	text-decoration: none;
	}

li{
	float: left;
	margin-top: 5px;
	}

a{
	width: :100px;
	display: block;
	text-decoration: none;
	font-size: 25px;
	text-align: center;
	padding: 10px 30px;
	border-radius: 10px;
	font-family: Calibri;
	font-weight: normal;
	}

a:hover{
	background-color:rgb(27, 152, 145);
	transition: 0.7s;
	overflow: hidden;
	}

i{
	font-size: 20px; 		
	color: rgb(204, 255, 255);
	text-shadow: 3px 3px 4px rgb(0, 102, 102);
}

h1{	
	text-align: left;
	font-family: Calibri;
	font-size: 40px;
	color: rgb(0, 51, 51);
	text-shadow: 3px 3px 4px  rgb(32, 178, 170);

	}

h2{
	text-align: center;
	font-family: inherit;
	font-size: 20px;
	color: rgb(255, 102, 0);
	text-shadow: 3px 3px 4px  rgb(255, 209, 179);
	}

h3{
	text-align: justify;
	font-family: inherit;
	padding: 17px;
	font-size: 20px;
	color: rgb(0, 51, 51);
	text-shadow: 3px 3px 4px  rgb(32, 178, 170);

	}

</style>

<title>
	Proiect
</title>

</head>

<body>

	<div class="margin-top"></div>
	<div class="nav">
		<ul>
			<li><a href="index.html"><i class="fas fa-home">&nbsp;Home</a></li></i>
			<li><a href="pages.html"><i class="fas fa-copy">&nbsp;Pages</a></li></i>
			<li><a href="materials.html"><i class="fas fa-folder-open">&nbsp;Materials</a></li></i>
			<li><a href="forums.html"><i class="fas fa-edit">&nbsp;Forums</a></li></i>
			<li><a href="live.html"><i class="fas fa-images">&nbsp;Gallery</a></li></i>
			<li><a href="members.html"><i class="fas fa-users">&nbsp;Members</a></li></i>
			<li><a href="contact.html"><i class="fas fa-sign-out-alt">&nbsp;Contact</a></li></i>
		</ul>
	</div>
<br>
<br>
<br>
<br>
<table style="width: 96%; height: 50%; text-align: left; margin-left: auto; margin-right: auto;" border="1px" cellpadding="5" cellspacing="3" cellborder="gray">
  <tbody>
    <tr>
    	<td style="width: 700px;" colspan="3" rowspan="1">

    		<h1>Para mim, Ă© grego! It's greek to me!</h1>

    	</td>

      	<td>
      		<a href="profile.jpg">
      			<img src="foto.jpg" width="75" hight="75" align="center">
      		</a>
    	</td>
    </tr>

    <tr>
    	<td style="text-align: center; width: 80px;" colspan="1" rowspan="1">
 			<img src="sigla.jpg" width="170" hight="170" align="center">
 		</td>

    	<td style="text-align: justify; width: 700px;" colspan="2" rowspan="1">

			<h3>
				A afirmação “Para mim, é grego!” corresponde a um assunto difícil e complicado. Por contrapartida, este projeto é dedicado à Grécia Antiga é um assunto dos alunos de 10-15 anos, em Portugal e Roménia. 
			<br>
			<br>
				Vamos investigar uma das civilizações mais antigas e fazer o upload das descobertas para o TwinSpace comum.
			<br> 
			<br>
				Ao explorar o passado, os alunos apresentarão um sentimento de pertença a uma determinada comunidade e reconhecerão a importância de preservar o património cultural, transferindo-o para o conteúdo audiovisual.
			</h3>
		</td>

    	<td>
      		<h2>
      			Welcome
      			<br>
      			Dariana Zimani
      			<br>
      		</h2>
      		<a href="mailto:dariana.zimani@gmail.com">
      			<img width=50px height=50px alt="mail" src="mail.ico">
      		</a>
    	</td>

    </tr>
    	
    <tr>

      <td colspan="2" rowspan="1"  style="text-align: center; width: 700px;">
      	<h2>
      		<a href="pages.html">
      			<i class="fas fa-copy">&nbsp;<h2>Pages</h2>
      			</i>
      		</a>
      	</h2>
      </td>

      <td colspan="1" rowspan="1">
      	
      		<a href="materials.html">
      			<i class="fas fa-folder-open">&nbsp;<h2>Materials</h2>
      			</i>
      		</a>
      		
	</td>

      <td>
      	<h2>
      		Video
      	</h2>
      </td>

    </tr>

    <tr>

      <td colspan="2" rowspan="1"  style="text-align: center; width: 700px;">
      	fffffffff
      </td>

      <td style="text-align: center;" colspan="2" rowspan="1">
      	ffffffffff
      </td>

    </tr>

  </tbody>
</table>

</body>

</html>



#16

use the correct css selector, this is what you are looking for:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors


#17

Tks for the reference. I’ve read the theory and now I’ve found the solution.
The code has to be:

ul li a: hover {
background-color: rgb (27, 152, 145);
transition: 0.7s;
overflow: hidden;
}


#18

isn’t it just easier to include .nav within your selector chain?