IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Positionnement du contenu par rapport au menu vertical déroulant


Sujet :

Positionnement en CSS

  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Positionnement du contenu par rapport au menu vertical déroulant
    Bonjour,
    Depuis des lustres, je m'arrache régulièrement les cheveux pour positionner le contenu principal de ma page à droite du premier niveau de mon menu, c'est à dire à 150px du bord gauche du document. J'ai aussi essayé d'utiliser flexbox sans arriver à rien (je n'ai malheureusement pas conserver mes essais) mais je préfère utiliser l'affichage en table. A défaut de le maîtriser mieux, je le maîtrise moins mal.
    Fichier html simplifié:
    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
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>Titre</title>
    	<link rel="stylesheet" media="all" type="text/css" href="structure.css" /> <!-- Dimensions et positions -->
    	<link rel="stylesheet" media="screen" type="text/css" href="style0.css" /> <!-- Apparence -->
    </head>
     
    <body>
    	<section id="main">
    		<div id="left">
    			<nav class="mainNav">
    <ul class="col1">
    	<li><a href="">Accueil</a></li>
    	<li><a href="">Test 1</a></li>
    	<li><a href="">Test 2</a></li>
    	<li><a href=""><img src="../images/user.png" /></a>
    		<ul class="col2">
    			<li><a href="logout.php">Déconnexion</a></li>
    			<li><a href="editPwd.php">Changer mot de passe</a></li>
    		</ul>
    	</li>
    </ul>
     
    			</nav>
    		</div>
    		<article id="right">
    			<h2>Page d'accueil</h2>		
    		</article>
    	</section>
     
    </body>
    </html>
    Fichier structure.css
    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
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    body, table
    {
    	font-size:11pt;
    }
    #main {
    	display:table;
    	width:100%;
    }
    #left  {
    	display:table-cell;
    	/*width:150px;*/
    	width:50px;
    	margin:0;
    	padding: 3px;
    	font-size:.9rem;
    	border:1px solid black;
    }
    #right {
    	display:table-cell;
    	/*margin-left:-300px;*/
    	padding-left:20px;
    	padding-right:20px;
    	border:1px solid black;
    }
    nav
    {
    	padding:3px;
    }
    Fichier style0.css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    h1, h2
    {
    	text-align: center;
    }
    /*
    Menu selon proposition de jreaux62
    La balise nav a été remplacée par la classe mainNav
    */
    .mainNav
    {
    	width: 450px;
    }
    .mainNav ul
    {
    	width:30%; /* 3 niveaux de menu -> 30% de la largeur pour chaque niveau */
    	margin: 0;
    	/*padding: 0 5px;*/
    	border: 1px solid #666;
    	border-bottom: none;
    }
    .mainNav ul ul,
    .mainNav ul ul ul
    {
    	position: absolute;
    	width:100%;
    	left:100%; /* décalé de 100% à droite du menu parent */
    	top: -1px;
    	border: 1px solid #666;
    	border-bottom: none;
     
    	display: none; /* on masque */
    	z-index:15;
    }
    .mainNav ul li, 
    .mainNav ul li ul li, 
    .mainNav ul li ul li ul li
    {
    	position: relative;
    	list-style: none;
    	border-bottom: 1px solid #666;
    	height: auto;
    	line-height: 20px;
    }
    .mainNav li a
    {
    	text-decoration: none;
    	padding: 4px 8px;
    	display: block;
    	width: auto;
    	height: auto;
    	line-height: 20px;
    	color:maroon;
    }
    .mainNav ul li:hover > ul {
    	display: block; /* on affiche */
    }
    .mainNav ul, .mainNav ul ul, .mainNav ul ul ul
    {
    	background-color: #ddd;
    }

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    display:table; / display:table-cell; fonctionnent très bien.
    Donc, pas besoin de changer si tu es à l'aise avec.

    Par contre...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #left  {
    	display:table-cell;
    	width:50px;
     
    ...
     
    .mainNav
    {
    	width: 450px;
    }
    Tu imposes là la largeur mini de 450px pour le div aussi.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    .mainNav ul
    {
    	width:30%; /* 3 niveaux de menu -> 30% de la largeur pour chaque niveau */
    ...
    Non, car les sous-menu sont en position:absolute; : il ne sont pas dans le flux, et passeront donc "au-dessus.
    Il faut donc mettre 100%.

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Je ne m'en sors pas.
    J'ai supprimé la largeur de la classe mainNav (racine de la classe)
    La bordure du div est utilisée à des fins de test.
    Quelle que soit la largeur que je règle pour le div, le menu de premier niveau dépasse le div d'une valeur constante (environ 30 pixels)
    La bordure inférieure débute à peu près à la même distance du bord gauche de même que le texte de liste. J'ai donc essayé de jouer sur les marges gauches des li mais rien ne bouge.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. positionner une image par rapport à un menu
    Par Jo94230 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 01/08/2013, 14h53
  2. Positionner une "div" par rapport a un "input"
    Par dragonfly dans le forum Général JavaScript
    Réponses: 19
    Dernier message: 27/06/2007, 10h53
  3. Réponses: 6
    Dernier message: 10/04/2007, 15h14
  4. Positionner un formulaire par rapport à un Datagridview
    Par indigoo dans le forum Windows Forms
    Réponses: 3
    Dernier message: 16/01/2007, 17h05
  5. [HTML]Positionner un élément par rapport à un autre
    Par Samanta dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/03/2006, 17h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo