<div> flottant [Résolu]

[jeanpierre]

Bonjour à tous, j'ai sur ma page web un "div container"que je voudrais rendre flotant.
J'ai essayé pas mal de choses mais imposible :

Code : Tout sélectionner

#navlist {
  margin:0 0; 
  padding: 0 0;
  position: absolute;
  top: 162px;
  left: 3px;
  margin-left: 0;
  font-family: Verdana,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#navlist li {
  border-top: 1px solid gray;
  margin: 0;
  list-style-type: none;
etc..

Vous pouvez voir la page: www.fuerteventura-losaloes-apartamentos.com
Qqun à une idée ??
Merci d'avance

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[calimo]

Je ne vois pas trace du moindre div sur la page que tu indiques
De plus la page contient pas mal d'erreurs : http://validator.w3.org/check?verbose=1 ... tos.com%2F !

[jeanpierre]

Salut calimo, la page en question est celle la :
http://www.doctora-werner.eu/homefr.html
et le div est le :

Code : Tout sélectionner

 <div id="navcontainer">

je m' etait trompé de page oups!

Code : Tout sélectionner

#navlist {
  margin:0 0; 
  padding: 0 0;
  position: absolute;
  top: 130px;
  left: 2px;
  margin-left: 0;
  font-family: Verdana,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#navlist li {
  border-top: 1px solid gray;
  margin: 0;
  list-style-type: none;
  list-style-imag

normalement je passe toujours mes pages au w3c validation, mais les anims flash ne passent pas si je les corrige celon le w3c elle ne fonctionnent plus (faite avec " e-anim")

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[calimo]

Pour le flash : http://joliclic.free.fr/html/object-tag ... flash.html
Si la page n'est pas valide, alors au moins ne mets pas de logo W3C ! Je pense que tu peux corriger toutes ces erreurs facilement.

Pour qu'un élément soit flottant, il faut utiliser la propriété "float", comme expliqué ici : http://www.siteduzero.com/tutoriel-3-13 ... #ss_part_2

[Invité]

salut calimo, comme je te dis dans mon mail la modif du texte flash provoque des erreurs.

Je ne me permettrais jamais de mettre le logo du w3c si la page n'est pas correct (le logo n'est pas sur la page "index",
et finalement le "float" a été essayé sans succès avec d'autre solutions trouvées sur différent site comme "alsa creation" et autres.
Je pensais simplement que le pb venait du "navcontainer" .
Mais je ne me décourage pas et continu de chercher.
A+

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[calimo]

le "float" a été essayé sans succès avec d'autre solutions trouvées sur différent site comme "alsa creation" et autres.
Je pensais simplement que le pb venait du "navcontainer" .

Hein ? En quoi "navcontainer" poserait-ce un problème ? Tu peux être plus précis (p.ex avec un exemple des solutions que tu as essayées, et en précisant ce qui n'allait pas ?)

[jeanpierre]

Millllles excuses je ne voulais pas parler de "float" J'suis un peut stressé en ce moment j'suis à coté de la plaque, ( ça c'était un autre pb sur une autre page qui entre temps à été réglé)
je voulais que "navcontainer" ce situe au milieu horizontal de la page.
Et mes tentatives de "center" sur le html n'ont rien fournis .
Sur le css j'ai essayé :
... position: relative;
margin-left: auto;
margin-right: auto;...
comme dans un conteneur de page mais ça reste toujours à gauche.
Et encore une fois "excuses" de t'avoir fait perdre tu temps avec mes étourderies.


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[calimo]

Effectivement, pour centrer un élément, il faut jouer avec les marges et les mettre sur "auto". Mais il faut que la largeur (width) soit fixée, ce qui ne peut pas être le cas ici (impossible de savoir par avance la largeur que prendra ton menu, ça dépend de trop de paramètres).

Je pense que tu devrais pouvoir résoudre ce problème en faisant des éléments de la liste de navigation des éléments en-ligne

Code : Tout sélectionner

#navlist li {
	display:inline
}

afin de pouvoir leur appliquer un text-align:center. Vire le #navcontainer, il ne sert probablement à rien (si ce n'est à complexifier le code). Il faudra peut-être appliquer un width:100% sur #navlist pour le forcer à prendre toute la largeur du parent...

[Invité]

J'vais essayer dans cette direction la , ça parait logique.
J'te tiendrait au courant ,
et encore merci.
A+

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[Invité]

J'ai essayer chez moi mais ça ne change rien.
j'ai viré le #navcontainer et effectivement ça ne servait à rien.
le "inline" était déjà dans #navlist li je l'est rajouté dans #navlist et essayé plusieurs combinaisons mais il ne veut pas bouger de la gauche.
C'est juste une question de look, pas un pb trop gros.


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[Asumbaa]

Salut,

Tu as laissé de côté une partie de la réponse.
Sur #navlist :

Code : Tout sélectionner

#navlist {
text-align: center;
width: 100%;
}

et sur #navlist li :

Code : Tout sélectionner

#navlist li {
display: inline;
}

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[jeanpierre]

Salut Asumbaa, J'ai essayé plein de combinaisons de cest tags et j'ai le #nav complet
qui descend de 5px environ et se met à droite en dehors de la page d'environ 5px aussi.

Code : Tout sélectionner

#navlist {
text-align: center; 
margin: 0 auto;
width:100%;
  position: absolute;
  top: 162px;


  font-family: Verdana,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
}
#navlist li {
  border-top: 1px solid gray;
  text-align: center;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  display: inline;
}
#navlist li a {
  border-left: 1em solid #aaaabb;
  padding: 0.1em 0.3em 0.1em 0.05em;
  background: #9797e8 none repeat scroll 0%;
  text-decoration: none;
  display: inline;
}
#navlist li a:link {
  color: #444488;
}
#navlist li a:visited {
  color: #666677;
}
#navlist li a:hover {
  border-color: #bbdc02;
  background: #ffcc66 none repeat scroll 0%;
  color: #ac7407;
}
#navlist a#current {
  border-color: #bbdc02;
  background: #ffcc66 none repeat scroll 0%;
  color: #ac7407;
}

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[calimo]

Si j'ouvre la page http://www.doctora-werner.eu/homefr.html
Que j'utilise la fonction "Éditer les CSS" de Web Developer, que je rajoute

Code : Tout sélectionner

#navlist {
text-align: center;
width: 100%;
}

au début de la feuille de style, j'ai bien le menu qui se centre !


Bref, je ne comprend pas trop ton problème

[Invité]

T'a raison avec "web developer " ça marche .
J'avais essayé ça en local et ça marchait pas !
je vais donc rectifier sur le server et j' ajoute un résolut.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3

[jeanpierre]

Problème réglé ! je met un résolut .
En réalité j'ai redémarré FF et ça fonctionne , je me suis acharné en local car FF et je crois qu'il gardait en caché l'ancienne css .
Bizard non ?
Un grand merci à tous et la prochaine fois je chercherais un peut mieux !


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.3