Menu
Accueil
Forums
Nouveaux messages
En ce moment
Nouveaux messages
Nouveaux messages de profil
Connexion
S'inscrire
Quoi de neuf
Nouveaux messages
Menu
Connexion
S'inscrire
Forums
Loisirs et Entraides
Informatique - Mobile - Jeux
Fonctionnement exacte de la commande “copy” depuis une page web
JavaScript est désactivé. Pour une meilleure expérience, veuillez activer JavaScript dans votre navigateur avant de continuer.
Vous utilisez un navigateur obsolète. Il se peut que ce site ou d'autres sites Web ne s'affichent pas correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
[QUOTE="tadawit, post: 17358463, member: 371934"] Il y a effectivement des attributs qui sont ajoutés par défaut chez Google Chrome. Cela peut créer des espaces blancs dans tes blocs surtout dans le header. Il existe 3 solutions pour éliminer ça. 1) Utiliser un sélecteur universel avec un padding et à margin à 0. [CODE] * { padding: 0; margin: 0; } [/CODE] 2) Utiliser un body avec un padding et un margin à 0. [CODE] body { padding: 0; margin: 0; } [/CODE] 3) Utiliser la méthode brute en ajoutant les attributs du margin avec des valeurs négatives. [CODE] .header { background-color: #470ff4; height: 80px; margin-top: -0.3em; margin-bottom: 0em; margin-left: -0.3em; margin-right: -0.3em; } [/CODE] Ce problème d'espacement ne touche pas uniquement certains navigateurs mais aussi certains IDE online notamment Stackblitz.com. J'ai dû ajouter cette ligne: [CODE] .header { background-color: #470ff4; height: 80px; margin-top: -0.3em; margin-bottom: 0em; margin-left: -0.3em; margin-right: -0.3em; } [/CODE] [URL unfurl="true"]https://angular-ivy-xctcgc.stackblitz.io/[/URL] Voici le code: component.HTML [CODE] <div class="header"> <div class="languageSelect"> <a href="#" *ngFor="let l of supportedLangs;" (click)="switchLanguage(l); false; "> {{ l | uppercase}} <span> | </span> </a> </div> </div> <h2>{{ 'demo.text' | translate }}</h2> [/CODE] component.TS [CODE] @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { supportedLangs: string[]; constructor( private translate: TranslateService, private LS: LocalStoreService, public _location: Location, @Inject(DOCUMENT) private _document: Document ) {} ngOnInit() { this.supportedLangs = ['fr', 'nl', 'en', 'de', 'es', 'it', 'pt']; this.translate.setDefaultLang('fr'); console.log('hello ' + this.supportedLangs); } switchLanguage(lang) { if (lang == 'uk') { lang = 'en'; } this.translate.onLangChange.subscribe((event: LangChangeEvent) => { this.LS.setItem('LX_Current_Language', event.lang); }); this.translate.use(lang); } } [/CODE] component.CSS [CODE] body { margin: 0; padding: 0; } a { text-decoration: none; color: #fff; } .header { background-color: #470ff4; height: 80px; margin-top: -0.3em; margin-bottom: 0em; margin-left: -0.3em; margin-right: -0.3em; } .languageSelect { float: right; right: 75px; position: relative; top: 8px; padding: 25px; } [/CODE] [/QUOTE]
Insérer les messages sélectionnés…
Vérification
Répondre
Forums
Loisirs et Entraides
Informatique - Mobile - Jeux
Fonctionnement exacte de la commande “copy” depuis une page web
Haut