28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en place d'un bloc recherche

Bonjour,
voici mon problème, j'essaye d'adapter mon thème à mon forum Phpbb, du coup ca implique quelques modifications css.
ce que je souhaite c'est placer un bloc recherche en bas à droite de mon header.
j'ai essayer deux methodes:
> Utiliser des float : right; avec margin mais ca le place sous mon menu Smiley ohwell avec en plus une différence entre IE6 et FF3.
> En mettant une position absolute à mon bloc recherche, ça marche à première vue sur les 2 navigateurs mais pas sur toutes les résolutions :S

Code du template : le bloc recherche c'est "search-box"

	<div class="headerbar">
			<div class="inner">
			<!-- <span class="corners-top"><span></span></span> -->
				<div id="site-description">
					<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
					<h1>{SITENAME}</h1>
					<p>{SITE_DESCRIPTION}</p>
					<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
				</div>
				<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
				<div id="search-box">
					<form action="{U_SEARCH}" method="post" id="search">
					<fieldset>
						<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
						<input class="button2" value="{L_SEARCH}" type="submit" /> 
						<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a>{S_SEARCH_HIDDEN_FIELDS}
					</fieldset>
					</form>
				</div>
				<!-- ENDIF -->
				<div id="navcontainer">
					<ul id="navlist">
						<li><a href="http://.com/">ACCEUIL</a></li>
						<li><a href="http://.com/phpbb/">FORUM</a></li>
						<li><a href="http://.com/">ALBUM</a></li>
						<li><a href="http://.com/">TCHAT</a></li>
					</ul>
				</div>
				<!-- <span class="corners-bottom"><span></span></span> -->
			</div>


Au niveau CSS


#search-box {
	float: right;
	margin-right:20px;
	color: #FFFFFF;
	text-align: right;
	white-space: nowrap; /* For Opera */
}


L'idéal ça serait d'avoir le bloc recherche qui ne bouge pas et qui soit dans le même emplacement sur les 2 nav.

Merci
PS: la page en question ici
Modifié par eagle84 (03 Sep 2008 - 14:35)
Pour utiliser la position:absolute; il faut que le conteneur de ce bloc (div .inner) soit positionné. Par exemple à l'aide de position:relative;

Sinon le float:right devrait fonctionner à l'aide d'un peu de padding.

Tu pourrais (re)lire les 3 articles sur le positionnement (Openweb).
Modifié par Heyoan (31 Aug 2008 - 19:31)
super ca marche presque à la perfection sauf sur IE6 (j'ai pas le 7 donc jai pas tester). sous ie6 ça marche (je suis sur 1680*1050) mais dés que je redimensionne la fenêtre aie aie.. les éléments positionné en absolute ont l'air de rester fixé.
Au lieu d'un left ce serait plus logique d'utiliser un right. Smiley cligne



Edit: En rejetant un oeil à la page :

* il vaudrait mieux affecter le position:relative à .headerbar plutôt qu'à .inner

* virer les margin

* utiliser right au lieu de left

* utiliser bottom au lieu de top

* virer également le margin-right du fieldset

Cela permettra de positionner plus facilement (right:1px; bottom:1px;) et d'autoriser l'agrandissement des caractères (Ctrl + Molette avec Firefox)


Sinon 2 remarques :

* 1004px c'est trop ! Voir la FAQ pour l'utilisation de min-width et max-width.

* il vaut mieux éviter les px pour le font-size et leur préférer les em
Modifié par Heyoan (31 Aug 2008 - 20:11)
Merci pour toutes ces remarques qui vont m'être d'un grand secours demain, je les appliquerais et je vous tiendrais au courant (en mettant réglé si je n'ai plus de question Smiley cligne )
Smiley cligne
Voila j'ai régler le plus gros des soucis en suivant ces recommandations, par contre je remarque que sous IE7 si je modifie la largeur de la fenêtre à la main ça laisse mon header fixé au milieu de la page Smiley confus alors que sous FF3 ca le place systématiquement au bon endroit.
(header que j'ai mis en position relative pour placer le menu et le bloc de recherche).



.headerbar {
	background: url({T_THEME_PATH}/images/index_01.jpg) no-repeat;
	height: 122px;
	position:relative;	/*pour placer le menu et le bloc recherche */
}

Modifié par eagle84 (01 Sep 2008 - 12:01)
Comme je te disais tu devrais utiliser min-width et max-width (voir ce point de la FAQ pour IE).

Par contre il ne faut pas les affecter à BODY (idem pour le margin:10px auto;) mais à #wrap.


Edit: pour un lecteur vocal sry va être dur à retranscrire, contrairement à sorry. Smiley cligne
Modifié par Heyoan (01 Sep 2008 - 22:09)
Voila je crois que ca a régler la plupart des problèmes, il reste plus qu'a vérifier cela sous IE6 que je n'est pas sous la main actuellement.

Merci Smiley smile
Voila je crois que ca a régler la plupart des problèmes, il reste plus qu'a vérifier cela sous IE6 que je n'est pas sous la main actuellement.


Merci Smiley smile

Edit: Lorsque tu disais que width : 1004 c'est trop, tu veux dire que c'est trop large ? car au final même avec min et max width je vais quand même dans la majorité des cas avoir mes 1004 px de large vu que c'est le visuel de mon header qui m'y contraint.
eagle84 a écrit :

Edit: Lorsque tu disais que width : 1004 c'est trop, tu veux dire que c'est trop large ? car au final même avec min et max width je vais quand même dans la majorité des cas avoir mes 1004 px de large vu que c'est le visuel de mon header qui m'y contraint.
Vu que tu as mis un min-width:800px c'est impec. Smiley cligne

On conseille généralement de ne pas dépasser 980px de large (en valeur fixe) pour une résolution en 1024 et 760px pour une résolution en 800 mais l'idéal est d'avoir une mise en page qui permette un min-width et max-width qui vont bien.

Et si tu considères que ce sujet est [Résolu] n'oublies pas de l'indiquer dans le titre du sujet. Smiley cligne
Sujet clos
Aller à