Problème arrière plan CSS

5 janvier 2019 à 13:00:02

Salut ! Je suis en train de développer un Portfolio et j'ai un problème concernant l'arrière plan du site :

Sur l'image eco+ ci jointe les rectangles rouges représentent 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 {
    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

Serkox

5 janvier 2019 à 13:30:29

Bonjour, pourrais tu mettre ton code HTML ?

Merci d'avance

#Avgeek

OggySan

5 janvier 2019 à 15:12:11

J'ai plusieurs pages donc le Html est toujours différant mais voici là page d'accueil

<!DOCTYPE html> 
<html>
    <head>
        <title>titre.</title>
        <meta charset="utf-8" /> 
        <meta name="description" content="page de présentation"/>
        <link rel="shortcut icon" href="favicon" type="image/x-icon" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>
    <body>
        <header><img src="images/PortfolioTexte.svg" id="portfolio" alt="portfolio" /> </header>
        <nav>
            <ul>
                <li>
                    <a href="index.html"><img src="images/accueil.svg" title="Accueil"/></a>
                </li>
                <li>
                    <a href="moi.html"><img src="images/presentation.svg" title="Presentation"/></a>
                </li>
                <li>
                    <a href="competances.html"><img src="images/competences.svg" title="Compétences"/></a>
                </li>
                <li>
                    <a href="portrait.html"><img src="images/portrait.svg" title="Portrait Chinois"/></a>
                </li>
            </ul>
        </nav>
        <main id="siteMoi" >
            <img src="images/autoportrait.png" id="moi" alt="autoportrait illustrant l'auteur" />
            <img src="images/logo.png" id="logo" alt="Logo" />
            <video src="/videos/Parcoursup.mp4" controls />
        </main>
        <footer>
            <p>Site créé par Oggysan, dans le cadre du projet de Portfolio lors de la séssion de la première année de DUT 2018-2019. Tout droit réservé.</p>
        </footer>
    </body>
</html>

le principal y est.

Serkox

5 janvier 2019 à 16:12:27

Pour y remédier voici une solution :

<!DOCTYPE html>
<html>
    <head>
        <title>titre.</title>
        <meta charset="utf-8" />
        <meta name="description" content="page de présentation"/>
        
    </head>
    <body>
        
        <header>

            <nav>
                <ul>
                    <li><a href="" title="">dddd</a></li>
                </ul>
            </nav>
            
        </header>
        <article>
            dddd
            
        </article>

    </body>
</html>

 header{
                border:2px solid red;
            }

            article{
                border:2px solid green;
            }

Je te fais un exemple, je te laisse l'adapter a ta page.

Je te conseil également de revoir ton code, certaine propriété et balise sont inutiles.

En espérant t'avoir aidé, si tu as des questions n'hésite pas

Bonne journée !

#Avgeek

OggySan

5 janvier 2019 à 17:26:31

J'avais eu en effet cette idée là.

Le problème étant que l'arrière plan du header et du man ne sont pas des couleurs unies or le border recouvrira certes les rectangles bancs mais sera d'une couleur sans rapport à l'arrière plan.

Serkox

5 janvier 2019 à 17:43:43

J'ai mis ici des borders, pour que tu puisse essayer cette exemple et te rendre compte de ce que ça fait, tu peux tout à fait les retirer et mettre des couleurs, images en background.

#Avgeek

OggySan

5 janvier 2019 à 18:10:34

et comment on met les borders de la même image que le background ?

Serkox

5 janvier 2019 à 18:13:00

Les border tu les supprime, tu mets ton background dans le css

header{
               background-image: ...
           }
 
           article{
               background-image: ...
           }

#Avgeek

OggySan

5 janvier 2019 à 18:21:10

Ok alors je crois il y a eu méprise.

Le background est déjà définit dans le header et dans le main. Il y a juste 2 lignes blanches autour du nav (qui est entre le main et le header) que je n'arrive pas à enlever. Je souhaite donc que ces lignes blanches soient une "extension" du background qu'elle touche et non de simple lignes blanches.

Serkox

5 janvier 2019 à 18:23:59

Je pensais que tu voulais supprimer les lignes blanches pour que le tout soit collé :x

Tu n'as pas besoin de définir l'image dans le CSS ET dans l'HTML, un seul suffit.

Si j'ai bien compris tu veux que le background occupe également les lignes blanches ?

#Avgeek

OggySan

5 janvier 2019 à 18:59:35

C'est ça, je veux juste enlever ces ligne peu importe la façon

les arrières plan sont déjà définis mais ne comblent pas les lignes blanches

Serkox

5 janvier 2019 à 19:18:45

Et bien ce que j'ai proposer au début fait exactement ce que tu cherches

#Avgeek

OggySan

5 janvier 2019 à 19:27:16

ça ne marche pas

j'aurais besoin de plus d'explications SVP :-(

Serkox

5 janvier 2019 à 20:03:43

Humm si j'ai bien compris tu souhaite obtenir quelque chose qui ressemble à ceci :

Car ca me parait flou :/

#Avgeek

OggySan

5 janvier 2019 à 20:23:10

le nav n'est pas dans le header mais entre le header et l'article

or il y a des barre blanches autour du nav qui ne devraient pas y être :'-(

Hizu

5 janvier 2019 à 22:06:19

padding:0;

margin:0;

}

Il faut penser à faire un reset du css. Renseigne toi sur les bonnes pratiques pour tout bien faire ce que je donne n'est que la solution facile.

OggySan

5 janvier 2019 à 22:16:21

J'ai beau mettre des paddings 0 et des margins 0 partout rien ne change :-(

Hizu

5 janvier 2019 à 22:19:14

Tu mets bien ce morceau de code css en debut de fichier css ?

*{
padding:0;
margin:0;
}

OggySan

5 janvier 2019 à 22:28:23

d'ailleurs si je fais F12 les rectangles blancs ne sont ni des paddings ni des margin ni des border

Hizu

5 janvier 2019 à 22:32:15

Sur mon poste avec la console F12 ce sont des margin de 16 px present sur ul. Et il suffit que je mettes sur le ul présent dans le nav un margin 0 pour que le bloc se colle.

OggySan

6 janvier 2019 à 0:56:37

oui

Lamecarlate

6 janvier 2019 à 9:25:51

* {
padding:0;

margin:0;

}

Il faut penser à faire un reset du css.

Ahhhh non, surtout pas.

Surtout pas comme ça. Sortir le bazzoka pour buter une mouche c'est une très, très mauvaise idée.

Dans le cas actuel, mettre margin: 0 sur nav ul suffira amplement.

Pas d'aide concernant le code par MP, le forum est là pour ça :)