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 :

cadre flottant a droite dans contenu


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Par défaut cadre flottant a droite dans contenu
    Bonjour,

    J'ai une page avec un contenu de taille variable avec un menu de taille fixe à droite et à gauche.

    Je souhaite ajouter dans la partie contenu un cadre flottant a droite qui contiendra des infos rapides.

    Le problème est que le flux de mon contenu passe par dessus mon cadre droit.
    de plus, mon contenu ne flotte pas à gauche de ce cadre
    voici le code:
    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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>cadre flottant</title>
        <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
        <style type="text/css">
     
        body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
        #principal{ max-width:1024px; min-width:800px; margin:auto; padding:0;}
        DIV#conteneur{margin:0; padding:0;}
        DIV#menu_gauche{ margin:0; padding:0; width:200px; float:left; clear:both; background-color:red;}
        DIV#menu_droite{margin:0 0 0 0px; padding:0; float:right; width:201px; background-color:yellow;}
        DIV#contenu{ padding:0 15px 0 10px; overflow:auto;}
        h1{ font-size:1.6em; color:#014F61; margin:0; padding:0; font-weight: bold; text-align: center;}
        h2{ font-size:1.2em; color:#014F61; font-weight: normal; padding:0 0 0 30px; margin:30px 0 0 0; border-bottom:1px solid #000000; }
        .cadre-droite { float:right; width:35%; margin-left:10px;}
        .cadre-droite h2{ font-size:1.2em; color:#014F61; font-weight: normal; border:none;}
        DIV#filAriane{ margin:0; padding:20px 0 0 0; font-size:0.6em; }
        DIV#filAriane SPAN.texte{ color:#014F61; font-weight:bold; margin:0; padding:0;}
        DIV.bloc-contenu{margin:0; padding:1px; clear:both; overflow:auto;}
     
     
        </style>
    </head>
    <body>
        <div id="principal">
    		<div id="conteneur">
    			<div id="menu_gauche">
    			bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />
    			</div>
                <div id="menu_droite">
                bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />bla bla<br />
    			</div>
    			<div id="contenu">
     
    				<a id="haut" name="haut"></a>
    				<div id="filAriane">
    					Vous &ecirc;tes ici : <span class="texte"><a href="">Accueil</a> &gt; <a href="">par la</a> &gt; la page</span>
                    </div>
     
    				<div id="page">
                        <h1>titre 1</h1>
     
                        <div class="cadre-droite" style="float:right; width:35%; margin-left:10px;">
                            <h2>info rapide</h2>
                            <div class="texte">
                                <ul>
                                    <li><a href="">lien 1</a></li>
                                    <li><a href="">lien 2</a></li>
                                </ul>
                            </div>
                        </div>
     
                        <h2>titre h2 contenu</h2>
                        <div class="bloc-contenu">
                            <div class="texte">
                                bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                            </div>
                        </div>
     
                        <h2>titre h2 contenu 2</h2>
                        <div class="bloc-contenu">
                            <div class="texte">
                                bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
                            </div>
                        </div>
                    </div>
    			</div>
    		</div>			
    	</div>
    </body>
    </html>
    merci pour votre aide

    EDIT: pour le contenu qui ne flotte pas à gauche j'ai vu ma connerie à cause du bloc contenu. par contre pour le flux du h2 je vois toujours pas

  2. #2
    Membre émérite Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Par défaut
    résolu avec un overflow:auto; sur le h2.

    Désolé pour le dérangement.


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

Discussions similaires

  1. Interdire le Clic Droit dans une appli sous windows XP
    Par new-gate dans le forum Windows
    Réponses: 10
    Dernier message: 03/11/2005, 23h37
  2. Aligner à gauche et à droite dans un paragraphe
    Par camboui dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 02/11/2005, 10h36
  3. Réponses: 1
    Dernier message: 25/10/2005, 20h11
  4. clic droit dans une DrawGrid
    Par underdog dans le forum C++Builder
    Réponses: 4
    Dernier message: 16/03/2005, 15h21
  5. Clique droit dans une ListBox
    Par LoicH dans le forum C++Builder
    Réponses: 5
    Dernier message: 07/02/2005, 22h50

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