28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement des div en CSS et responsive

Bonjour, je sollicite votre aide car j'ai mes div icons et socialmedia qui n'arrivent pas à s'aligner lorsque la fenêtre est réduite. Je souhaite donc les rendre responsive. Celles-ci prennent églement beaucoup de place au point de créer un espace vers la droite comme dans la photo suivante:
upload/1642317757-84026-fo3.png

Lorsque la fenêtre est en taille normale:
upload/1642317698-84026-fo1.png

Lorsque la fenêtre est réduite:
upload/1642317721-84026-fo2.png

Voici mon CSS:


.search_main{ width: 78%; float: right; }
.logo{
  position: relative;
  background: url('amnirlogo1.jpg');
  background-repeat:no-repeat;
  width: 180px;
  height: 160px;
  left:5%;
}

.socialmedia{
  display:inline-block;
  width: 100%;
 position: relative;
 left: 30%;
top: 40px;
}

.langues{
  color: blue;
  font-weight: bold;
  margin-left:5px;
  font-size: 12px;
  text-decoration: none;
  outline: none !important;
}
.language{
  width: 100%;
  position: relative;
  bottom: 150px;
  left: 50%;
}


Voici mon code html:
<div class= "sousnav">

<div class="col-sm-6 col-lg-3">
					<div class="search_main">
                    <button class="submit_bt"><a class='depot' href="formannonce.php"><span class="doctor"><i class='fa fa-plus white-color'></i></span> Déposer une annonce</a></button>
				    </div>
				</div>


        <div class="nav-item">
                <a class="nav-link" href="connexion.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Connexion                  </span>
                </a>
        
                <a class="nav-link" href="register.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Inscription                  </span>
                </a>
</div>



<div class="socialmedia">
<a href="#"><i class="fab fa-facebook-f "></i></a>
  	 				<a href="#"><i class="fab fa-twitter"></i></a>
  	 				<a href="#"><i class="fab fa-instagram"></i></a>
  	 				<a href="#"><i class="fab fa-linkedin-in"></i></a>

</div>


<div class ="LatinLanguage">

<h1 class="logo"></h1>
<div class="language">
<i class="fa fa-globe" aria-hidden="true"></i>
<a class= "langues" href="accueil.php?lang=fr"> Français </a>
<a class= "langues" href="accueil.php?lang=en">English </a>
<a class= "langues" href="accueil.php?lang=es">Espagnol</a>
</div>

</div>


</div>
Hello Max30,

Il faut que tu te structures différemment. Utilise plutôt les Display GRID et/ou FLEX.
rapidement refait =>

<div class= "sousnav">

    <div class="nav-item">
        <a class="nav-link" href="connexion.php">
          <i class="fa fa-user" aria-hidden="true"></i>
             <span> Connexion </span>
        </a>
        <a class="nav-link" href="register.php">
          <i class="fa fa-user" aria-hidden="true"></i>
             <span> Inscription </span>
        </a>
    </div>

    <div class="search_main">
        <button class="submit_bt"><a class='depot' href="formannonce.php"><span class="doctor"><i class='fa fa-plus white-color'></i></span> Déposer une annonce</a></button>
   </div>  
       
    <div class="socialmedia">
        <a href="#"><i class="fab fa-facebook-f "></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-linkedin-in"></i></a>    
    </div>
        
    <div class ="LatinLanguage">    
         <!-- <h1 class="logo"></h1> -->
         <div class="language">
            <i class="fa fa-globe" aria-hidden="true"></i>
                <a class= "langues" href="accueil.php?lang=fr"> Français </a>
                <a class= "langues" href="accueil.php?lang=en">English </a>
                <a class= "langues" href="accueil.php?lang=es">Espagnol</a>
         </div>
     </div>       
</div>


Et pour le CSS

body{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
.sousnav{
    background-color: rgb(231, 235, 212);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "connect connect connect"
        "social lg search"    ;
    height: 100px;
}
.nav-item{
    grid-area: connect;
    display: flex; /* on remet en flex */
    justify-content :flex-end; /* on aligne les items dans flex*/
    padding-right: 20px;
}
.search_main{
    grid-area: search;  
    display: flex; /* on remet en flex */
    justify-content :flex-end; /* on aligne les items dans flex*/
    padding-right: 20px;  
}
.socialmedia{
    grid-area: social;
    display: flex; /* on remet en flex */
    justify-content: end;
    align-items: center;
    background-color: cyan;
}
.socialmedia i{
    padding-right:5px;
}
.LatinLanguage{
    grid-area: lg;
    background-color: rgb(46, 207, 40);
    display: flex; /* on remet en flex */
    justify-content: center;
    align-items: center;
}


Bon courage !
Bonjour gesualda, merci beaucoup! ça a marché. C'était une bonne idée également de mettre en couleur les div afin de pouvoir les positionner. Grand merci Smiley smile
Sujet clos
Aller à