Header width 100% trop grand
AlexMahanakon77
Messages postés
33
Statut
Membre
-
Zero -
Zero -
Bonjour à tous,
je rencontre un problème avec une TODO list que j'apprends à programmer.
Quand je mets en place mon CSS pour le header, je mets une width à 100% et des border-radius arrondies à 5px.
A l'interieur de ce header, un input avec une width à 100%.
Et là je me retrouve avec mon header qui depasse la fenetre. idem pour l'imput.
J'ai essayé d'initiliaser le body à margin 0 padding 0 mais rien n'y fait.
Je suis obligé de mettre un header width à 98% et c'est pas encore tout à fait parfait.
voici mon code
merci pour vos aides, ca m'énerve.
je rencontre un problème avec une TODO list que j'apprends à programmer.
Quand je mets en place mon CSS pour le header, je mets une width à 100% et des border-radius arrondies à 5px.
A l'interieur de ce header, un input avec une width à 100%.
Et là je me retrouve avec mon header qui depasse la fenetre. idem pour l'imput.
J'ai essayé d'initiliaser le body à margin 0 padding 0 mais rien n'y fait.
Je suis obligé de mettre un header width à 98% et c'est pas encore tout à fait parfait.
voici mon code
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 50px;
position: fixed;
padding: 15px;
top: 0;
left: 0;
z-index: 5;
background: #25b99a;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
input.enter {
width: 95%;
height: 50px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: rgba(255, 255, 255, 0.2);
position: left;
border-radius: 5px 25px 25px 5px;
padding: 0 60px 0 0;
border: 0px;
box-shadow: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
merci pour vos aides, ca m'énerve.
Configuration: Windows / Chrome 70.0.3538.110
1 réponse
-
Salut !
C'est le padding du header qui gène.<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; } header { width: 100%; position: fixed; top: 0; left: 0; z-index: 5; background: #25b99a; box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } input.enter { width: 95%; height: 50px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background: rgba(255, 255, 255, 0.2); position: left; border-radius: 5px 25px 25px 5px; padding: 0 60px 0 0; border: 0px; box-shadow: none; outline: none; margin: 15px; -webkit-appearance: none; -moz-appearance: none; } </style> </head> <body> <header> <input class="enter" type="text" name="rfdfd"> </header> </body> </html>
