Possitionnement Banniére ex:"Web-pour-tous"

Bonjour à tous,

J'apprécie vraiment bien le positionnement du site Web-pour-tous.
Son design simple agréable.

Alors j'ai décidé d'essayer de comprendre son code.

Tout se passe bien sauf sur un point que voici :
Cela se passe au niveau du bloc de recherche en haut à droite.
Aprés avoir regardé dans le css je ne comprend pas ce code :

#banniere{
height: 105px;
background:   url(design/banniere620px2.gif) left top no-repeat;
}


#banniere h1{
position: absolute;
top: 0;
left: 0;
width: 370px;
}

Je ne comprend pas pourquoi déclarer le absolute avec le "h1" j'ai essayé de reproduire cela avec un simple texte sans "h1" et/ou avec le position absolute mais ca ne donne pas le même.

Je me demandais donc pourquoi déclarer le position absolute dans le "banniere h1" et pas tout déclarer directement dans le "banniere"

Merci d'avance de votre aide
ZbergK

Bonjour Zbergk,

En fait le bloc banniere contient le H1 mais également le moteur de recherche qui lui est en float right.

Comme pour placer un élément flottant, il faut qu'il soit situé en premier dans le flux mais que je voulais que ce premier élément du flux soit le H1 et pas la recherche, j'ai donc positionné uniquement le H1 en absolute ce qui me permettait de le sortir du flux et le placer devant le moteur de recherche.

a écrit :
Je me demandais donc pourquoi déclarer le position absolute dans le "banniere h1" et pas tout déclarer directement dans le "banniere"

Cette partie haute est constitué de 3 blocs principaux

- header qui englobe banniere, H1, le menu accessibilité et qui me donne la continuité du fond à droite
- banniere qui englobe H1 et qui me donne la continuité graphique du haut de la bosse qui est coupée au niveau de .org (d'ailleurs ça se voit )
- H1 qui lui englobe le lien et l'image en dur du logo qui s'arrete à .org

En fait je me suis peut être un peu compliqué la vie à l'époque et je ferai peut être autrement maintenant mais c'était surtout pour essayé d'être relativement accessible tout au moins concernant cette partie.

Avoir un titre en image mais en essayant de penser à la désactivation Css, le surf sans image, la lecture par une synthèse vocale, le chevauchement eventuel du moteur de recherche sur le lien du logo en cas de redimensionnement de la police ou dans le cas d'une petite résolution tout cela en restant avec un design fluide.

EDIT:

Le design au départ est de Dew mais je l'ai un peu assassiné en cours de route (pas dew hein! le design )
Modifié par knarf (16 Jul 2006 - 05:12)

En effet je comprend mieux.

Par contre je ne savais pas que :

a écrit :
Comme pour placer un élément flottant, il faut qu'il soit situé en premier dans le flux

C'est probablement de la que venait tout mes questions

Encore merci
Modifié par ZbergK (16 Jul 2006 - 09:24)

Une derniére petite question.

Comment fais tu pour que ton menu de droite aille jusqu'au bas de la page ?

Voilà, merci d'avance de ton aide
ZbergK

Ps : Voici ce que ca donne chez moi pour le moment ICI
Modifié par ZbergK (16 Jul 2006 - 13:31)

Bonjour,

En réalité, le menu de Web-pour-tous ne va pas jusqu'au bas de la page. Pour obtenir l'effet escompté, la couleur d'arrière-plan du conteneur #global a donc été définie comme étant celle du menu.

Dans l'exemple de DevPC, il faudrait donc modifier la couleur d'arrière-plan du conteneur #site en #3B4471. Pour la classe .centre_bloc, il faudra alors sans doute spécifier un padding de 10px et non une marge. D'ailleurs, je doute de l'utilité de cette classe, puisque #centre est tout à fait suffisant.

#centre {
	margin-right: 280px;
	background: #FFFFFF;
	min-height: 200px;
	padding: 10px;
}

Modifié par Romain H. (16 Jul 2006 - 15:24)

Ha oui joli l'astuce
Encore un grand merci.

En effet le ".centre_bloc" ne servait a rien je ne l'ai pas gardé.

Merci