28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Positionnement Formulaire

Bonsoir à tous !

N'étant pas un très grand champion en CSS j'aurai besoin d'un petit coup de pouce s.v.p

J'ai un formulaire (<select>) , celui-ci peut contenir des données variables, étant en haut à droite à l'extrême , je voudrais qu'au lieu de se prolonger à droite lorsqu'il y a un texte long, que celui-ci de décale vers là gauche.

J'espère avoir été dans mes explications Smiley confused
Hello Teepo et bienvenue,

il aurait fallu voir ton code pour se rendre compte du problème mais voici un exemple :
css
form {
	width: 300px;
	border: 1px solid black;
	text-align: right;
	padding: 15px;
}
html
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
	<p>
		<label for="prenom">Prénom :</label>
		<input type="text" name="prenom" id="prenom" />
	</p>
	<p>
		<label for="nom">Nom :</label>
		<input type="text" name="nom" id="nom" />
	</p>
	<p>
		<label for="pays">Pays :</label>
		<select name="pays" id="pays">
			<option value="algerie">Algérie</option>
			<option value="france">France</option>
			<option value="maroc">Maroc</option>
			<option value="zimbabwe">Zimbabwe écrit en très large</option>
		</select>
	</p>
	<p>
		<input type="submit" />
	</p>
</form>
Excuse-moi je répare cette erreur tout de suite Smiley rolleyes

Voici mon fichier index.php

<!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" xml:lang="fr" >
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
    </head>
    <body>
        <form method="post" action="index.php">
            <div class="fichier">
                <label>Fichier :</label><br/>
                <select name="fichier">
                </select>
            </div>

            <div class="apercu">
                <label>Apercu :</label><br />
                <textarea name="code" class="xml"></textarea>
            </div>

            <div class="code">
                <label>Code :</label><br/>
                <textarea name="source" id="source" rows="25" cols="65"></textarea>
                <input type="submit"/>
                <input type="reset"/>
            </div>
        </form>
    </body>
</html>


Et mon fichier CSS:


body
{
    background-color: black;
}

label
{
    color: white;
}

.titre
{
    color: white;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    margin-top: 0px;
    margin-right: 500px;
    margin-left: 500px;
}

.code
{
    margin-right: 628px;
    position: relative;
    left: 600px;
    bottom: 75px;
}

.apercu
{
    border: solid 1px red;
    position: relative;
}

.fichier
{
    border: solid 1px red;
    position: relative;
    bottom: 85px;
    left: 700px;
    padding-right: 100px;
    margin-right: 745px;
}


Le formulaire en question ou j'ai demandé de l'aide est celui avec la classe 'fichier'.
Bonjour Teepo,

Première remarque, ton code XHTML n'est pas valide car tu n'as pas remplis comme il le faut la balise <select>.

Pour y remédier, il faut l'utiliser comme dans l'exemple de Heyoan.

Ensuite, je te suggère de revoir l'initiation au positionnement CSS car, quand j'ai testé ton code, la liste déroulante de ton formulaire n'apparaissait pas de mon champs de vision.

De plus, je n'ai pas bien compris ton problème, pourrais-tu essayer d'être plus explicite ?
Le code html est plutôt correct (on peut supposer que les options existent dans le code réel) à part le fait qu'il faudrait rajouter un id aux champs de saisie et rajouter l'attribut for="id" dans les LABEL (comme dans mon exemple) : cela permet d'améliorer l'ergonomie dans les navigateurs visuels puisqu'un clic sur le libellé donne le focus au champ associé et surtout cela permet de rendre les formulaires accessibles aux UA non graphiques (lecteurs d'écrans...) car il n'y a alors aucune confusion possible quant au champ que l'on est en train de remplir.

Pour ce qui est du positionnement css il faut effectivement revoir les bases. Fort heureusement Alsa possède plusieurs tutos à ce sujet dont le point d'entrée est : le Guide de survie du positionnement CSS.

Bonne lecture. Smiley cligne
En effet mon code n'est pas valide, car ce script sera pour mon usage strictement personnel, alors qu'il soit validé par le W3C, ça n'a pas grande importance (pour moi en tout cas Smiley cligne ).

En fait jQz, imagine un <select> banal, et découpe le en 2, au début, supposons qu'il n'y ai qu'un simple petit mot à l'intérieur, imaginons ensuite que ce mot devienne plus long, la partie de droite du <select> va s'étirer, et bah non ! Je voudrais moi que ce soit la partie de gauche qui s'étire.

J'espère que tu as compris cette fois, et que tu seras en mesure de m'aider Smiley cligne


EDIT : En faite j'ai résolu le problème grâce à ton script Heyoan, un simple text-align: right ... Smiley sweatdrop Je suis honteux Smiley confused

Merci beaucoup ! Smiley biggrin
Modifié par Teepo (11 Aug 2009 - 14:19)
Teepo a écrit :
En effet mon code n'est pas valide, car ce script sera pour mon usage strictement personnel, alors qu'il soit validé par le W3C, ça n'a pas grande importance (pour moi en tout cas Smiley cligne ).
Certes... mais si tu viens demander un coup de main sur le forum il nous faudra à nous un code valide car sans cela chaque navigateur va tenter de le corriger à sa manière et qu'il sera donc très difficile (voire impossible) de t'aider.

Teepo a écrit :
En faite j'ai résolu le problème grâce à ton script Heyoan
Un petit [Résolu] pour fêter ça ? Smiley cligne
Sujet clos
Aller à