Vous n'êtes pas identifié(e).
- Contributions : Récentes | Sans réponse
#1 11-11-2009 16:28:07
display: inline; Pb de retour chariot entre du texte et un formulaire.
Bonjour !
Sur le tuto suivant http://www.alsacreations.com/tuto/lire/ … n-CSS.html, j'ai vu un attribut intéressant:
display: inline;
Cela me permet d'afficher mon formulaire d'identification sur une seule ligne, comme en haut de la page d'accueil de Facebook...
Le pb, c'est que, comme sur Facebook, je voudrais mettre un lien qui pointe sur l'index de mon site et un texte sur la même ligne que mon
formulaire.
J'ai donc tout mis dans une div avec comme style display: inline;
Mais cela m'affiche mon formulaire en dessous du lien et du texte...
Donc, tout n'est pas sur la même ligne.
Si Facebook arrive à le faire, c'est que c'est possible !
Merci d'avance pour votre aide !
Ralph303
Hors ligne
#2 12-11-2009 01:27:46
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
Je vais vous montrer le code:
<div id="membres">
<a class="lien_neutre" href="index.php">
<?php echo $_SESSION['nomsite']; ?>
</a>
Entrée des membres
<form action="login.php" method="post">
<input type="text" name="pseudo" value="pseudo">
<input type="password" name="password" value="mot de passe">
<input type="submit" value="Entrer">
</form>
</div>
Avec ce style:
#membres {
display:inline;
}
Je ne comprend pas qu'il y ait un retour chariot entre "nomsite Entrée des membres" et les champs de saisie de mon formulaire...
J'ai un peu cherché dans les free CSS template http://www.freecsstemplates.org et j'ai vu qu'ils utilisaient le positionnement float pour
faire un menu, comme il est dit dans le tutoriel que je cite dans le post précedent (c'est la 2ème solution).
J'ai essayé comme ça et ça marche bien...
Comme ce post est resté longtemps sans réponse, c'est que ça doit pas être évident, je ne le supprime donc pas.
Et je termine donc avec cette "solution" (utilisation du positionnement float).
Ralph303
Dernière modification par Ralph303 (12-11-2009 02:33:47)
Hors ligne
#3 12-11-2009 07:05:39
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
C'est le soucis de la balise <form>. 
Je suis pas un expert en CSS donc je ne saurais te dire comment régler cela...
Moi j'ai toujours évincé le retour à la ligne de la balise en la mettant dans un tableau entre un TD et un TR mais c'est loin d'être une solution propre...
Hors ligne
#4 12-11-2009 10:23:29
- Maljuna Kris
- Infantimigulo
- Lieu : Douarnenez 29100 Breizh Izel
- Inscription : 08-05-2009
- Messages : 2 453
- Site Web
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
Saluton,
Pour ce qui est de la page d'accueil de Facebook (c'est la première fois que je vais sur ce site, et probablement la dernière 
) quand on regarde le source, on se fait vite une idée de la non-exemplarité de leur code.
Juste un extrait remis en forme (indentation) pour qu'on se rende mieux compte des horreurs :
<div id="content" class="fb_content clearfix"><div >
<!-- 2365fa3194ecdc0cab15721ce967a9f8663937c7 -->
<div class="WelcomePage_Container">
<div id="menubar_container">
<div id="fb_menubar" class="clearfix fb_menubar_logged_out">
<ul id="fb_menubar_core" class="fb_menu_list">
<li class="fb_menu" id="fb_menubar_logo">
<a href="http://www.facebook.com" class="fb_logo_link" title="Go to Facebook Home">
<img class="fb_logo_img" src="http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif" alt="Facebook logo" />
</a>
</li>
</ul>
<ul id="fb_menubar_aux" class="fb_menu_list">
<div class="menu_login_container">
<form method="POST" action="https://login.facebook.com/login.php?login_attempt=1" id="login_form">
<input type="hidden" name="charset_test" value="€,´,€,´,?,?,?" />
<input type="hidden" id="locale" name="locale" value="en_US" />
<input type="hidden" id="non_com_login" name="non_com_login" />
<table cellpadding="0" cellspacing="0">
<tr>
<td class="login_form_label_field login_form_label_remember">
<input type="checkbox" class="inputcheckbox " id="persistent" name="persistent" value="1" />
<label for="persistent" id="label_persistent">Keep me logged in</label>
</td>
<td class="login_form_label_field">
<a href="http://www.facebook.com/reset.php" rel="nofollow">Forgot your password?</a>
</td>
<td class="login_form_last_field login_form_label_field">
</td>
</tr>
<tr>
<td>
<input type="text" class="inputtext DOMControl_placeholder" title="Email" placeholder="Email" id="email" name="email" value="Email" />
</td>
<td>
<input type="password" class="inputpassword" id="pass" name="pass" value="" />
<input type="text" class="inputtext hidden_elem DOMControl_placeholder" id="pass_placeholder" name="pass_placeholder" value="" />
</td>
<td class="login_form_last_field">
<div class="inner">
<span class="UIButton UIButton_Blue UIFormButton">
<input value="Login" type="submit" class="UIButton_Text" />
</span>
</div>
</td>
</tr>
</table>
<input type="hidden" name="charset_test" value="€,´,€,´,?,?,?" />
<input type="hidden" id="lsd" name="lsd" value="Pw13Q" />
</form>
</div>
</ul>
</div>
</div>
<div class="WelcomePage_MainSell">
<div class="WelcomePage_MainSellCenter clearfix"><div class="WelcomePage_MainSellLeft">
<div class="WelcomePage_MainMessage">Facebook helps you connect and share with the people in your life.</div>
<div class="WelcomePage_MainMap"> </div>
</div>
<div class="WelcomePage_MainSellRight">
<div class="WelcomePage_SignUpSection">
<div class="WelcomePage_SignUpMessage">
<div class="WelcomePage_SignUpHeadline">Sign Up</div>
<div class="WelcomePage_SignUpSubheadline">It's free and anyone can join</div>
</div>
<div class="WelcomePage_SimpleReg" id="registration_container">
<div id="simple_registration_container" class="simple_registration_container">
<div id="reg_box">
<form method="post" action="https://register.facebook.com/r.php" name="reg" id="reg" onsubmit="return false;">
<input type="hidden" name="charset_test" value="€,´,€,´,?,?,?" />
<input type="hidden" id="locale" name="locale" value="en_US" /><input type="hidden" id="terms" name="terms" value="on" />
<input type="hidden" id="reg_instance" name="reg_instance" value="1258016624-d37b85224bfe401a3b4e19945f1c15c5481ec18cc7cb86877b0d5" />
<noscript>
<div id="no_js_box">
<h2>Javascript is disabled on your browser.</h2>
<p>Please enable JavaScript on your browser or upgrade to a Javascript-capable browser to register for Facebook.</p>
</div>
</noscript>
<div id="reg_form_box">
<table class="editor" border="0" cellspacing="0">
<tr>
<td class="label">First Name:</td>
<td>
<div class="field_container">
<input type="text" class="inputtext" id="firstname" name="firstname" value="" />
</div>
</td>
</tr>
<tr>
<td class="label">Last Name:</td>
<td>
<div class="field_container">
<input type="text" class="inputtext" id="lastname" name="lastname" value="" />
</div>
</td>
</tr>
De la divite aigüe, entrelacée de mise en page avec des tableaux.
Tout faux !
Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy
Hors ligne
#5 12-11-2009 11:24:32
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
Bonjour !
Ah oui ! Effectivement, c'est pas du code propre...
Moi qui prenait Facebook comme modèle... Effectivement, c'est truffé d'Ajax, de DHTML et de JavaScript, ce qui me plaît bien...
Je vais plûtot prendre exemple sur http://www.freecsstemplates.org où ils n'utilisent que les CSS et pas les tableaux et sur les tutos
de http://www.alsacreation.com.
En tous cas, merci pour ces éclaircissements, xTG et Maljuna Kris !
Ralph303
Hors ligne
#6 12-11-2009 12:52:27
Hors ligne
#7 12-11-2009 14:17:52
- Maljuna Kris
- Infantimigulo
- Lieu : Douarnenez 29100 Breizh Izel
- Inscription : 08-05-2009
- Messages : 2 453
- Site Web
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
Il me semble que dans ces tutos sur les formulaires, Fred Cavazza avait une combine CSS.
Je vais rechercher.
Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy
Hors ligne
#8 12-11-2009 14:18:53
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
D'après ce que j'ai lu, la propriété display n'est pas encore bien implémentée sur les navigateurs actuels.
Alors, en attendant, j'utilise les propriétés float:left; width et margin:left; afin de bien positionner mes éléments sur une même ligne.
Je n'utilise jamais de tableaux html, comme Raphaël Goetter le dit dans son livre CSS 2, et d'ailleurs, je n'ai jamais utilisé de tableaux html...
De plus, avec la propriété padding, on peut centrer ses éléments comme on veut, contrairement aux tableaux html.
Je n'ai trouvé que ça comme alternative.
Ralph303
Hors ligne
#9 12-11-2009 14:32:28
- Maljuna Kris
- Infantimigulo
- Lieu : Douarnenez 29100 Breizh Izel
- Inscription : 08-05-2009
- Messages : 2 453
- Site Web
Re : display: inline; Pb de retour chariot entre du texte et un formulaire.
Je crois que c'est là :
http://www.fredcavazza.net/files/doc/tu … _intro.htm
Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy
Hors ligne