28172 sujets

CSS et mise en forme, CSS3

[Résolu] Exception aux éléments de type block ??

Bonjour bonjour !

Nouveau problème aujourd'hui : j'ai un input de type text déclaré en display:block, et celui-ci ne prend pas toute la largeur disponible !
En le visualisant avec l'inspecteur d'éléments une marge droite de 37px apparaît comme par magie pour que la largeur calculée soit de 150px. Je dis "calculée" car ce fameux 150px n'apparaît dans aucun css, pas même celui de l'user-agent.

Comme cet effet est visible sur tous les navigateurs je pense que j'ai du rater quelque chose, mais je ne vois pas quoi Smiley ohwell

Voici mon css concerné :

form, fieldset, a img {
	padding:0;
	margin:0;
	border:none;
}
form#searchpanel fieldset {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background-color:#badff2;
	padding:20px;
}
form#searchpanel input#s {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:inset 1px;
	display:block;
	height:22px;	
	padding:1px 0 1px 22px;
	margin:0 0 10px;
	color:#999;
	font-weight:bold;
	background:#fff url(../images/loupe.png) left center no-repeat;
}


Merci d'avance !
Modifié par MatTheCat (18 Feb 2010 - 17:48)
Ça marche ; je mets tout y'en a pas des masses :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="css/default.css" media="all" />
        <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
        <title>DVDWorld - Accueil</title>
    </head>
	<body>
		<div id="body_wrapper">
			<div id="header">
				<div id="logo">
					<a href="index.php"><img src="images/logo.png" alt="" /></a>
				</div>
				<div id="options">
					<ul class="right">
						<li><a href="index.php">Votre compte</a>
						<ul>
							<li><a href="index.php">Identification</a></li>
						</ul>
						</li>
					</ul>
					<div class="right">
						<a href="index.php">Inscription</a>
						 | 
						<a href="index.php">Identification</a>
					</div>
				</div>
			</div>
			<div id="bodyholder">
				<div id="sidebar">
					<form id="searchpanel" action="index.php" method="get">
					<fieldset>
						<input type="text" name="s" id="s" />
						<button type="submit" class="blue">Chercher</button>
					</fieldset>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

Et donc c'est au niveau du form#searchpanel que ça foire.
Salut,

Ca provient des styles par défaut des navigateurs. Sur Firebug par exemple, le style calculé me dit que l'input a une largeur de 163px. Donc si tu veux vraiment qu'il prenne toute la largeur, il faut lui donner une largeur de 100% toi-même.
Le style par défaut ne correspond pas à l'"user-agent stylesheet" ?
Et le problème c'est que le padding du fieldset empêche l'utilisation du width:100%.

Y'a-t'il moyen de rétablir le comportement par défaut d'un élément de type block ou vais-je être obligé de fixer une largeur avec un margin:auto ?
Salut,

la particularité des éléments inline "remplacés" (INPUT, IMG, TEXTAREA, SELECT et OBJECT) est qu'on peut leur affecter des dimensions sans avoir besoin de leur affecter un display:block.

Par contre cette déclaration permettra de faire width:98% et margin: 0 auto
Modifié par Heyoan (18 Feb 2010 - 17:21)
Les éléments remplacés input ont une largeur dépendante du font-size.
Pour lui faire prendre toute la largeur, tu dois lui attribuer un width: 95% par exemple.
Sujet clos
Aller à