Problème affichage titre HTMl/CSS
Khamazah
-
uniuc Messages postés 327 Statut Membre -
uniuc Messages postés 327 Statut Membre -
Bonjour,
Je suis en plein test d'une création d'une page web, j'aimerai mettre un titre au-dessus de ma barre d'icones, mais elle s'affiche toujours côté droit, même en mettant un "text-align" sur le h1.. Comment puis-je faire pour résoudre ce problème ? Merci beaucoup :)
Voici les codes sources :
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Bienvenue</h1> <div class="navigation"> <ul> <li class="list active"> <a href="https://Google.com"> <span class="icon"> <ion-icon name="logo-google"></ion-icon> </span> <span class="text">Google</span> </a> </li> <li class="list"> <a href="https://ecampus.hainaut-promsoc.be/"> <span class="icon"> <ion-icon name="school-outline"></ion-icon> </span> <span class="text">E-Campus</span> </a> </li> <li class="list"> <a href="https://www.youtube.com/"> <span class="icon"> <ion-icon name="logo-youtube"></ion-icon> </span> <span class="text">YouTube</span> </a> </li> <li class="list"> <a href="https://www.takeaway.com/"> <span class="icon"> <ion-icon name="pizza-outline"></ion-icon> </span> <span class="text">Snacks</span> </a> </li> <li class="list"> <a href="https://fr-fr.facebook.com/"> <span class="icon"> <ion-icon name="logo-facebook"></ion-icon> </span> <span class="text">Facebook</span> </a> </li> <div class="indicator"></div> </ul> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> </body> </html>
CSS :
@import url ("https://fonts.googleapis.com/css?family=Sofia");
* {
margin: 0;
padding: 0;
box-sizing: border-box
font-family:"Sofia", sans-serif;
}
:root
{
--clr:black;
}
body {
display :flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background; var(--clr);
background-color: lightblue;
}
h1 {
text-align: center;
font-size: 45px;
font-family: Arial, Helevetica, sans serif;
}
.navigation
{
width: 400px;
height:70px;
background : white;
position: relative;
display: flex;
justify-content: center;
align-items:center;
border-radius: 10px;
}
.navigation ul
{
display : flex;
width: 350px;
}
.navigation ul li
{
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
}
.navigation ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
}
.navigation ul li a .icon
{
position: relative;
display: block;
line-height: 75px;
font-size: 1.5em;
text-align: center;
transition: 0.5s;
color: var(--clr);
}
.navigation ul li:hover a .icon
{
transform: translateY(-35px);
}
.navigation ul li a .text
{
position: absolute;
color var(--clr);
font-weight: 400;
font-size: 0.75em;
letter-spacing: 0.05em;
transition: 0.5s;
opacity: 0;
transform: translateY(20px);
}
.navigation ul li:hover a .text
{
opacity: 1;
transform: translateY(10px);
}
EDIT MODERATION : Ajout des BALISES DE CODE
A voir également:
- Problème affichage titre HTMl/CSS
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Editeur html - Télécharger - HTML
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
2 réponses
Bonjour,
@mariam-j
C'est à éviter, ça date des temps ancien, on ne place plus le style à meme le HTML, le css est là pour çà.
@Khamazah
Ton problème est simple, pour le moment tu dit à tes éléments de suivre le flux naturel de la page.
Il te suffit de placer tes éléments de body en colonnes, en rajoutant dans ton css body
flex-direction: column;
Après tu peux aussi rajouter sur .navigation un petit margin-top pour aérer ton ensemble.
margin-top: 10px;
