28172 sujets

CSS et mise en forme, CSS3

Salut ! Je suis en train de développer un Portfolio et j'ai un problème concernant l'arrière plan du site :
upload/1546629487-73875-portfolio.png
Sur l'image eco+ jointe les rectangles rouges représente un espace blanc et vide autour du nav qui ne le relie donc pas directement au Header et au Main et j'aimerais de l'aide pour l'enlever

header {
    display: block;
    width: 100%;
    height : 100%;
    background-image: url("../images/DSC00285.png");
    background-repeat: no-repeat; 
    background-size: cover;
}

body {
    margin : 0;
    width : 100%;
    display : block;
    padding : none;
}

nav {
    padding-top: 10px;
    background-color: #434343;
    background-size: 100%;
    width : 100%; 
}
nav ul {
    display: flex; 
    flex: auto; 
    flex-wrap: wrap; 
    width : 100%;
    padding : 0;
    list-style: none;
    justify-content: space-between; 
}
nav li {
    width : 100px;
    padding : 5px;
}

main {
    background-image: url(../images/DSC00287.JPG);
    background-size: cover;
}


voici mon CSS et merci de me répondre vous m'aiderez beaucoup Smiley confus
Bonsoir,

Est-ce que ça résout le problème si tu supprimes cette ligne :

padding-top: 10px;
Non justement je l'avais rajouté comme "cache misère" si je peux dire.
Le nav avec cette ligne cache le rectangle rouge du dessus
mais j'ai beau essayer je n'arrive pas à enlever celui du dessous Smiley confused
Modérateur
Bonjour,

Il faudrait nous montrer un html minimal associé à ces styles.

Parce que là, c'est une peu "devinette".

EDIT: si le <ul> que semble contenir le <nav> est le seul fils de <nav>, essaie un margin:0 sur ce <ul>.

Amicalement,
Modifié par parsimonhi (07 Jan 2019 - 11:22)