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 :

float sur div qui ne fonctionne pas


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Janvier 2008
    Messages
    58
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 58
    Par défaut float sur div qui ne fonctionne pas
    Bonsoir,
    j'ai un petit problème sur un float qui ne fonctionne pas : je veux faire flotter un div(dont l'id est doc) à gauche d'un autre(dont l'id est menu_droite) mais visiblement ça ne fonctionne pas.
    Pourriez vous m'expliquer pourquoi?
    Voici ma page:
    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
    <html>
    <head>
    	<style type="text/css">
    		#menu_droite
    		{
    			border: 2px solid red; 
    		}
    		#doc
    		{
    			float:left;
    			border: 2px solid black; 
    		}
     
    	</style>
    </head>
    <body>
     
     
    	<div id="doc">
    	<p>Synopsis : Jake Sully est un ancien marine immobilisé dans un fauteuil roulant. Malgré sa paralysie, Jake est resté un combattant au plus profond de son être.
    	Il est recruté pour se rendre à des années-lumière de la Terre, sur Pandora, où de puissants groupes industriels exploitent un minerai rarissime destiné à résoudre
    	la crise énergétique sur Terre. Parce que l’atmosphère de Pandora est toxique pour les humains, ceux-ci ont créé le Programme Avatar, qui permet à des « pilotes » 
    	humains de lier leur esprit à un avatar, un corps biologique commandé à distance, capable de survivre dans cette atmosphère létale. Ces avatars sont des hybrides
    	génétiquement en croisant l’ADN humain avec celui des Na’vi, les autochtones de Pandora. Sous sa forme d’avatar, Jake peut de nouveau marcher. On lui confie une m
    	ission d’infiltration auprès des Na’vi, devenus un obstacle trop conséquent à l’exploitation du précieux minerai. Mais tout va changer lorsque Neytiri, une très b
    	elle Na’vi, sauve la vie de Jake. Ce dernier est alors recueilli par son clan, et à travers de nombreuses épreuves et aventures, il va apprendre progressivement à
    	devenir l’un des leurs. Alors que la relation entre Jake et la réticente Neytiri s’approfondit, Jake en vient à respecter le mode de vie des Na’vi et finit par tr
    ouver sa place parmi eux. Reste pour lui à affronter l’ultime épreuve en les menant dans une bataille épique qui devra sceller le destin de tout un monde. </p>
    	</div>
     
    	<div id="menu_droite">
    		<ul>
    			<li>menu 1</li>
    			<li>menu 2</li>
    			<li>menu 3
    				<ul>
    					<li>sous menu 1</li>
    				</ul>
    			</li>
    		</ul>
    	</div>
     
     
    </body>
    </html>
    merci

  2. #2
    Membre confirmé
    Inscrit en
    Janvier 2008
    Messages
    58
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 58
    Par défaut
    Bon après quelque expérience j'ai compris pourquoi.
    Il semblerai que lorsque on fait un float, le point d'origine de la balise qui flotte et celle en dessus fusionnent mais pour que celle d'en dessous flotte il lui faut de la place.
    Or dans mon exemple le texte mange toute la place donc il faut utiliser un width sur la balise qui contient le texte pour la réduire.

  3. #3
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Bonsoir

    Il faut que tu indiques une largeur à ton div id="doc" parce que son contenu prend toute la largeur disponible, donc l'autre élément menu va à la ligne...

    Rajoute aussi le float:left au div menu pour régler le reste des problèmes...

    Remarque : utilises un doctype c'est mieux : pourquoi et lequel...

    edit : encore grillé

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    174
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 174
    Par défaut
    merci
    Quant-aux doctype, en général je les mets mais sans vraiment voir l'utilité.
    En faite je peut comprendre sont utilité en html, ça permet de décrire une certaine norme pour la page mais dans ce cas quel est l'intérêt du xhtml.
    Sur certain site on peut nous dit que le xhtml est plus normalisé que le html puisqu'il se fonde sur les règle du xml, mais dans ce cas pourquoi ne pas mettre le prologue xml et pourquoi les page xhtml sont envoyé avec le content-type à text/html et pas application/xhtml+xml?enfin bref je pense que ce n'est pas la bonne section pour débattre de ça lol.
    Mais bon c'est vrai que en xhtml comme en html les doctype sont utiles
    en tous cas merci pour ta réponse^^

  5. #5
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Si tu ne mets pas de DOCTYPE les navigateurs vont passer en mode quirks.

    Et dans cette configuration Internet Explorer par exemple passe à son modèle de boites personnel, par opposition au modèle de boite standard du W3C. En spécifiant une largeur, des marges internes et externes et une bordure, ta boite n'aura plus les mêmes dimensions entre IE et les autres navigateurs...

    D'où l'intérêt de toujours mettre un doctype.

  6. #6
    Membre Expert Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Par défaut
    Citation Envoyé par sebatlante Voir le message
    merci
    En faite je peux comprendre sont utilité en html, ça permet de décrire une certaine norme pour la page mais dans ce cas quel est l'intérêt du xhtml.
    Sur certain site on peut nous dit que le xhtml est plus normalisé que le html puisqu'il se fonde sur les règle du xml
    Pas plus normalisé non ça veut rien dire, HTML4 ou XML sont toutes deux des normes (ou plutôt des standards). XML est juste plus contraignant et exigeant sur la syntaxe et donc moins permissif... Un parser (interpréteur syntaxique) XML qui détecte une seule erreur dans un document XML n'affichera pas la page, tandis qu'un parser HTML l'affichera quelque soit le nombre d'erreurs.
    L'intérêt actuel du XHTML servi en text/html par rapport au HTML 4 est nulle dans la plupart des cas, sauf si tu prévois d'utiliser plus tard une application XML, auquel cas il vaudra mieux partir d'un document avec la syntaxe XMLisée du XHTML.

    Citation Envoyé par sebatlante Voir le message
    merci
    mais dans ce cas pourquoi ne pas mettre le prologue xml et pourquoi les page xhtml sont envoyé avec le content-type à text/html et pas application/xhtml+xml?enfin bref je pense que ce n'est pas la bonne section pour débattre de ça lol.
    Le doctype sert essentiellement à deux choses en HTML4:
    basculer en mode de rendu standard ou presque standard (pour la plupart d'entre eux) et valider ton document pour vérifier s'il obéit aux règles d'écritures de la DTD.

    En HTML 5 il sert uniquement au navigateur pour passer en mode de rendu standard.

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

Discussions similaires

  1. Evenement sur une div qui ne fonctionne pas
    Par lateek35 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/05/2012, 22h09
  2. Ecouteur sur JButton qui ne fonctionne pas
    Par Morgan7469 dans le forum Interfaces Graphiques en Java
    Réponses: 22
    Dernier message: 27/12/2011, 09h30
  3. J'ai des divs qui ne fonctionnent pas, pourquoi ?
    Par jejemo dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 23/01/2010, 00h54
  4. offsetHeight qui ne fonctionne pas sur un div
    Par Oluha dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 18/01/2008, 16h12
  5. Masquage de div qui ne fonctionne pas sur IE
    Par Ziltoid dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 18/12/2007, 19h31

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