28202 sujets

CSS et mise en forme, CSS3

Bande blanches

upload/1511532253-68584-capture.png Salut, alors voilà, je suis totalement débutant et pour les cours je dois réaliser un site...

Mon problème est ces deux bande blanches en haut et à droite...Comment je fais pour les enlever ?

Merci ! 



#photoaccueil {
	width: 100%;
    height: 100%;
	
    
}

body {
	margin:0px;
	padding:0px;
	
}

li {
	list-style:none;
	text-align:center;
	top:38;

}

a {
	color:black;
	text-decoration:none;
	display:block;
	width: 200px;
	background-color:#ccc;
	padding:10px;
	float:left;
	
	
}

a:hover{
	background-color:#737373;
}

li ul {
	position:absolute;
	display:none;
	
}
#ul-bloc {
	left:220px;
	top:38px;
}

#ul-prof {
	left:440px;
	top:38px;
}

li:hover ul {
	display:block;
}

nav{
	text-align:center;
	top:38px;
	position:relative;
	left:80px;
}

Modifié par CrealisGC (24 Nov 2017 - 15:04)
Bonsoir alian00958,
il serait plus simple de corrigé ton html si tu le publiais...

sinon tu trouveras les deux solutions possibles sur cette page:
https://css-tricks.com/perfect-full-page-background-image/

La plus ancienne et qui fonctionne sur tout les navigateurs est celle qui utilise <img>
Le principe est de mettre l'image en arrière plan en utilisant le z-index, positionnée en fixed, et surtout de ne préciser que la largeur de l'image avec 100% ( la hauteur de l'image sera redéfinie automatiquement en respectant le ratio hauteur/largeur initial!

exemple:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            img.fond {
                position: fixed;
                width: 100%;
                top:0;
                left:0;
                z-index:-1;
            }
            .menu {
                position: fixed;
                left: 0;
                top: 50px;
                width: 100%;
                height: 30px;
                background-color: gray;
                color: white;
                font-weight: bold;
                font-size: 1.5em;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            MENU
        </div>
        <img class="fond" src="images\la_photo.jpg" />
    </body>
</html>


Bonne soirée,
GJboba
allan00958 a écrit :
Je vois pas trop.

Tu peux essayer un reset simple:


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

C'est ça qu'on apprend en autodidacte ? Smiley cligne
Il ne faut jamais utiliser ce reset qui oblige à reskinner toutes les balises
bzh a écrit :
C'est ça qu'on apprend en autodidacte ? Smiley cligne
Il ne faut jamais utiliser ce reset qui oblige à reskinner toutes les balises

Bin justement...
J'utilise systématiquement cette réinitialisation dans tous mes sites au boulot, histoire d'être sûr que ce que je demanderai comme affichage sera bien ce que le navigateur affichera.
Et jusqu'à présent cela me convient parfaitement.
Bonjour.

bzh a écrit :

C'est ça qu'on apprend en autodidacte ? Smiley cligne
Il ne faut jamais utiliser ce reset qui oblige à reskinner toutes les balises


Pour les margin et padding, je ne suis pas convaincue que c'est nécessaire mais pour le box-sizing, il faut avouer que c'est bien pratique.
Il y a cet article de M. Goetter qui date un peu :
https://blog.goetter.fr/2012/07/27/box-sizing-et-pourquoi-pas/

Cela dit, il est vrai qu'on se repose beaucoup sur la puissance des machines…

Smiley smile
Merci à @sepecat et @Zelena pour leur soutien.

Je suis pas le seul à utiliser l'astérix pour bien cibler tous les éléments. Il a aussi le reset d'Eric Meyer qui est bien pratique.
Je pensai que plus personne n'utilisait ce genre de reset depuis très longtemps. Cette pratique sert surtout à combler une certaine méconnaissance des css et cela ne garantit pas un affichage consistant dans tout les navigateurs mais enlève juste toutes les marges sur toutes les balises, "l’intérêt" c'est de partir d'une base plate. Si ensuite vous ne réappliquez ces marges cela rend inutilisables/moches toutes les balises que vous ne penserez pas à remettre en forme.

Aujourd'hui, il y a des outils comme normalize qui permettent d'avoir un rendu consistant sans tout aplatir.

@Zelena le box-sizing est plus compréhensible en effet.

Et pardon mais en quoi l'utilisation d'un reset répond à la question ? Vas y essaye ça au pif et peut être que ça marchera ou pas. Ça ne part certainement pas d'un mauvais sentiment mais plus le temps passe dans cette communauté et plus je me demande ce que l'on cherche à offrir donner ici ? On s'éloigne beaucoup des bonnes pratiques et des standards ici...
Modifié par bzh (25 Nov 2017 - 09:51)
@bzh

Ben au moins j'essaie de trouver une solution contrairement à toi qui ne propose RIEN et cherche juste à rabaisser les autres parce que MR a fait de grandes études à Harvard et ne jure que par les études parce que on apprend absolument TOUT quand on fait des études. Il me semble qu'on a eu un petit "accrochage" dans un autre topic.

Lorsque j'ai répondu au sujet je n'avais pas le HTML ni le CSS donc j'ai proposé une solution vite fait. Ce n'est pas comme cela que j’intègre. J'utilise un normalize, reset ou bootstrap qui gère pas mal de cas.

Et pardon mais en quoi l'utilisation d'un reset répond à la question ? Vas y essaye ça au pif et peut être que ça marchera ou pas. Ça ne part certainement pas d'un mauvais sentiment mais plus le temps passe dans cette communauté et plus je me demande ce que l'on cherche à offrir donner ici ? On s'éloigne beaucoup des bonnes pratiques et des standards ici...

Un reset pourrait ou pas être la solution. Justement, on essaie de trouver le problème. Et on essaie jusqu’à ce qu'on trouve au lieu de balancer des "C'est ça qu'on apprend en autodidacte ?" pour se sentir supérieur.

Ce que devient cette communauté, ben j'ai remarqué 3 mentalités:
-ceux qui ne veulent pas apprendre et veulent juste une solution à leur topic
-ceux qui veulent apprendre
-et ceux qui ne proposent AUCUNE solution et veulent juste rabaisser les autres en critiquant leurs parcours et ceux-la sont de plus en plus nombreux.

Entre temps je suis le SEUL dans ce topic qui essaie d'aider CrealisGC.
@CrealisGC

Je te propose ceci:

-en fait, c'est une image de fond, place la sur la balise body avec background-image: url() background-repeat: no-repeat, background-attachment: fixed

- tu peux si besoin ajouter un css reset ou normalize
Modifié par allan00958 (25 Nov 2017 - 10:27)
bzh a écrit :
Cette pratique sert surtout à combler une certaine méconnaissance des css

La condescendance de Sa Seigneurie est trop bonne...
C'est, justement, par connaissance du cycle feuille de style CSS / navigateur que les concepteurs utilisent cette réinitialisation.
Si les navigateurs estiment que les bordures de boutons doivent avoir un arrondi de X pixels, ou que la marge doit être de telle valeur, quitte à la changer en cours de route à leur bon vouloir, je dois m'en contenter et m'apercevoir "après coup" que ma mise en page à changé. Ce qui, au passage, m'obligera à surcharger a posteriori la propriété en question .
Je préfère, et de loin, fixer dès le départ les règles du jeu et informer le navigateur que c'est moi qui décide de ladite mise en page et pas lui. Déjà qu'on a du mal à lui faire entendre raison dans certains cas, autant être précis.
Je ne sais pas quel est ton parcours professionnel / personnel, mais, franchement, le ton "je sais et vous êtes des nases" paraît quelque peu déplacé. Il y a tellement de façons de faire différentes en matière de HTML / CSS et autres qu'il est souvent utile de voir ce que les autres font et s'en inspirer si cela fonctionne. Maintenant, si tu est sûr de toi et de tes pratiques, continues dans cette voie.
Avec presque quarante ans d'expérience professionnelle, si tu savais le nombre de choses que je croyais acquises et que je modifie en permanence pour m'adapter aux réalités du moment... Cela évite de brûler son kérosène en pure et perte et regarder les autres de top haut.
@sepecat, tu confonds reset et uniformisation. Et réinitialiser tout les marges et paddings ne résous aucun problème d'uniformisation. Ce n'est qu'une façon de faire qui apporte plus d'inconvénient que d'avantages :

- cela crée du code redondant en éliminant toutes les marges puis en les redéfinissant derrière. Ben oui car il faut de toute façon tout remettre en forme.
- cela nécessite de remettre en forme toutes les balises présentes et futures
- cela complexifie le code

L'avantage c'est que tu pars de zéro et n'a donc pas à savoir quel éléments se présentent de telle ou telle manière. Donc oui, cela traduit une certaine méconnaissance à mes yeux effectivement.

Aussi, il est intéressant de se poser la question des éléments qui sont effectivement à mettre en forme lorsque l'on crée une page web. Regardez ici :
https://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html
Cela ne va pas vous prendre la journée de mettre en forme des éléments de base d'un site web.

D'autre par je rappelle que c'est ok d'avoir des différences entre navigateur et qu'il ne faut réinitialiser tout les styles des navigateurs (comme les focus par exemple). Très mauvaise pratique pour l'accessibilité entre autre.

Pour finir le reset avec le sélecteur universel est vraiment le plus basique et ancien qui soit, je ne vois pas trop en quoi il est adapté aux réalités du moment. Plutôt la réalité d'il y a 10 ans où on avait des navigateurs archaïques et des solutions en adéquations.

Désolé, allan00958, mais je ne comprends pas pourquoi tu proposes des solutions vite fait alors que tu sais qu'elle sont mauvaises/ne les utilises pas toi même. Le minimum c'est au moins d'expliquer ce que ça fait quand on poste un code pareil, ce que je ne me priverai jamais de faire excusez sa seigneurie. D'autre part je rappelle qu'il n'y a pas suffisamment de code, comme précisé dès la première réponse et le but n'est pas de répondre à tout prix à toute les questions de n'importe quelle manière mais de bien y répondre, ce que vous ne faîtes pas désolé de le souligner encore.

Désolé, d'avoir été condescendant encore, vous n'en mourrez pas. Smiley cligne
@bzh

Oui j'ai posté une réponse vite fait sans trop expliquer, parfois je prends le temps d'expliquer et parfois non. Certains utilisateurs veulent une solution vite fait alors je propose une solution vite fait, peut-être devrais-je faire attention....

"Solutions mauvaises" ? La question n'est pas là. Je propose une solution, c'est tout. Un petit reset ne va tuer personne, surtout si c'est un petit projet, ce qui me semblait le cas ici.

Je ne réponds pas à toutes les questions du forum. Sur certains sujets, j'ai été plus explicatif. Tu généralise par rapport à un sujet. Tout cela ne change pas le fait, que tu es incapable t'aider CrealisGC et que tout ce qui t’intéresse est de rabaisser les autres, désolé de le souligner encore.
Ben voilà, j'ai complété avec arguments, 3 fois. Pas besoin de venir pleurnicher pour ça. Sérieux vos problèmes d'égos et de condescendance sont totalement hors sujet, il faut accepter la contradiction.
Et avec toutes tes connaissances, tu n'as même pas pu offrir une solution à l'auteur du topic. Tu n'as fait que parler de toi, 3 fois. Il faut accepter la triste mentalité de certains développeurs.
bzh a écrit :
Ben voilà, j'ai complété avec arguments, 3 fois. Pas besoin de venir pleurnicher pour ça. Sérieux vos problèmes d'égos et de condescendance sont totalement hors sujet, il faut accepter la contradiction.

Sérieux ?
La contradiction ne me dérange pas, bien au contraire, dès lors qu'elle se passe d'égal à égal ce qui, à la lecture des réponses, ne semble pas être la tonalité adoptée.
Ton avant dernier message me paraissait plutôt mesuré, même si je ne suis toujours pas convaincu sur le fond.
Par contre, là tu charries.
Il se trouve qu'en ce moment je "bouffe" de la vidéo à plein régime sur HTML / CSS histoire de définir de quelle manière je vais développer mes composants pour le générateur et, crois le ou non, la réinitialisation des marges externe / interne à 0 c'est gosso modo du 50 / 50 dans ce que je visionne, tous niveaux confondus.
De deux choses l'une : soit les gars en question sont restés bloqués dans un espace temps quelconque faisant qu'à tes yeux ils sont "has been" et n'ont rien compris à la problématique actuelle, soit ils considèrent que les déclarations en question correspondent parfaitement à leurs besoins réels.
Pour ma part, je me garderai bien de dire s'ils sont complètement dépassés ou en avance sur leur temps (et le tien par la même occasion), dans la mesure où la seule finalité qui compte c'est d'obtenir in fine pour l'utilisateur un design correspondant à celui qu'on a conçu. Le reste n'est qu'histoire de point de vue à forte subjectivité.
Sujet clos
Aller à