CSS, formulaire et positionnement d'objets [2/3 réponses]

Bonjour !

Depuis longtemps je trouve mon inspiration sur ces forums et j'ai à peu près toujours trouvé ma solution juste en parcourant le forum... Mais ce coup-ci je souhaite partir d'un truc que j'ai fait et les différentes solutions que j'ai testé ne fonctionnent pas

Je tiens à préciser que j'ai regardé dans la faq sur l'alignement et les autres messages, mais cela ne fonctionne pas pour moi.

Tout d'abord les images pour illustrer le problème (et ce que je souhaite réaliser).

Sous FF, c'est presque ça :

http://pix.nofrag.com/98/f2/e59663f2cc90fb8f6a635b49f4c2t2.jpg

Sous IE, c'est à la ramasse :

http://pix.nofrag.com/81/07/271d3ebef18ef3199c92020c3949t2.jpg

Alors les différents problèmes :
- D'un point de vue alignement vertical, ça ne marche pas du tout... Le select n'est aligné qu'avec lui-même, il se fiche du reste.
- Les boutons radio sont alignés en absolute, ce qui n'est ni très pro, ni très beau (la preuve sous IE).
- Le select est plus grand (verticalement) que le texte inclus.
- J'ai une bordure grise héritée de l'input ou du select sous IE.

La page internet :

    <form id="stock_search_form" method="post" action="http://*****">
	<div>
		<div id="radio" class="radiogroup">
		<input type="radio" name="filter" value="GE"> GE<br />
		<input type="radio" name="filter" value="G"> G<br />
		<input type="radio" name="filter" value="R"> R<br />

		</div>
        <label for="stock_site">Site</label>
        <select name="stock_site" id="stock_site" />
        	<option value="ALL"><b>ALL</b> - ALL SITES</option>
        	<option value="PROD"><b>PROD</b> - PRODUCTION</option>

				</select>

		<img id="report_button" src="../img/Consultation.png" alt="Consultation" style="cursor:pointer" />
		<br />
        <label for="stock_product">Produit</label>
        <input type="text" name="stock_product" id="stock_product" />
        <input type="hidden" name="report" id="report" value="false" />
		<input type="image" id="search_button" src="../img/Rechercher.png" />
		<div id="autocomplete_choices" class="autocomplete"></div>
	</div>

    </form>

Feuille de style CSS :

#stock_search_form img {
	position: absolute;
	left: 650px;
	vertical-align: middle;
	border: 1px solid white;
}

#stock_values {
	background: #444444;
	border: 1px solid #EAEAEA;
	padding: 10px;
	margin-top: 10px;
}

#stock_values ul {
	margin: 0;
	padding: 0;
	list-style:none!important;
	list-style-image: none!important;
}

#stock_values ul li {
	margin-bottom: 10px;
}

#stock_search_form {
	color: white;
	background: #000000;
	border: 1px solid #EAEAEA;
	padding: 10px;
}

#stock_search_form label{
	vertical-align: middle;
	font-size:small;
	display: inline;
 	float: left;
	width: 70px;
}

#stock_site {
	vertical-align: middle;
	width: 350px;
}

input { 
	margin: 0;
	vertical-align: middle;
	border: 1px solid #888;
	padding: 1px 2px;
	font-size: small ; 
	color:white ;
	background-color: black; 
}

select { 
	margin: 0;
	vertical-align: middle;
	border: 1px solid #888;
	font-size: small ; 
	color:white ;
	background-color: black; 
}

#stock_site option {
    background-color:black;
	color: white;
    margin:0px;
    padding:0px;
	font-size: small;
	display:block;
	margin:0;
	padding:2px;
	cursor:pointer;
}

#stock_site option.selected {
	background-color: #666666;
}

#stock_product {
	width: 320px;
}

#search_button {
	position: absolute;
	left: 650px;
	border: 1px solid white;
	color: black;
	padding:0 0 0 0;
}
div.radiogroup {
	border: 0px;
	border-style: none;
	margin: 0;
	vertical-align: middle;
	position: absolute;
	left: 70em;
	font-size:small;
}

div.autocomplete {
      position:absolute;
      width:320px;
      background-color:black;
      border:1px solid #888;
      margin:0px;
      padding:0px;
}
	
div.autocomplete ul {
	list-style:none!important;
	list-style-image:none!important;
	margin:0px;
	padding:0px;
}

div.autocomplete ul li.selected {
	background-color: #666666;
}

div.autocomplete ul li {
	font-size: small;
	list-style-type:none;
	display:block;
	margin:0;
	padding:2px;
	cursor:pointer;
}

Je pense avoir réussi à mettre tous les éléments qui pourraient aider les gens désireux de me filer un coup de main, sinon dites-moi ce qui peut manquer.

Précisons que j'ai peut-être raté mon coup en termes de conception, donc si vous pensez qu'en remodelant ma page (pour arriver au même résultat) cela résoudrait mon problème, je vous écoute avec attention.

Merci d'avance à tous, même si ce n'est qu'un petit coup de pouce.
Modifié par Morty (24 Jul 2007 - 16:31)

Sans voir le CSS, je vais essayer de t'apporter quelques lumières (j'espère).
Tout d'abord, peut-être as-tu mis tous ces éléments dans un div? Et dans ce cas, tu pourrais encore subdiviser en trois groupes : gauche, milieu et droite. Ainsi, pour le groupe de gauche, tu mets un float:left, pour le groupe de droite un float:right et tu te débrouilles avec les width pour éviter qu'ils se chevauchent.
Exemple:

.groupe_gauche
{
 width : 30%;
 float : left
}

.groupe_milieu
{
 width : 30%;
}

.groupe_droite
{
 width : 30%;
 float : right
}

Voilà, je pense que c'est une bonne solution pour une problème comme celui-ci.

EDIT :

Sinon, toujours en employant un div général, tu peux utiliser des "position : relative", ce sera beaucoup mieux à mon avis.

Bon courage
Modifié par arnaultp (24 Jul 2007 - 15:45)

J'ai remplacé mon radiogroup par ceci :

div.radiogroup {
	float:right;
	border: 0px;
	border-style: none;
	margin: 0;
	vertical-align: middle;
	font-size:small;
	padding-right: 30px;
}

Le résultat est le suivant :

FF
http://pix.nofrag.com/85/7c/fd41c6f444f82e2ff269bafea6bet2.jpg

IE
http://pix.nofrag.com/d6/9b/fd662f9842d405bf0195abd8b86et2.jpg

Il reste à régler l'alignement vertical et la bordure sur les boutons radio...

Et j'oubliais surtout de dire MERCI pour ta réponse Arnaultp !
Modifié par Morty (24 Jul 2007 - 15:58)

Une autre nouvelle :

J'ai réglé le problème de la bordure mais toujours pas la hauteur et l'alignement du texte...

CSS rajouté :

div.radiogroup input {
	border: 0px;
	border-style: none;
}