Position absolute et redimensionnement

Bonjour à tous,

je cherche à résoudre un petit mystère pour moi
Je cherche à faire une div qui serait dans le coin haut droit

div {position: absolute; top: 0; right : 0; }

Pour l'instant pas de problème.

mais lorsque je redimensionne la fenêtre la div vient par dessus le reste du site alors que je voudrais qu'elle ne bouge pas. Je ne suis pas très claire, un exemple sera plus simple à expliquer : sur le site : http://www.video2brain.com/fr le champs de recherche est à l'exterieur et lorsque l'on redimensionne la fenetre il vient se caler à droite de la colonne
principale et il ne bouge plus même si la fenêtre est très petite.

Si un magicien veut bien m'aider à résoudre ce mystère
Merci à tous.

Salut , je pense que tu dois pouvoir faire ca en javascript .

J'avais fais un code un peu dans le même genre , pour pouvoir avoir mon objet en position absolute au depart , puis quand je scrollais il montait un peu pour atteindre le haut de la page , puis ensuite il s'arrêtait arrivé a une certaine position vers le bas pour ne plus débordait sur la suite du site .

Enfaite un peu comme ca fais la quand tu garde la fenêtre grande et que tu scroll vers le bas ^^ ( mais en mieux que ce que j'avais fais , moi c'etait pas fluide comme la . )

Pour ce que tu veux faire , en gros je pense qu'il faut que tu récupères les dimensions de la page ( height width ) , et que selon la largeur ( en opposition a la hauteur , parce que sinon c'est plutôt une longueur qu'une largeur .. ) tu fasse changé le style de ton div , en absolute ou en autre chose ( ce que tu a besoin quoi ^^ )


Dans le main_compressed.js tu a se code pour obtenir les dimensions :

function getWindowWidth(){
	if(window.innerWidth) return window.innerWidth;
	if(document.documentElement && document.documentElement.clientWidth){
		return document.documentElement.clientWidth;
	}
	else if(document.body && document.body.clientWidth){
		return document.body.clientWidth;
	}
	return 0;
}

function getWindowHeight(){
	if(window.innerHeight) return window.innerHeight;
	if(document.documentElement && document.documentElement.clientHeight){
		return document.documentElement.clientHeight;
	}
	else if(document.body && document.body.clientHeight){
	return document.body.clientHeight;
	}
	return 0;
}

ensuite il faut regardé le code plus en détail pour voir comment ils s'en servent et l'adapté a ton cas

ps : il y en a toute une tartine de code js ...
Modifié par mathieu1004 (11 Jul 2010 - 18:42)

le problème c'est le right:0 tu devra plutôt essayer de jouer sur la valeur de margin-left pour déplacer ta zone vers l'extérieur du reste du site.

si la largeur du site est 900px par exemple

tazone
{
left:50%;
margin-left:450px;
position:absolute;
}

Merci beaucoup pour vos réponses, je vois comment faire en js...je vais regarder ca de plus près.

pixeltn : j'ai deja essayé cette technique mais je n'obtiens pas exactement ce que je veux.


Merci beaucoup

C'est pas parce que tu es en "absolute que le champ de recherche n'est pas en lien avec le site et qu'il se redimensionne mal. Pourquoi ne pas faire une DIV dans laquelle ton champ est à droite (en flottant par exemple)

Bonjour,

Si j'ai bien compris le problème, tu voudrais que la recherche reste constamment à droite même si on redimensionne la fenêtre.

Le problème est que cela va induire un scroll horizontal pas très ergonomique.

En principe pour être sur que cela rentre dans une majeure partie des résolutions il faut penser son design sur une base de 960 à 990 pixel de large hors là avec la recherche cela en fait plus de 1080.

Maintenant bouffer presque 150 pixel à droite uniquement pour la recherche bof! A la limite ce serait un menu oui mais là pour moi cette recherche est carrément mal placée.

Bidouiller tout cela en javascript pour forcer tout cela à rentrer coute que coute quitte à rendre l'accès à la recherche difficile en cas de scroll je suis pas sur que cela soit pertinent.

Il vaudrait mieux essayer de placer cette recherche autre part.

ah , moi j'ai compris l'inverse , et du coup c'est vachement plus sympa enfaite :
Si y a la place , ca reste sur le coté et tu l'a le long de la page quand tu descend et ca gène pas vu qu'il y a la place sur la page , et justement si il n'y a pas la place , tu le rentre dans un petit div prévu pour ,en haut de ta page .

Pour info, cet effet (deux styles différents suivant la largeur de la fenêtre) peut se faire en CSS avec les Media Queries. Pas supportées par IE à l'heure actuelle (à vérifier pour le futur IE9, je dirais qu'il y a des bonnes chances que ça se fasse...).