5568 sujets

Sémantique web et HTML

[Résolu] Header avec image

hello tout le monde j'espere que ça va bien Smiley cligne
alors mon problème est
. je souhaiterais faire un header (lien et image en triangle en dessous des liens)

.mais le soucis est , quand je met l' image dans le code , l'espace entre le menu et les images sont immense. j'ai essayé line-height et margin ceci ne marche pas ou bien je l'ai mal fais ce qui serai possible.

en tout cas merci beaucoup d'avance de vos réponse

html

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="image.css">
</head>
<body>
    <nav>
<ul>
    <li>aaaaa</li>
     <li>aaaaa</li>
      <li>aaaaa</li>
</ul>
<img src="image.png" alt="">
    </nav>
</body>
</html>


css 


body{
    margin:0px;
    padding:0px;
    background-color: green;
}



img{
    width:100%;
}
ul{
    width:100%;

}
ul > li{
    float:left;
    width:33%;
    
}
Modérateur
Salut !

Immense comment ? Par defaut sur les ul il y a du padding et du margin. Tu peux les enlever en les mettant a 0.

Sinon pour placer tes li utilise plutôt inline-block que float :
ul{
    padding: 0;
    margin: 0;
}
ul > li{
    display: inline-block;
}

Ou bien flex si jamais tu veux que les menus prennent toute la place dispo :
ul{
    padding: 0;
    margin: 0;
    display: flex;
}
ul > li{
    flex: 1 1;
}
upload/1597219881-80768-capture.jpg déjà merci pour la réponse ultra rapide , rien de mieux qu'une image pour montrer l'espace entre les liens et l'image.
Modifié par magadix (12 Aug 2020 - 10:11)
Modérateur
Smiley eek ah ouais quand même... wtf ?! y'a rien d'autre dans ton CSS ?

Juste au hasard, ton image aurait pas plein de place transparente en haut ? Elle fait pile la taille du triangle ?
Modifié par _laurent (12 Aug 2020 - 10:34)
re , ba je les decoupé sur photoshop ; (calque par copier) et je les exporter en png peut être que cela vient de là ?
Modérateur
magadix a écrit :
re , ba je les decoupé sur photoshop ; (calque par copier) et je les exporter en png peut être que cela vient de là ?

Il faut que tu recadre le plan de travail pour ne pas laisser du "blanc" au dessus
Meilleure solution
Modérateur
Bonjour,

Pour savoir si l'image contient du "blanc" dans sa partie haute, on peut ajouter provisoirement dans le css :
img {outline: 5px solid red;}

Ça permet d'avoir rapidement une idée de la place que prend l'image.

Amicalement,
Sujet clos
Aller à