It's first time for me asking something here. I just start a week ago learning HTML, CSS, JS, Bootstrap. Took some course on Udemy, and watching a lot of video's on youtube, doing some dummies site to practice and now I'm trying to start a website to help me learning and practice at same time.
The website I want to make is a responsive multi pages Website, once finished it should have over 50 different pages. And it's about a video game not yet released, still in alpha/Beta stage.
What I'm trying to do is to have the same Menu all over the pages and the same header, and will change the image and text for each page. So, I'm trying to build the "Menu + header" template, but I encounter a little problem.
My problem is, I got the menu and header image act like I want them in responsive way. But the text over the image doesn't act like what I need. I want it to stay centered whit the image when you go down in resolution. At the moment the text is moving from center to the right of the image when I go from desktop to mobile. I want it to stay centered at all time.
I found a way to do it whit a CSS rule, but if I have to create a rule for each of the pages, it's going to make a VERY long CSS file and would need many works to be done. Or I could make a CSS file for each of the pages, but that is also going to be painful. It must have a simple way to do it, but can't find it anywhere on the web.
Here is a plunker whit my .html and .css files. Like you can see in the CSS, I put in commentaries the way I found to make it act like I want, but I don't want to do that for each of the many pages I need to create.
Thanks,
/* Body Styles */
body {
}
/* Navbar Styles */
.menu {
background-image: url(../images/pattern-dark.png);
text-transform: uppercase;
}
.menu a {
color: rgb(102, 100, 100) !important;
text-decoration: none;
margin-right: 20px;
}
.menu a:hover {
background-color: rgb(102, 100, 100);
color: white !important;
}
.active a {
background-color: rgb(102, 100, 100);
color: white !important;
}
/* Header Styles */
.header {
position: relative;
width: 100%;
}
.header img {
padding-top: 56px;
width: 100%;
}
.header-title {
position: absolute;
top: 50%;
left: 45%;
font-size: 50px;
color: white;
text-transform: uppercase;
}
/* -- J'y arrive avec ce code, mais ca voudrait dire qu'il faudrais que je créer cette règles pour chacune des pages du site --
.header-title1 {
margin-top: 56px;
position: absolute;
background: url(../images/heros/countess/countess-header-title-01.jpg) no-repeat center 0 / 100%;
height: 100%;
width: 100%;
padding-top: 1.38vw;
padding-left: 2vw;
font-size: calc(100vw / 22);
line-height: 1.145em;
text-transform: uppercase;
text-shadow: 2px 2px rgb(150, 79, 22);
color: rgb(73, 72, 78);
font-family: Arial, Helvetica, sans-serif;
} */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contenue de la page web">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/5a60a68ebe.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<title>Acceuil</title>
</head>
<body>
<nav class="navbar navbar-expand-lg menu navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html"><i class="fas fa-home fa-fw"></i> Acceuil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-sim-card fa-fw"></i> Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user-secret fa-fw"></i> Héros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-hands-helping fa-fw"></i> Guides</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-info fa-fw"></i> Installation</a>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-forumbee fa-fw"></i> Forums</a>
</li>
</li>
</ul>
</div>
</nav>
<section id="header">
<div class="container-fluid header">
<div class="row">
<img src="https://i.ibb.co/pwy1vYQ/countess-header-title-01.jpg" alt="countess-header-title-01"</a>
<div class="header-title">
<h1 class="title">overprime fr</h1>
</div>
</div>
</div>
</section>
<section id="main">
<div class="row">
<div class="container-fluid">
</div>
</div>
</section>
</body>
</html>Patrick
