Header width 100% trop grand - CSS

A voir également:Header width 100% trop grand[CSS] Header width 100% ✓ - Forum - CSS Width du site 1200px, comment mettre un élément width 100% ✓ - Forum - CSS Body> background-image: width 100% = 85% ? ✓ - Forum - CSS Site FullScreen (Width:100% et Height:100%) ✓ - Forum - Webmaster Css équivalent de : " width: 100%-210px; " ✓ - Forum - CSS

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


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

Forum

A voir également:Header width 100% trop grand[CSS] Header width 100% ✓ - Forum - CSS Width du site 1200px, comment mettre un élément width 100% ✓ - Forum - CSS Body> background-image: width 100% = 85% ? ✓ - Forum - CSS Site FullScreen (Width:100% et Height:100%) ✓ - Forum - Webmaster Css équivalent de : " width: 100%-210px; " ✓ - Forum - CSS

Web: www.shapebootstrap.net

1 réponse

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

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> 

Reply

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed