[Résolu] Mise en place des éléments dans un bloc en table-cell

Bonjour à toutes et tous

J'ai réalisé un site internet et il me vient un doute si j'ai bien effectué la mise en page dans le header.

http://telepermanence.ch/

Sur l'image ci-dessous, le header englobe la partie bleu et rouge et se trouve en display:table

Afin de positionner correctement le petit menu en bas à droite de la partie rouge, j'ai du le positionner en absolute (en mettant le header en position:relative pour avoir une référence).

Est-ce vraiment la bonne méthode ? Ou bien aie-je opté pour une solution usine à gaz ?

Comme je suis peut-être en train de faire la même bêtise sur un site que je suis en train d'intégrer, http://marc-schaefges.name/nouveau/soleil/index.php, je préfère agir avant de refaire la même erreur.

http://i73.servimg.com/u/f73/11/06/60/26/telepe10.jpg

Je vous remercie grandement d'avance et vous souhaite un bon samedi.

Marc

Bonjour,

oui effectivement ce n'est pas la meilleure solution car avec table-cell vous pouvez utiliser vertical-align et régler avec des padding

nav#petit_menu {
display: table-cell;
vertical-align: bottom;
text-align: right;
padding-right: 10px;

}

edit: enlever la position absolute de ul.petit_menu
Modifié par rodolpheb (06 Apr 2013 - 12:04)

Pareil que rodolpheb, du coup je passe à autre chose :
pourquoi utiliser des tabindex ? Il est très très conseillé de ne pas s'en préoccuper et de laisser faire les navigateurs, à moins d'avoir à régler un problème très spécifique de lien ou d'élément de formulaire qui ne serait pas situé où on s'y attendrait...

Apparement les z-index reprennent le sens naturel de la page sans risque, et ont juste l'avantage d'activer les styles de :focus dans chrome qui ne sait/savait pas le faire sans cet attribut .

Bonjour à vous et merci pour votre aide

rodolpheb a écrit :
Bonjour,

oui effectivement ce n'est pas la meilleure solution car avec table-cell vous pouvez utiliser vertical-align et régler avec des padding

nav#petit_menu {
display: table-cell;
vertical-align: bottom;
text-align: right;
padding-right: 10px;

}

edit: enlever la position absolute de ul.petit_menu

Ah ben je ne voyais pas cela aussi simplement, mais je vais essayer, merci beaucoup !

a écrit :
Pareil que rodolpheb, du coup je passe à autre chose : smile
pourquoi utiliser des tabindex ? Il est très très conseillé de ne pas s'en préoccuper et de laisser faire les navigateurs, à moins d'avoir à régler un problème très spécifique de lien ou d'élément de formulaire qui ne serait pas situé où on s'y attendrait...

Eh bien la raison pour laquelle j'ai eu recours au tabindex est tout simplement que j'ai remarqué que l'ordre de tabulation n'allait pas dans un sens logique, je ne savais pas pourquoi...

C'est pourquoi j'ai honteusement choisi une solution rapide et placé des tabindex sur chaque lien.

Est-ce déconseillé niveau accessibilité ou autre ?

gc-nomade =>

Peut-être que je me trompe, mais ne confondrais-tu pas plutôt avec les tabindex ?

marc.suisse a écrit :
gc-nomade =>

Peut-être que je me trompe, mais ne confondrais-tu pas plutôt avec les tabindex ?

Non , tu as bien saisis . C'etait en réponse (trop hative) à Felipe sur l'usage de tabindex que tu semble maîtriser ...

Salut

Je ne comprends pas très bien, les z-index permettent de mettre plusieurs "couches" l'une sur l'autre non ?

http://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

Ceci pour faire des effets de "profondeur" avec le contenu.

J'avoue que je me visualise pas très bien les points communs entre le tabindex et le zindex.

Mais encore une fois, je suis juste amateur...

Et je n'ai aucunement affirmé que je maitrisais les tabindex....

marc.suisse a écrit :
Salut

Je ne comprends pas très bien, les z-index permettent de mettre plusieurs "couches" l'une sur l'autre non ?

http://www.alsacreations.com/astuce/lire/84-comment-fonctionne-la-proprit-css-z-index.html

Ceci pour faire des effets de "profondeur" avec le contenu.

Les z-index sont a utiliser avec position(relative/absolute ou fixed) pou être activé.
Ils permettent de faire passer un element au dessus/dessous d'un autre lorsqu'il occupe le même espace.

marc.suisse a écrit :
Salut
J'avoue que je me visualise pas très bien les points communs entre le tabindex et le zindex.

Mais encore une fois, je suis juste amateur...

aucun points communs, je suis aussi un amateur ...

marc.suisse a écrit :
Salut

Et je n'ai aucunement affirmé que je maitrisais les tabindex....

Ton code HTML et CSS m'ont laisser penser le contraire et que tu en avais fais usage pour une raison de style.
Les valeurs que tu donne au tabindex sont celle que tes liens, dans ton document , avaient par défaut dans le flux, ils ne perturbent donc pas la navigation au clavier.

++

Salut

a écrit :
Les z-index sont a utiliser avec position(relative/absolute ou fixed) pou être activé.
Ils permettent de faire passer un element au dessus/dessous d'un autre lorsqu'il occupe le même espace.

Je ne comprends toujours pas le lien avec les tabindex....

a écrit :
Ton code HTML et CSS m'ont laisser penser le contraire et que tu en avais fais usage pour une raison de style.
Les valeurs que tu donne au tabindex sont celle que tes liens, dans ton document , avaient par défaut dans le flux, ils ne perturbent donc pas la navigation au clavier.

Excuses moi, j'avais mal interprété ta phrase, je l'avais comprise différemment...

Oui je sais que les liens sont dans le flux, mais quand j'avais essayé, cela ne marchait pas, mais je me rappelle maintenant pourquoi, la tabulation sautait à chaque fois le bouton "abonnements citycable cliquez ici", elle passait de nous contacter à interphones.

Je voulais juste mettre un tabindex sur ce bouton, mais cela faussait tout le reste.

Bizarre ...

z-index et tabindex n'ont pas de rapport , n'en cherche pas .

Tu peut appliqué un z-index avec n'importe quel sélecteur, dont :focus.

pour integrer un tabindex dans le flux sans perturber les autres elements, il suffit, en principe, d'un tabindex="0".

Un tabindex="-1" aura, encore en principe, pour effet d'exclure cet element.

Cdt

Bonjour bonjour

Voilà, j'ai fais les modifications conseillées par rodolfweb, cela marche super bien !

J'ai enlevé les tabindex et bizarrement, cela marche bien alors que la première fois que je l'avais testé, cela n'allait pas, étrange...

Je vous remercie tous infiniment pour vos bons conseils !

Excellent week-end

Bonjour à toutes et tous

Je suis sur un autre cas et j'avoue que là, je m'arrache les cheveux.

Voici l'exemple en ligne :

http://stop-soleil.ch/nouveau/version_definitive/index.php

Mon but est que le titre sur fond gris soit en haut à droite, mais cela ne marche pas, je ne comprends vraiment pas...

Voici donc mon css :

/* reset css */

img
{
border:none;
}

header, nav, footer, figure, section
{ 
display:block;
}

@font-face 
{
font-family: 'swz721c';
src: url('polices/swz721bc.eot');
src: url('polices/swz721bc.eot?#iefix') format('embedded-opentype'),
url('polices/swz721bc.woff') format('woff'),
url('polices/swz721bc') format('truetype'),
url('polices/swz721bc.svg#swz721c') format('svg');
font-weight: normal;
font-style: normal;
}

html 
{
min-height:100%;
height:100%;
width:100%;
padding:0;
margin:0;
background-image:url("images/fond_html.jpg");
}

body
{
min-height:100%;
width:980px;
margin-top:0px;
margin-right:auto;
margin-left:auto;
}

header
{
width:980px;
display:table;
height:210px;
margin-top:40px;
background-color:green;
}

#header_gauche
{
display:table-cell;
width:300px;
height:210px;
margin-right:20px;
}

#header_droite
{
display:table-cell;
width:680px;
background-color:blue;
}

#header_droite h1
{
font-family: 'Oswald', sans-serif;
font-size:2.4em;
width:630px;
background-color:gray;
font-weight:400;
vertical-align: top;
text-align: right;
}

Autre chose de bizarre, si je rajoute un height:210px; à #header_droite, les hauteurs des blocs vert et bleu augmente alors que cela ne devrait pas être le cas...

Si quelqu'un a une idée, ce serait bien volontiers

Excellente soirée.

Marc
Modifié par marc.suisse (20 Apr 2013 - 19:06)

rebonjour,

apparement tu as des difficulté a apprehender display et ses differentes valeurs, ainsi que vertical-align sur la façon de l'utiliser.

correction:

#header_droite
{
display:table-cell;
width:680px;
background-color:blue;
/*  */
text-align:right;
vertical-align:top;
}

#header_droite h1
{
font-family: 'Oswald', sans-serif;
font-size:2.4em;
width:630px;
background-color:gray;
font-weight:400;

/* */
display:inline-block;
/*margin:0; a toi de voir */
}

Dans ton problème précédent, sans tabindex tu as toujours :

'marc.suisse' a écrit :
la tabulation sautait à chaque fois le bouton "abonnements citycable cliquez ici", elle passait de nous contacter à interphones.

++

Salut, merci beaucoup pour cette correction

Oui j'avoue que j'ai un peu de peine

Mais ce n'est pas si évident que ça (j'aurai du le préciser) car je voudrais mettre encore du texte et des images en-dessous du h1, tout ceci toujours dans le bloc header_droite.

Comme le prototype que j'ai réalisé : http://stop-soleil.ch/nouveau/index.php

Donc si je mets du text-align sur le header_droite, cela ne jouera pas.
Modifié par marc.suisse (20 Apr 2013 - 19:29)

marc.suisse a écrit :


Mais ce n'est pas si évident que ça (j'aurai du le préciser) car je voudrais mettre encore du texte et des images en-dessous du h1, tout ceci toujours dans le bloc header_droite.

...

Donc si je mets du text-align sur le header_droite, cela ne jouera pas.

Cela ne jouera que sur les element de type inline(ou similaire) enfant direct, c'est pourquoi je t'ai mis le h1 en inline-block de façon qu'il soit sensible au text-align de son parent et que tu puisses lui donner une largeur.
Pour les éléments 'block' il suffit de redéfinir le text-align.

Il faut vraiment que tu apprennes à jouer avec ces valeurs pour en comprendre le fonctionnement et les effets.

Fait un document html simple avec du lorem ipsum (avec des portions de codes, ex: http://html-ipsum.com/ ) tu peut t'inspirer de gabarit aussi . http://dabblet.com est sympa pour ce genre de jeu/test, ou un plugin comme EditCSS pour FF qui te permet d’éditer en live le CSS de n'importe quelle page.

++