Menu <nav> a droite en fixed à rapport a body

Résolu

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention -
xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention - 14 mars 2012 à 08:24

salut all ,

j'ai un texte et un menu de navigation donc texte dans balise section et menue dans une balise nav
je veut que le texte soit a gauche et le menue a droite mais que le menue soie en position fixe
le blem et que je veut pas qu'il se place par rapport au bort de l'écran mais par rapport a la balise body comme ça il suis le positionnement du site quand l'ecrant utilisateur a une petite résolution
et je trouve pas comment faire sa me saoule grave alors si quelqu'un a la soluce
MERCI D'AVANCE !!!
mon code css :

nav
{
	width: 20%;
	text-align: left;
        display: inline-block;
        border: 3px blue outset;
	border-radius: 10px;
	position: fixed;
	right: 0px;
	
}

section
{
	width: 80%; 
	display: inline-block;
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
	
}

A voir également:

Menu <nav> a droite en fixed à rapport a body
Les textes ne doivent pas être en retrait à droite et à gauche - Guide
Menu déroulant excel - Guide
Nav privée - Guide
Point vert en haut a droite - Accueil - Protection
Barre droite clavier - Forum Windows

10 réponses

Réponse 1 / 10

xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention 41

Bonjour,

Tu dois mettre ta navigation à droite grâce au flottant : float:right, cela donnera:

#nav {
	width: 20%;
	text-align: left;
        float: right;
        border: 3px blue outset;
	border-radius: 10px;
	position: fixed;
	right: 0px;	
}

#section
{
	width: 80%; 
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
}

Une partie du code HTML serait le bienvenu ;)

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

justement je l'ai déjà fait ça et sa ne marche pas c'est même la premier chose que j'ai faite et sa marche pas reste coller a droite de la fenêtre
code html


<body> 
<header> 
            <h1> titre de reve </h1> 

</header> 



<nav> 
    <ul> 
     <li><a id="tes" href="tes.html"> tes </a></li> 
     <li><a id="ta" href="ta.html"> ta </a></li> 
     <li><a id="tot" href="tot.html"> tot</a></li> 
     <li><a id="pet" href="pet.html">pet </a></li> 
    </ul>  
</nav> 
 <section> 
             <p> testestetstetstststsststteteteteetet </p> 
               <p> testestetstetstststsststteteteteetet </p> 
             <p> testestetstetstststsststteteteteetet </p> 
       </section> 
</body>

Réponse 2 / 10

tomtom02

Bjr,

Pour le positionnement, regarde un peu le site du zéro:

http://www.siteduzero.com/tutoriel-3-13566-le-positionnement-en-css.html

Bon courage.

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

salut justement je me sert de se cour même de l'ancien !!!
je trouve pas de soluce quand même

Réponse 3 / 10

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

UP SVP!!!!

Réponse 4 / 10

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

UP SVP!!!!

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 10

xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention 41

J'ai dis une bêtise, une position flottante (propriété float:right) ne peut être cumulée avec une position fixe (propriété position:fixed).

Ton code passe avec Chrome et Firefox mais pas avec IE (presque normal).

Tape dans google : position fixed + float, tu auras des idées.

Tu places ta navigation juste après ta balise body si tu veux que ton menu "touche le body au lieu de toucher l'écran".

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

justement je veut qu'il soit entre ma balise <section> et <body> mais sa marche pas il se colle a l'écran
un schema tu vas comprendre

voila ce que j'ai
<image>http://img803.imageshack.us/img803/1588/monsiteactuelement.png</image>

et voila ce que je veux
<image>http://img827.imageshack.us/img827/4245/sequejeveux.png</image>

parce que si on réduit la fenêtre Firefox et bien le menu <nav> se retrouve a flotter au dessus de <section>

Réponse 6 / 10

Utilisateur anonyme

Bonjour,

Ton fichier html (il faut inverser nav et section) :

<body> 
    <header> 
        <h1> titre de reve </h1>
     </header> 

    <section> 
        <p> testestetstetstststsststteteteteetet </p> 
        <p> testestetstetstststsststteteteteetet </p> 
        <p> testestetstetstststsststteteteteetet </p> 
    </section> 
	   
    <nav> 
		<ul> 
			<li><a id="tes" href="tes.html"> tes </a></li> 
			<li><a id="ta" href="ta.html"> ta </a></li> 
			<li><a id="tot" href="tot.html"> tot</a></li> 
			<li><a id="pet" href="pet.html">pet </a></li> 
		</ul>  
     </nav> 
</body>

Et ton fichier css :

body {
	margin:auto;
	width:900px;
}

nav {
	margin-left:80%;
	text-align: left;
        border: 3px blue outset;
	border-radius: 10px;
}

section
{
	float:left;
	width: 80%; 
	font-size: 90%;
	font-weight: bold;
	text-align: left;
	font-family: "Times New Roman", "Comic Sans MS", Georgia, serif;
	border: 3px blue outset;
}

Réponse 7 / 10

xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention 41

@Adenora : le menu "nav" n'est pas en position fixed dans ton exemple ...

@tecknon : ce que tu veux faire n'est pas possible (voir cet article) : https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-fixe.

Par contre tu peux essayer de faire comme sur ce site (http://www.comune.carlopoli.cz.it/last-news/200-piano-di-rientro-regionale-sanitario-guardie-mediche.html) avec le petit bloc des réseaux sociaux qui reste à gauche du bloc contenu.

PS : pense à utiliser l'extension Firefox Firebug si ce n'est pas déjà le cas ;)

Réponse 8 / 10

Utilisateur anonyme

Mon code fonctionne et est tiré du site du zéro, donc pourquoi utiliser position:fixed.
Et il passe sous IE, si on rajoute un script.

Réponse 9 / 10

xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention 41

Ton HTML et CSS fonctionne, certes il est à droite, mais son menu n'est pas en position fixe.
Son but est d'avoir son menu de droite qui reste toujours affiché à l'écran quelque soit le scroll vers le bas.

1) Pensez à marquer votre discussion comme [Résolu].
2) Détaillez votre problème un maximum, afin qu'on puisse établir un diagnostic précis

Réponse 10 / 10

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

merci de votre aide mais tu es sur c'est pas possible ? il doit y avoir une solution quand même c'est con si non

TECKNON Messages postés 267 Date d'inscription Statut Membre Dernière intervention 41

merci a tous je mets en résolue au pire je le ferais en JavaScript vue que c'est possible ^^ et du temps je mettrais le menu a gauche vue qu'ela sa marche a plus et merci encore ^^

xdiz Messages postés 108 Date d'inscription Statut Membre Dernière intervention 41

De rien ;)
Des fois on est obligé de revoir son analyse pour trouver une "solution" ;)

Discussions similaires

Tous les paragraphes sont considérés comme des titres

Barre verticale droite sur clavier

écrire un rapport de travail

le signe " | " dans excel

Barre verticale droite sur clavier mac

Votre réponse

Discussions similaires