28220 sujets

CSS et mise en forme, CSS3

Probleme de header

Bonjour,

j'ai un petit problème Smiley smile
Je veux faire un header mais je ne sais pas comment faire. Il faut qu'il soit etirable en largeur. Voila ce que je dois obtenir : http://img82.exs.cx/img82/4496/stlinux27vt.jpg

Vous feriez quoi ?
Pour l'instant je prend le body comme conteneur et j'ai fais plusieurs blocs pour le head. Donc un bloc logo :
#head_logo {
background : url('images/logo_rond.jpg') no-repeat;
height : 131px;
width : 312px;
float : left;
}

Lui il faut pas qu'il bouge, il reste en haut à gauche. Ensuite j'ai une image de 1px de large en blanc, j'ai donc fait un bloc entre le logo et le "Membres" avec cette image en background :
#head_blanc {
background : url('images/head_blanc.jpg') repeat;
height : 131px;
float : left;
}

Lui par contre il doit rester collé au logo mais s'étirer vers la droite si on étire la fenêtre. J'ai bon jusque la ?

Ensuite je voudrais que la partie droite du head ("Membres + le formulaire) soit rattaché à droite. Si on agrandi la fenetre, le logo reste a gauche et le "Membres + formulaire" restent collé à droite. Comment faire cela ?
J'ai pensé à un float right mais ça a pas l'air d'etre ça.
Voila le code du bloc membre :
#head_membre {
background : url('images/head_membre.jpg') no-repeat;
height : 131px;
width : 364px;
float : right;
}

Bon je pense que vous avez tout, je rajoute le code xhtml :
<body>

<div id="head_logo"></div>
<div id="head_blanc"></div>
<div id="head_membre"></div>
<div id="head_login">{LOGIN}</div>

</body>

Voila j'espere que vous prendrez la peine de me lire et de me répondre surtout Smiley biggrin
si tu float membre à droite et ne spécifie pas de largeur au milieu, ton header sera extensible en largeur Smiley smile

#membre{float: right;}
Ouep !
Je te remercie ça marche, j'ai agrandi l'image "membres" pour qu'il y'ait une partie blanche à droite ou je puisse mettre le formulaire. Ca passe tout juste en 800x600, je pense qu'il va y avoir un peu de scroll mais pas dramatique, voila ce que j'obtient pour l'instant : http://www.stationlinux.org/css/index.php5

Merci de ta réponse si rapide Smiley smile

edit : bon après un test sur un ecran en 800x600 avec IE et firefox, le bloc "membres" passe à la ligne. Comment faire pour que ça scrolle un peu plutot ?
Je devrais peut etre enlever le width : 100% du body ?
Modifié par lucky (29 Mar 2005 - 11:52)
c'est parce que ce qui se trouve au milieu n'a pas assez de place, tu peux peut être le raccourci ou diminuer légérement tes images (un milipoil et c'est bon je pense)
Oui je te remercie maintenant ça passe à un poil près Smiley smile
Bon quand je raccourci encore un peu la fenetre (on sait jamais, imaginons un gars en 800x600 qui ne met pas en pleine fenetre) l'image passe à la ligne. Comment faire pour qu'il y ait plutot une barre de scroll ?
Sujet clos
Aller à