Forcer le titre de l'entête à rester au milieu du bloc !?!

Forcer le titre de l'entête à rester au milieu du bloc !?! - HTML/CSS - Programmation

Marsh Posté le 13-04-2012 à 23:48:17    

Salut,
j'ai un problème avec des blocs inline en html/css...
 
c'est très simple ma page pour l'instant parce que j'ai découvert ce langage il y a moins d'une semaine, mais en gros, j'ai un header qui prend toute la largeur, un menu à gauche, un bloc section au mileu et un aside à droite.
 
menu, section et aside sont aligné en haut en étant tous trois des inline-blocks.
 
Problème : lorsque je réduis la largeur du navigateur à la souris, dès que ça atteint la largeur minimale spécifiée pour les deux blocs de droite (section et aside) et bien pouf ; ils sautent sous celui qui les précédé (i.e. : le bloc section saute sous le menu et le bloc aside saute sous le bloc section.
J'aimerai qu'une fois qu'ils atteignent leur taille minimale prédéfinie ; ils s'arrêtent et que la réduction de la largeur du navigateur ne les fasse pas sauter comme ça. c'est moche.
 
merci de vos tuyaux ;) et pardonnez mon ignorance... je m'emmêle beaucoup trop les pinceaux avec ces histoires de blocs :S


Message édité par Swiss_Knight le 14-04-2012 à 17:07:10

---------------
Hergestellt in der Schweiz.
Reply

Marsh Posté le 13-04-2012 à 23:48:17   

Reply

Marsh Posté le 14-04-2012 à 00:22:34    

Il suffit d'entourer tes 3 blocs avec un nouveau bloc, sur lequel tu mettras un "min-width" au moins égal à la somme des min-width des 3 blocs.

 

Avec ça, le parent ne pourra pas obtenir une taille telle qu'on doive avoir des retours à la ligne.

 

J'ai bricolé un exemple vite fait pour te montrer l'idée : http://jsfiddle.net/dxBWH/

 

EDIT: on peut arriver au même résultat sans mettre de min-width sur le parent, mais en lui mettant un "white-space: nowrap" (ça interdit les retours à la ligne)


Message édité par Riokmij le 14-04-2012 à 00:27:35
Reply

Marsh Posté le 14-04-2012 à 17:05:39    

Okay, avec le "white-space: nowrap" ça donne plus ou moins quelque chose... mais pas vraiment avec l'autre méthode...

 

bref, je laisse tomber pour l'instant ; aligner trois blocs avec un fixé à droite et un fixé à gauche, et l'autre qui doit rester entre les deux, c'est pas évident pour commencer.

 

par contre j'ai un autre petit problème :
http://hfr-rehost.net/preview/self/pic/350af90b4ba536e0643461665163fc7300a35971.png
(cliquable)

 

mon texte d'entête va se cacher trop bas lorsque j'augmente la police, et pourtant il y a la place pour qu'il s'affiche dans le bloc d'entête...
Comment je peux faire pour le forcer à se centrer dans ce bloc à la fois verticalement et horizontalement ?!


Message édité par Swiss_Knight le 14-04-2012 à 17:05:57

---------------
Hergestellt in der Schweiz.
Reply

Marsh Posté le 27-04-2012 à 15:26:57    

Pour le centrage vertical, il faut jouer avec le line-height de ton h2 et utiliser vertical-align:middle pour ton span.


---------------
London Box Office: Comédie Musicale Londres
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed