28173 sujets

CSS et mise en forme, CSS3

[Résolu...] Problème de dépassement de flottant a priori...

Bonjour, j'ai toujours appris le CSS sur le tas, au travers de tutos ici ou là et j'ai un petit problème qui va vous sembler bien insignifiant mais bon, voilà :

Je me fais fais une "search bar" à afficher dans mon header : A gauche, un menu vers le profil, MP, etc... dans un "select" (ouais, je sais, pas top mais finalement j'ai trouvé ça mieux que tous ces pseudos menus Pure CSS à qui on doit soit rajouter du JS pour IE6, soit trafiquer en XHTML 1.1...). Et à droite un mini-formulaire de Recherche.

Je cherche juste à mettre une bordure à ma barre mais c'est comme si mon div ne comprenait rien du tout et était vide (ligne de 2px de hauteur en fait)

Voici mon code :
<div id="searchbar">
	<span class="toleft">
		<select name="memberbar" onchange="window.location.replace(this.value);">
			<option value="" selected="selected">Membre Bismut</option>
			<option value="" disabled="disabled">--------------</option>
			<option value="">Profil</option>
			<option value="">Messages Privés</option>
			<option value="" disabled="disabled">--------------</option>
			<option value="">Liste des membres</option>
			<option value="">Géolocalisation</option>
			<option value="" disabled="disabled">--------------</option>
			<option value="">Déconnexion</option>
			<option value="" disabled="disabled">--------------</option>
			<option value="">Admin. Portail</option>
			<option value="">Admin. Forum</option>
		</select>
	</span>
	<span class="toright">
		<form action="" method="post">
			<input type="text" name="recherche" size="20" maxlength="60">
			<select name="moteur">
				<option value="wiki" selected>Wiki</option>
				<option value="forum" selected>Forum</option>
				<option value="cartes" selected="selected">Cartes</option>
			</select>
			<input type="submit" value="Rechercher">
		</form>
	</span>
</div>


Et mon CSS :
#searchbar {
	border: 1px solid #000000;
}

.toright {
	FLOAT: right;
	TEXT-ALIGN: right;
	CLEAR: right;
	WIDTH: 40%
}

.toleft {
	FLOAT: left;
	WIDTH: 55%;
	OVERFLOW: hidden;
	WHITE-SPACE: nowrap
}


J'ai donc une ligne noire de 2px de hauteur et en dessous, ma barre avec à gauche mon dropdown de membre, et à droite mon formulaire de recherche.

L'erreur doit être toute bête mais je ne sais pas quoi faire.

Merci beaucoup pour votre aide.
Modifié par Bismut (06 Jan 2007 - 17:04)
Administrateur
Hello et bienvenue ici,

Comme tu t'en doutes, la grande majorité des sujets ici (voire tous) traitent de "Problèmes".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre : "Problème de débutant" ne donne aucune information sur ce qu'il t'arrive Smiley decu

N'hésite pas à le modifier Smiley smile
Modifié par Raphael (06 Jan 2007 - 15:26)
Merci des conseils :
- Titre édité
- Je fais des recherches sur ce sujet de dépassement de flottant...

Si quelqu'un a une solution, merci d'avance.
Mouais, bizarre ça... Si je m'en tiens à l'exemple du jaune et du vert, ça marche bien chez moi... Mais dès que je mets mon select à gauche, et mon mini-formulaire à droite, à la place du texte... Ben ça bug... (Je suis sous FF 2)

Bref, à n'y rien comprendre tout ça... Smiley decu

EDIT : Bon, ben j'ai résolu le truc mais vraiment sans comprendre comment. En mixant les 2 méthodes en fait...
Modifié par Bismut (06 Jan 2007 - 17:04)
Sujet clos
Aller à