Menú <nav> a la derecha en fixed con relación al body
Resuelto
TECKNON
Mensajes publicados
302
Estado
Miembro
-
xdiz Mensajes publicados 109 Fecha de registro Estado Miembro Última intervención -
xdiz Mensajes publicados 109 Fecha de registro Estado Miembro Última intervención -
Hola a todos,
Tengo un texto y un menú de navegación: texto dentro de una etiqueta section y menú dentro de una etiqueta nav. Quiero que el texto esté a la izquierda y el menú a la derecha, pero que el menú esté en posición fija. El problema es que no quiero que se coloque respecto al borde de la pantalla, sino respecto a la etiqueta body, para que siga el posicionamiento del sitio cuando la ventana es pequeña. Y no encuentro cómo hacerlo, me tiene muy cansado, así que si alguien tiene la solución, por favor. ¡GRACIAS DE ANTEMANO!
mi código CSS:
<nav width:="" text-align:="" left="" display:="" inline-block="" border:="" blue="" outset="" border-radius:="" position:="" fixed="" right:="" font-size:="" font-weight:="" bold="" font-family:="" new="" roman="" sans="" ms="" georgia="" serif="" />
Tengo un texto y un menú de navegación: texto dentro de una etiqueta section y menú dentro de una etiqueta nav. Quiero que el texto esté a la izquierda y el menú a la derecha, pero que el menú esté en posición fija. El problema es que no quiero que se coloque respecto al borde de la pantalla, sino respecto a la etiqueta body, para que siga el posicionamiento del sitio cuando la ventana es pequeña. Y no encuentro cómo hacerlo, me tiene muy cansado, así que si alguien tiene la solución, por favor. ¡GRACIAS DE ANTEMANO!
mi código CSS:
<nav width:="" text-align:="" left="" display:="" inline-block="" border:="" blue="" outset="" border-radius:="" position:="" fixed="" right:="" font-size:="" font-weight:="" bold="" font-family:="" new="" roman="" sans="" ms="" georgia="" serif="" />
10 respuestas
-
Bonjour,
Vous devez mettre votre 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 ;)
--
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 -
Hola,
Para la ubicación, echa un vistazo un poco al sitio del cero:
http://www.siteduzero.com/tutoriel-3-13566-le-positionnement-en-css.html
Buena suerte. -
-
-
Dije una tontería, una posición flotante (propiedad float:right) no puede combinarse con una posición fija (propiedad position:fixed).
Tu código funciona con Chrome y Firefox pero no con IE (casi normal).
Escribe en Google: position fixed + float, tendrás ideas.
Colocas tu navegación justo después de la etiqueta body si quieres que tu menú “toque” el body en lugar de la pantalla.
--
1) Piensa en marcar tu discusión como [Resuelto].
2) Detalla tu problema al máximo, para que podamos hacer un diagnóstico preciso-
Justo quiero que esté entre mi etiqueta
y pero no funciona, se pega a la pantalla un esquema, ya entenderás así que esto es lo que tengo <image>http://img803.imageshack.us/img803/1588/monsiteactuelement.png</image> y esto es lo que quiero <image>http://img827.imageshack.us/img827/4245/sequejeveux.png</image> porque si reducimos la ventana de Firefox, el menú <nav> queda flotando por encima de <section>
-
-
Hola,
Tu archivo HTML (hay que invertir nav y 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; } -
@Adenora : el menú "nav" no está en posición fixed en tu ejemplo ...
@tecknon : lo que quieres hacer no es posible (ver este artículo) : https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#position-fixe.
Sin embargo puedes intentar hacer como en este sitio (http://www.comune.carlopoli.cz.it/last-news/200-piano-di-rientro-regionale-sanitario-guardie-mediche.html) con el pequeño bloque de redes sociales que permanece a la izquierda del bloque de contenido.
PD: piensa en usar la extensión Firefox Firebug si no es ya el caso ;)
--
1) Piensa en marcar tu discusión como [Resuelta].
2) Detalla tu problema al máximo, para que podamos establecer un diagnóstico preciso -
Mi código funciona y está tomado del sitio del cero, ¿por qué usar position:fixed?
Y pasa bajo IE, si añadimos un script. -
Tu HTML y CSS funcionan, es cierto, está a la derecha, pero su menú no está en posición fija. Su objetivo es que su menú de la derecha permanezca siempre visible en la pantalla, sin importar el desplazamiento hacia abajo.
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 -
gracias por tu ayuda pero ¿tú crees que no es posible? debe haber una solución de todos modos, es estúpido si no.
