Discussion :

[Invité]

Bonjour,

Je suis confrontée à un souci que je ne parviens pas à régler :
J'ai créé un site où se place le logo d'une asbl dans le coin supérieur gauche, et le mon menu -constitué d'icones- que je souhaiterais voir apparaitre à la même hauteur que mon logo, mais dans le coin supérieur droit.



J'ai créé une div float left pour mon logo (header), et une div float right pour mon menu...

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="header"><img src="img/logo/alpha.png"></div>
 
<div id="menu">
    <ul>
        <a href="index.php?p=accueil"><li id="home"></li></a>
        <a href="index.php?p=apropos"><li id="association"></li></a>
        <a href="index.php?p=services"><li id="services"></li></a>
        <a href="index.php?p=soutien"><li id="soutien"></li></a>
        <a href="index.php?p=contact"><li id="mail"></li></a>
    </ul>
</div>

CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#header {
    float: left;
}
 
#menu {
    float: right;
    margin-left: 600px;
}

Mais mes éléments ne se mettent pas de la manière que je souhaiterais.
Le menu est décalé vers le bas par rapport au logo, et ne se positionne pas sur la même ligne...

Sur le conseil de Muchos, j'ai tenté de remonter mon menu de cette façon :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#menu {
	position: absolute;
	top: 20ex; 
	right: 8ex;
}

Mais ce code a le désavantage suivant :
Si je change ma résolution, ou augmente/diminue la taille de mon texte sur la page, j'ai mon menu qui sort du conteneur au lieu d'y rester...

Je débute. Mes questions sont peut-être royalement stupides, je m'en excuse par avance.

Pouvez vous m'éclairer sur la manière dont on gère ce genre de problème?
Merci d'avance.

[rodolphebrd]

Bonjour,

Dans un premier temps enlevez le marin-left car le float right suffit à placer l'élément à droite puis avec un margin-top vous calez ce dernier où vous le souhaitez.

[Muchos]

Perso, vu que le côté inférieur de la boîte Menu doit être aligné avec celui du logo, je pencherais pour DISPLAY:TABLE.

@-Reka-: vous étudiez css ? Si non, il serait bon de commencer, ou vous allez copier du code sans comprendre et vous compliquer la vie.

[rodolphebrd]

J'avais pensé à table-cell (peut-être à utiliser après une maitrise des bases en positionnement) mais là le problème est plutôt simple: une div dans un coin gauche et l'autre d'un coin droit de la fenêtre.

[Invité]

Rodolphebrd > Oui mais si je me contente simplement d'un float-right, mon menu va se placer à droite "n'importe où". Or, je souhaiterais que mon footer et mon menu soient en vis à vis l'un en dessous de l'autre...
C'est une erreur que de mettre un float right et de spécifier précisément où on souhaite qu'il se trouve?

Muchos >
display table : je l'ai mis mais... pour les ul.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#menu {
    position: relative;
    margin-left: 600px;
}
 
#menu ul {
    display: table;
    margin: 5px auto;
}
 
#menu ul li {
    display: table-cell;
}

Je poursuis depuis octobre une formation en cours du soir pour etre webdeveloppeuse, oui (en marge d'un emploi à temps plein qui n'a rien à voir, et d'un ménage à gérer). J'ai eu beaucoup de théorie, mais ce site est mon premier essai, je me dépatouille avec toutes les balises, attributs et autres comme je peux. Je fonctionne bcp par essai-erreur, je ne copie-colle pas n'importe quoi, par contre, je ne comprends pas toujours pourquoi telle chose qui devrait fonctionner ne fonctionne pas, et inversement.
Il se peut que ce que je produis soit un vrai fouillis, et j'ai p-e l'air de faire n'importe quoi, mais je m'applique comme je peux et avec le peu de temps que j'ai pour le faire .
Quoi qu'il en soit, j'avoue que je suis loin d'y voir clair avec les positionnements pour le moment. Les clear, les table inline-block-cell etc. ne me sont pas encore devenus limpides non plus.
L'idéal serait que je recommence mon site à zero pour le libérer de tous les elements perturbateurs que j'y ai sans doute insérés, mais je n'ai plus le temps de le faire à l'heure qu'il est...

Rodolphebrd > table cell, je l'ai mis pour les li.

Bon, ok, c'est la foire.

Je tenterai d'y voir plus clair le we prochain.
Encore merci pour votre aide.

[rodolphebrd]

Ah donc vous voulez un espace de 600px entre le menu et logo.

[Invité]

Rodolphebrd > euh...
Non?
A 600px à droite dans le conteneur.



Voilà le site : http://reka.ovh.org/school/Alpha/

Et donc, le menu que vous voyez sous le HR, je l'aimerais donc au dessus, à droite du logo.

Mais je ne voudrais pas abuser de votre temps et de votre patience.
J'ai désormais à peu près conscience de l'état désordonné de ma CSS suite à vos questions et vous m'avez déjà beaucoup aidée.
Je me pencherai consciencieusement sur mes fichiers dimanche prochain.

Bonne soirée

[rodolphebrd]

Non pas de problème.

Voici la solution avec table et table-cell en créant une div supplémentaire (contain):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="contain">
<div id="header"><img src="http://lorempixel.com/200/200" width="200" height="200"></div>
 
<div id="menu">
    <ul>
        <a href="index.php?p=accueil"><li id="home">home</li></a>
        <a href="index.php?p=apropos"><li id="association">association</li></a>
        <a href="index.php?p=services"><li id="services">services</li></a>
        <a href="index.php?p=soutien"><li id="soutien">soutien</li></a>
        <a href="index.php?p=contact"><li id="mail">mail</li></a>
    </ul>
</div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#contain{
	display:table;
}
#header {
	width:200px;
	display:table-cell;
}
 
#menu {
   padding-left:300px;
   display:table-cell;
   vertical-align:bottom;
}

[Invité]

Je testerai ça demain soir. Grand grand merci !

[Invité]

Ca fonctionne !
C'est génial !

Encore merci