In the about.html replace margin-left: -10em; with clear:both;
<style>
.info1{
font-size: 25px;
clear: both;
}
</style>
Solution 1 :
Problem :
I’m writing this program for my school using HTML where you can find your classmates by simply just typing your class grade.
Here is my Code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find your Class</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src = "https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "credits.html">Credits</a></li>
<li><a href = "ci.html">Contacts and info.</a></li>
</ul>
</nav>
<header>
<h1>FIND YOUR CLASS AT ST. THERESE SCHOOL</h1>
<h2>Created by Axel Palomino</h2>
</header>
<div class = "search-box">
<input class = "search-txt" type = "text" name = "" placeholder = "What class are you searching?">
<a class = "search-btn" href = "#">
<i class="fas fa-search"></i>
</a>
</div>
</body>
</html>
ci.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find your Class</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src = "https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "credits.html">Credits</a></li>
<li><a href = "ci.html">Contacts and info.</a></li>
</ul>
</nav>
<header>
<h1>Contacts and Info.</h1>
</header>
</body>
</html>
credits.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find your Class</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src = "https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "credits.html">Credits</a></li>
<li><a href = "ci.html">Contacts and info.</a></li>
</ul>
</nav>
<header>
<h1>Credits</h1>
</header>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find your Class</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script defer src = "https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<style>
.info1{
font-size: 25px;
margin-left: -10em;
}
</style>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "credits.html">Credits</a></li>
<li><a href = "ci.html">Contacts and info.</a></li>
</ul>
</nav>
<header>
<h1>About</h1>
</header>
<div class = "info1">
<ul>
<li>Hello </li>
</ul>
</div>
</body>
</html>
style.css:
body {
background-color: rgb(53, 55, 160); /* background color: Blue*/
color: white; /*color: Maroon*/
font-family: 'Oswald', Helvetica; /* */
}
header{
font-size: 25px;
text-align: center;
margin-top: 5px;
}
h1 {
background-color: rgb(197, 13, 13);
}
.search-box{
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(197, 13, 13);
height: 40px;
border-radius: 10px;
padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-txt{
background: white;
}
.search-btn{
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.search-txt{
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: black;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
footer{
text-align: center;
margin-top: 570px;
}
footer h3{
display: inline-block;
font-size: 30px;
}
.button1{
background-color: red;
}
.button1:hover{
background-color: rgb(53, 55, 160);
}
* {
margin: 0;
padding: 0;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 25px;
font-family: 'Oswald', Helvetica;
color: white;
padding: 0 20px;
}
/* header {
text-align: center;
margin-top: 5px;
}
h1 {
font-size: 36px;
padding: 15px;
color: #8c6b48;
background-color: white;
}
h2 {
font-size: 24px;
padding: 15px;
text-transform: uppercase;
}
h3 {
font-size: 20px;
padding: 15px;
text-transform: uppercase;
text-align: left;
margin-left: 20px;
font-weight: 500;
line-height: 2.7;
letter-spacing: 0.8px;
}
th {
border: 2px solid #8c6b48;
}
table {
text-align: center;
margin: 20px auto;
}
td {
border: 2px solid #8c6b48;
width: 300px;
}
footer {
margin-top: 50px;
text-align: center;
position: fixed;
width: 100%;
bottom: 5px;
background-color: #242f44;
z-index: 5;
}
footer h3 {
display: inline-block;
font-size: 14px;
}
.container {
max-width: 940px;
margin: 0 auto;
height: 800px;
}
.left {
width: 150px;
}
My problem is that when I run the code and I see the result every time when I want to go to a different page (ex.About, Credits, Contacts, and info.) and I want to write some text in and it always positions it to the center and I want it to be left. An example of the problem is shown on the About page.
Comments
Comment posted by Kid Programmer
Thx, but how can I move it a little more to the right and make it an unordered list.
Comment posted by Diako Amir
below the