Taille d'un input

**Yepazix** · 27/11/2013, 16h57

Bonjour,

Dans une page je fais ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" height="8" size="30" id="id-mail" name="email_addr" value="Adresse électronique" onfocus="if (this.value=='Adresse électronique') this.value=''" />

pour récupérer une adresse mail.

Je voudrais savoir si sans affecter les élément avant et après (donc sans modifier mon CSS je pourrais modifier la hauteur du champs de saissie, changer la couleur du champs, lui faire des coins arrondis et changer la police de caractère, etc...

J'ai essayé avec height de juste modifier la hauteur mais c'est totalement sans effet.

Dans le même esprit j'ai égallement ceci dans mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" height="40" name="sub" value=" JE M'INSCRIS " onclick="submitform()" /><br />

Mais là encore ça me fait un "moche" bouton gris que je voudrais plutôt assorti avec les autres boutons de ma page...

Merci pour vos infos.

**Shivaneth** · 27/11/2013, 16h59

Bonjour,

t'as essayé avec du CSS ? attribut "style" de ton input.

**Bovino** · 27/11/2013, 17h08

donc sans modifier mon CSS

Si tu veux agir sur le style visuel d'un élément, ça va être difficile de ne pas passer par CSS.
Sinon, c'est un peu comme vouloir planter un clou avec un tournevis : à force de persévérance, tu atteindras peut-être un résultat, mais c'est quand même plus simple avec un marteau...

**Yepazix** · 27/11/2013, 17h32

Non mais en fait je ne veux pas que le reste de cette zone soit affectée.
J'ai juste ajouter cet input tout le reste est bien.
Du coup je veux juste modifier ce input et rien d'autre et je me disais que ce serait plus facile de juste mettre quelque chose comme height pour ajuster cet élement.

A priori je ne suis pas fermé à rajouté quelque chose dans le CSS mais je ne sais pas comment dire dans le CSS que je veux juste modifier ce truc là sans rien modifier du reste.

Je ne sais pas si je suis clair ?

pour que vous compreniez bien voici mon code au complet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<!-- tag intro et co --> <?php include("./introdoc.php"); ?>
 
<style>.art-content .art-postcontent-0 .layout-item-0 { margin-bottom: 5px;  }
.art-content .art-postcontent-0 .layout-item-1 { border-spacing: 10px 0px; border-collapse: separate;  }
.art-content .art-postcontent-0 .layout-item-2 { border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:#EFEBE1;border-right-color:#EFEBE1;border-bottom-color:#EFEBE1;border-left-color:#EFEBE1; color: #322C1B; background: #F1E1DF; padding-right: 10px;padding-left: 10px; border-radius: 10px;  }
.ie7 .post .layout-cell {border:none !important; padding:0 !important; }
.ie6 .post .layout-cell {border:none !important; padding:0 !important; }
 
</style></head>
<body>
<div id="art-main">
<!-- affiche header     --> <?php include("./header.php"); ?>
<!-- affiche navigation --> <?php include("./navig.php"); ?>
 
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper clearfix">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content clearfix"><article class="art-post art-article">
                            <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout-wrapper layout-item-0"><div class="art-content-layout layout-item-1"><div class="art-content-layout-row"><div class="art-layout-cell layout-item-2" style="width: 100%" ><p style="text-align: center;">
 
<!-- Début ensemble de trois images du haut-->
		<a href="http://www.jeromedewarzee.com" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/Jerome-de-Warzee-affiche-hautes-tensions.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/cactus.html" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/jerome-de-warzee-kody-cactus-waterzooi-koeks.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159);">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; text-decoration: underline;">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>
 
<br></p></div></div></div></div><div class="art-content-layout-wrapper layout-item-0"><div class="art-content-layout layout-item-1"><div class="art-content-layout-row"><div class="art-layout-cell layout-item-2" style="width: 100%" ><h4 style="text-align: center;">
 
<!-- Début ensemble de trois images du bas-->
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159);">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; color: rgb(180, 208, 37);">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>&nbsp;
 
		<a href="http://www.imagiscene.be/images/bientot-vide.jpg" target="_blank" title="Cliquez ici" style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-align: center; text-decoration: underline;">
		<img width="145" height="204" alt="" src="images/bientot-vide.jpg" class="" style="border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(229, 229, 159); border-right-color: rgb(229, 229, 159); border-bottom-color: rgb(229, 229, 159); border-left-color: rgb(229, 229, 159); ">
		</a>
 
<span style="color: rgb(239, 178, 87); font-size: 18px;"><br></span></h4></div></div></div></div><div class="art-content-layout-wrapper layout-item-0"><div class="art-content-layout layout-item-1"><div class="art-content-layout-row">
 
<!-- Bloc à votre services-->	
	<div class="art-layout-cell layout-item-2" style="width: 25%" >
        <h4><span style="color: rgb(239, 178, 87); font-size: 18px;">A votre service...</span></h4>
        <p style="text-align: left;"><span style="font-family: Arial; color: rgb(0, 0, 0); font-size: 14px;">L'agence Imagi Scène vous propose plusieurs spectacles pour tous types de manifestations. &nbsp; &nbsp; Centre Culturel, team building, chapiteau, évent' d'entreprise,soirée à thème, nous vous proposons un artiste, un spectacle complet, un service clef sur porte pour tout votre évennement.&nbsp;</span></p>
        <p style="text-align: left;"><span style="font-family: Arial; color: rgb(0, 0, 0); font-size: 14px;"><span class="hps">you can imagine</span>,&nbsp;<span class="hps">we do.</span></span><br></p>
        <BR>
		<p><a href="agenda.html" title="Cliquez ici" class="art-button">Lire plus</a></p>
</div>
 
<!-- Bloc visitez le site en détail-->		
	<div class="art-layout-cell layout-item-2" style="width: 25%" ><h4><span style="color: rgb(239, 178, 87);"><span style="font-size: 18px;">Visitez le site en détail.</span></span></h4><ul>
 
		<li style="text-align: left;"><a href="agenda.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Agenda des spectacles</span></a></li>
        <li style="text-align: left;"><a href="reference.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Références</span></a></li>
        <li style="text-align: left;"><a href="equipe.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">L'Equipe</span></a></li>
        <li style="text-align: left;"><a href="castings.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Vous avez du talent ?</span></a></li>
        <li style="text-align: left;"><a href="reference.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Partenaires</span></a></li>
        <li style="text-align: left;"><a href="qui-sommes-nous.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Qui sommes nous</span></a></li>
        <li style="text-align: left;"><a href="https://www.facebook.com/Renaudlighting" target="_blank" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Facebook</span></a></li>
        <li style="text-align: left;"><a href="galerie.php" title="Cliquez ici"><span style="color: rgb(0, 0, 0);">Galerie de photos</span></a></li>
 
</ul><h4><span style="color: rgb(239, 178, 87); font-size: 18px;"></span></h4>
 
<!-- Bloc visitez le site en détail partie dédiée à la newsletter -->
<div class="contenta">
 
Inscrivez-vous à la news-letter...<BR>
				<form action="http://espaceimy.cluster010.ovh.net/phpmynewsletter/subscription.php" method="post" name="sub_form" target="formPopup" onsubmit="submitform();document.getElementById('id-mail').value='' ;false;">
				<input type="text" height="8" size="30" id="id-mail" name="email_addr" value="Adresse électronique" onfocus="if (this.value=='Adresse électronique') this.value=''" />
				&nbsp;
				<input type="button" height="40" name="sub" value=" JE M'INSCRIS " onclick="submitform()" /><br />
				<input style="display:none" type="radio" class='radio' name="op" value="join" checked="checked" />
				<input type='hidden' name='list_id' value='1'>
				<input type='hidden' name='popup' value="_popup">	
				</form>
			</div>
 
</div>
 
<!-- Bloc truc à la une-->		
	<div class="art-layout-cell layout-item-2" style="width: 50%" >
        <h4><span style="color: rgb(239, 178, 87); font-size: 18px;">A la une...</span></h4>
        <p style="text-align: left;">
		<span style="color: rgb(0, 0, 0); font-size: 14px; letter-spacing: -1px; font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;">Découvrez un nouveau talent, un nouveau sketch ou redécouvrez une perle d'un de nos artistes. &nbsp;&nbsp;</span><span style="font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif; font-size: 14px; letter-spacing: -1px; color: rgb(0, 0, 0);">Une séquence à partager sur les réseaux sociaux avec vos amis....</span></p>
        <p></p>
        <p>
 
<!-- Incrustation vidéo YOUTUBE-->			
		<iframe width="403" height="240" src="//www.youtube-nocookie.com/embed/0gKSaStDmsQ" frameborder="0" allowfullscreen></iframe>
 
		</p>
         <p><a href="http://www.jeromedewarzee.com" target="_blank" title="Cliquez ici"></a></p>
    </div>
    </div>
</div>
</div>
</div>
 
                </article>
 
 
</div>
                    </div>
                </div>
            </div>
    </div>
 
 
<!-- affiche footer --> <?php include("./footer.php"); ?>	
 
 
 
 
</div>
 
 
</body></html>

**ticoune** · 27/11/2013, 17h57

j'adore le sens de l'humour de bovino

**SCryptCypher** · 27/11/2013, 18h43

Tu peux définir une classe de style pour ton input et ton bouton (la même ou deux différentes)

exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.StyleInput {
	border-bottom: #ff6633 1px solid;
	border-left: #ff6633 1px solid;
	border-top: #ff6633 1px solid;
	border-right: #ff6633 1px solid;
	background-color: #faf0e6;
	cursor: hand;
	height: 15px;
	width: 105px;
	font-weight: bold;
	color: #ff6633;
	text-align: left;
	font-family: verdana;
	font-size: 10px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="button" class="StyleInput" ...
<nput type="text" class="StyleInput" ...

**Yepazix** · 27/11/2013, 21h42

Un truc du genre j'avais déjà essayé mais le problème c'est que il n'y a que le texte au dessus de champs qui est affecté par les changements.
"Inscrivez vous à la news-letter".
Moi ce que je veux changer c'est le champs dans lequel on introduit l'adresse mail et la j'ai beau chipoter à tout rien n'y fait.
Pareil pour le bouton :-(

Vu ce que je vois en expérimentant un peu c'est je pense un problème dans ce que je manipule du CSS.

J'ai bien mis ma class sur un élément, par exemple le champs texte.
Mais quand je manipule la valeure de Height j'ai l'élélment en dessous du champs qui monte et qui descend comme si Height faisait plus de place pour le champs mais le champs lui même garde la même taille.

J'ai continué à chipoter depuis et je n'arrive toujours à rien.
Bon comme vous avez vu dans mon code il y a un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="http://espaceimy.cluster010.ovh.net/phpmynewsletter/subscription.php"

et dans phpmynewsletter il y a aussi un CSS.
J'ai essayé de le modifier et même de le supprimer mais sans succès.

Help

Taille d'un input

HTML

Vue hybride

Discussions similaires

Partager

Partager