Header width 100% trop grand
AlexMahanakon77
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
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
A voir également:
- Header width 100% trop grand
- Photo insta en grand - Guide
- Trier du plus petit au plus grand excel - Guide
- 100 mo en go - Forum Mobile
- 100 mb en mo ✓ - Forum Matériel & Système
- Formate pour taxer client 100€ - Forum PDF
1 réponse
Salut !
C'est le padding du header qui gène.
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>