Alignement droit impossible

Sujet résolu

CacaHouette1

16 mai 2017 à 14:24:53

Bonjour,

Je n'arrive pas a aligner correctement une icone sur mon site.

Lorsque je fais un float right l'icone sort de l'ul que j'ai cree et je ne peux pas l'y integrer.

Voici mon code HTML et CSS :

HTML :

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <title>Homepage | My Website</title>
        <link type="image/x-icon" rel="shortcut icon" href="/web/image/website/1/favicon/"/>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
        

            <header>
                    <ul>
                        <li>
                            <a href="index.html"><img class="home" src="https://thelamc.org/images/menu-icons/Menu-icon-home.png"></a>
                        </li>
                        <li>
                            <img class ="logo" src="logo.png" alt="Logo of My Company" title="My Company"/>
                        </li>    
                        <li style="float: right;">
                            <a href="index.html"><img class="sign" src="http://www.freeiconspng.com/uploads/profile-icon-9.png"></a> 
                        </li>              
                    </ul>
            </header>
    <body>
    
    </body>

</html>

CSS :

.html,body,ul {
    margin: 0px;
    padding: 0px;
    height: 100%;
    
}
    
ul{
    list-style-type: none;
    background-color:#f9f9f9;
    border-bottom-style:solid;
    border-bottom-width: thin;
    border-bottom-color: #eeeeee;
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #eeeeee;
}

li a{
    
    display: block;
    color: lightgrey;
    padding: 0px 0px;
    text-decoration: none;
    position: absolute;
    top: 0%;
}

IMG.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

IMG.home {
    margin-top: 6.5%;
    margin-left: 5%;
    display: block;
    width : 20%;
    height: 20%;
    border-radius: 50%;
}

IMG.home:hover{
    background-color:#922471;
    transition-delay: 250ms;
    transition : all 0.75s;
    -moz-box-shadow: 0 0 20px #434343; 
	-webkit-box-shadow: 0 0 20px #434343; 
	box-shadow: 0 0 20px #434343; 
    
}

.sign{
    display: block;
    float: right;
}

.sign:hover{
    background-color:#922471;
    transition-delay: 250ms;
    transition : all 0.75s;
    -moz-box-shadow: 0 0 20px #434343; 
	-webkit-box-shadow: 0 0 20px #434343; 
	box-shadow: 0 0 20px #434343;     
}

Le probleme intervient avec la classe .sign et impossible de le resoudre.

Merci de vos reponses et ne me tapez pas dessus si le code n'est pas correct.

PS : Desole pour les accents j'ecris depuis un pc Finlandais ou les accents francais ne sont pas presents.

stefde3

16 mai 2017 à 15:00:05

Salut,

pour commencer le début de ta balise <body> doit se trouver au-dessus de <header> et pas en-dessous

ensuite sans les images difficile car on sait pas à quoi ressemble ton logo. De plus à quoi ça correspond ton ul là ? un menu ?

De plus on ne met jamais de style dans l'html.

idem, pas la peine de mettre un position:absolute là à ton li a. le a sera toujours dans le </li>. dans la configuration actuelle cet attribut est inutile.

essaye de faire une maquette visuelle de ce que tu veux faire exactement stp

-
Edité par stefde3 16 mai 2017 à 15:05:59

Le CSS ça peut craindre -->Conférence CSS3.CREATE

me_moi

16 mai 2017 à 15:59:11

Bonjour,

Quelques remarques sur le css :

- si tu mets height: 100% sur ul, ta liste occupera toute la hauteur de la page (html, body), mauvaise idée.

- De plus, il faut tout simplement ÉVITER d'utiliser la propriété height le plus possible.

- Pour border (top, right, bottom, left), il existe des propriétés raccourcies.

- Il ne sert à rien de mettre text-decoration: none; si tes liens sont des images et pas du texte (*text-decoration).

- transition, pas sur hover mais sur la propriété de départ, même si le résultat est le même.

Est-ce que ça correspond au résultat que tu souhaites obtenir ?

HTML :

<header>
      <nav>
       <ul>
         <li>
           <a href="index.html">
             <img class="home" src="https://thelamc.org/images/menu-icons/Menu-icon-home.png">
           </a>
         </li>
         <li>
           <img class ="logo" src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" alt="Logo of My Company" title="My Company"/>
         </li>   
         <li>
           <a href="index.html">
             <img class="sign" src="http://www.freeiconspng.com/uploads/profile-icon-9.png">
           </a>
         </li>             
       </ul>
    </nav>
  </header>

CSS :

*
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body
{
  min-height: 100vh;
}

header
{
  min-width: 320px;
}

img
{
  max-width: 100%;
}

ul
{
  list-style-type: none;
  background-color: #f9f9f9;
  border-top: thin solid #eeeeee;
  border-bottom: thin solid #eeeeee;
}

li
{
  width: calc(100% / 3 - 1%);
  display: inline-block;
  vertical-align: middle;
}

li > a > img
{
  transition-delay: 250ms;
  transition: all 0.75s;
}

li > a > img:hover
{
    background-color:#922471;
  box-shadow: 0 0 20px #434343;
}

-
Edité par me_moi 16 mai 2017 à 16:03:07

CacaHouette1

17 mai 2017 à 7:16:05

Merci d'avoir repondu, le resultat voulu aurait ete d'avoir les 3 images alignees horizontalement sur toute la longueur de la page avec a gauche le bouton home, a droite le bouton pour se logger (profile-icon) et au milieu le logo du site.

Merci a tous.

EDIT : Voila des images du site. Comme vous pouvez voir tout ce qui est a gauche fonctionne mais des qu'on scroll a droite c'est la catastrophe

-
Edité par CacaHouette1 17 mai 2017 à 7:20:38

me_moi

17 mai 2017 à 10:14:57

Avec le code que j'ai posté, ça marche parfaitement.

-
Edité par me_moi 17 mai 2017 à 10:19:50

adrienrosi

17 mai 2017 à 10:58:27

Bonjour,

Je te conseille de rapprocher les icônes, trop d'espace nuit à la lisibilité de de ton header, alors qu'il est justement fait pour faciliter la navigation.

Ensuite enlève tes positions: abolute qui sont à manier avec précautions.

Enfin si tu veux vraiment envoyer tes icônes dans tous les coins de ton header, inline-block avec largeur 1/3 pour chacun des éléments <li> de ta liste (<ul>).

Essaye de comprendre tout ça et ne recopie pas du code sans le comprendre.

-
Edité par adrienrosi 17 mai 2017 à 13:57:52

me_moi

17 mai 2017 à 11:07:25

adrienrosi a écrit:

Enfin si tu veux vraiment envoyer tes icônes dans tous les coins de ton header, inline-block avec largeur 1/3 pour chacun des éléments de ta liste (<ul>).

Précises :

Enfin si tu veux vraiment envoyer tes icônes dans tous les coins de ton header, inline-block avec largeur 1/3 pour chacun des éléments (<li>) de ta liste (<ul>).

adrienrosi

17 mai 2017 à 11:16:34

Un élément d'une liste <ul> étant nécessairement un <li>...

me_moi

17 mai 2017 à 13:33:01

Je veux dire mettre inline-block et la largeur sur la balise li et pas sur la balise ul, parce que ton message peut laisser entendre qu'il faut mettre inline-block et la largeur sur la balise ul alors qu'il faut le mettre sur la balise li.

-
Edité par me_moi 17 mai 2017 à 13:33:23

CacaHouette1

18 mai 2017 à 9:20:48

Merci de votre aide ça a fonctionné

Vous m'avez enlevé une belle épine du pied !