5568 sujets

Sémantique web et HTML

Comment dissocier un div pour en faire deux

bonsoir a tous
j ai un header avec 3 div principal
div left
div centre
div right

dans celui de gauche je vais mettre les icones
dans celui du centre le div de navigation
et dans celui de droite le div pour les réseaux sociaux

Mon soucis est que j en arrive pas a les aligner sur la même ligne
ils sont decales

merci de l aide

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Video Background Transparent Navbar</title>
  <link rel="stylesheet" href="./style.css">
<style type="text/css">
 .main-item
{
  display:inline-block;
  vertical-align:top;
  position:relative;
}
.main-item .sub-items
{
  display:none;
}
.sub-items a
{
  display:block;
}
.main-item:hover .sub-items
{
  display:block;
  position:absolute;
}

.navigation{
  padding-top:30px;
  padding-bottom:30px;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}
.navbar-left{
  float:left;
  padding-left:10%;
  font-size: 150%;
}

.navbar-left a{
  text-decoration:none;
  padding:10px;
  
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-left a:hover{
  text-decoration:underline;
}
.navbar-right{
  float:right;
  padding-right:10%;
  font-size: 150%;
}

.navbar-right a{
  text-decoration:none;
  padding:10px;
  
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-right a:hover{
  text-decoration:underline;
}
.navbar-centre{
  float:center;
  padding-right:10%;
}

.navbar-centre a{
  text-decoration:none;
  padding:10px;
  color: #fff;
  font-family:Arial;
  font-weight:900;
}

.navbar-centre a:hover{
  text-decoration:underline;
}
.navbar-logo{
  padding-left:10%;
  font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
}

.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}

#video-bg{
  width:100%;
 
}


</style>
</head>
<body>
<!-- partial:index.partial.html -->
<header>
  <div class="header">
  <nav class="navigation">
  <div class="navbar-left">
      <a href="#" class="navbar-logo">Logo</a>
	  <a href="#" class="navbar-logo">Logo</a>
	  </div>
      <div class="navbar-centre">
        <div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
		<div class="main-item">
          <a>About</a>
          <div class="sub-items">
            <a href="#">About1</a>
            <a href="#">About2</a>
          </div>
        </div>
        <div class="main-item">
          <a href="#">Blog</a>
        </div>
        <div class="main-item">
          <a>Contact</a>
          <div class="sub-items">
            <a href="#">Contact1</a>
            <a href="#">Contact2</a>
          </div>
		  <div class="sub-items">
            <a href="#">Contact1</a>
            <a href="#">Contact2</a>
          </div>
        </div>
		</div>
		<div class="navbar-right">
		<a href="https://www.facebook.com/axedis" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f232ee949e83eb7ba3_facebook.svg" loading="lazy" alt=""></a>
		<a href="https://www.linkedin.com/company/axedis-eta/" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f3782fc23479738208_linkedin.svg" loading="lazy" alt=""></a>
		<a href="https://www.youtube.com/channel/UCKGtfGpUPjR6mz46p5rbLVw" class="social-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f71e05b083762b3d1965a66_youtube.svg" loading="lazy" alt="" class="yt-icon"></a>
		<a href="tel:010/4353" class="phone-link w-inline-block"><img src="https://assets-global.website-files.com/5f6a84e16028c3635d79f4fd/5f6a84f2bbde5907a1548430_phone.svg" loading="lazy" alt="" class="phone-icon">06 69</a>
      </div>
    

    <div class="video-container">
      <video autoplay loop muted id="video-bg">

        <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">

      </video>
    </div>
  
</header>

</body>
</html>
Modérateur
Salut !

Alors déjà le <div class="header"> et <nav class="navigation"> sont ouvert mais jamais fermé. le .header est inutile vu que tu as déjà le <header> et le bloc nav devrait plutôt venir autour de ton menu a la place de <div class="navbar-centre"> :

<header class="header">
   <div class="header-left">
      /* [...] */
   </div>
   <nav class="navigation">
      /* [...] */
   </nav>
   <div class="header-right">
      /* [...] */
   </div>
</header>


Et sinon pour les aligner tu as plusieurs solutions dont le flex https://www.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html ou le grid https://www.alsacreations.com/article/lire/1388-CSS3-Grid-Layout.html (mais le grid c'est peut être un peu trop poussé pour juste ça). Voici en exemple simple en flex :

https://jsfiddle.net/undless/na20hweu/

Bonne journée Smiley smile
bonjour
Merci pour la reponse et les explications
voila j y suis presque
le menu barre cela a l air de fonctionner
j ai changer le menu entre temps et ajouter une vidéo en arrière plan
mais j ai un soucis avec la vidéo en arrière plan elle ne vient pas occuper toute la longueur de l écran
sous codepen elle occupe toute la longueur , mais une fois dans le navigateur cela ne fonctionne plus

voici le code sous codepen
je sais pas si le lien sera consultable

file:///C:/Users/philippefixe/Desktop/ariapn2/dist/index.html

Merci de l aide
Modérateur
Bonsoir !

flexi2202 a écrit :
file:///C:/Users/philippefixe/Desktop/ariapn2/dist/index.html

Non le chemin local depuis votre disque dur ne nous est pas utile Smiley lol On ne peut pas accéder à votre ordinateur comme ça !

flexi2202 a écrit :
sous codepen elle occupe toute la longueur , mais une fois dans le navigateur cela ne fonctionne plus

SI le site n'est pas encore en ligne l'ideal serait de copier le code dans un jsfiddle comme j'ai fait https://jsfiddle.net/ ou meme sur codepen https://codepen.io/pen/ pour qu'on puisse voir le même code et le même rendu que vous.

Smiley smile
Modérateur
flexi2202 a écrit :
mais j ai un autre soucis je n arrive pas a centrer le site entier

Alors pour centrer les header (vu qu'il ne fait que 80%) il faut rajouter margin: 0 auto;
.header {
  display: flex;
  width:80%;
  text-align: center;
  margin: 0 auto;
}

Pour la vidéo soit tu fait aussi un 
margin: 0 auto;
soit tu la mets a 100% ca sera peut etre plus joli Smiley smile
flexi2202 a écrit :
et je n arrive pas a centrer le div de droite pour qu il soit centrer de façon verticale et horizontal

Pour ca tu peux aussi utiliser le flex. Donc rajouter un display: flex; centrer horizontalement avec justify-content: center; et verticalement avec align-items: center;
.header-right {
    background: green;
    width: 25%;
    padding-right: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
}


Bonne nuit !
bonsoir Laurent
parfait un tes grand merci

il y a juste encore dans le menu de gauche je n arrive pas a laisser un espace entre les deux logos
j y suis arrive a droite avec les icones des réseaux sociaux j ai fait ceci
.social-link {
margin-right:21px;


pour la vidéo tu as raison je vais la laisser en plein écran


j essaye d ajouter un div"conteneur1" en dessous de ce menu et de cette video avec les même paramètres que le div header et cela fonctionne
mais il vient ce mettre sur la video
j aurais donc aimer le décaler sous la vidéo
dans le code original que j ai pris pour exemple pour décaler la div du haut ils utilisent la fonction margin-top
mais apparemment margin: 0 auto;
empêche le margin-top

ce qui est bizarre c est que j ai mis ce conteneur1 sous la balise header
justement pour éviter qu il ne vienne dans le haut
encore merci

Bonne journée
Modifié par flexi2202 (03 Dec 2020 - 09:41)
Sujet clos
Aller à