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 :

Position d'éléments avec CSS


Sujet :

Positionnement en CSS

  1. #1
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Septembre 2006
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2006
    Messages : 15
    Points : 10
    Points
    10
    Par défaut Position d'éléments avec CSS
    Bonjour à tous,

    Je suis (très) grande débutante dans Dreamweaver (mais je me soigne ;p), et j’ai un problème que je n’arrive pas à résoudre. Je vais tenter d’être la plus claire possible :

    J’ai créé un élément galerie photo en swf (avec vignettes et agrandissements…) avec le logiciel JAlbum. Je veux donc l’intégrer à une page existante de mon site.

    Les pages de mon site sont structurées avec des tableaux, que j’ai « habillé » avec des propriétés CSS.

    Je suis donc partie de la page générée avec JAlbum, et je suis allée dans le code pour coller tous mes tableaux qui constituent ma page, autour de mon objet swf (qui lui est dans une balise « div » si je ne dis pas d’énormités).

    J’ai donc réussi à faire cohabiter mon modèle de page avec mon module photo. Cool.

    Le problème, c’est que le module photo ne se place pas là où je voudrais. Moi, je le voudrais dans la partie du tableau prévue à cet effet (partie centrale, à droite de ma barre de navigation, dans laquelle je met habituellement le contenu de mon site, texte et photos).

    Or, je sais que le module est relié à une feuille CSS qui permet d’en modifier la disposition. J’ai beau tâtonner et essayer de jouer sur les marges, etc…, je n’arrive pas à coordonner les deux.

    Si quelqu’un pouvait me tuyauter, je lui serais vraiment reconnaissante !

    Je ne sais pas si je suis très claire, et je ne sais pas si cela peut aider, alors voici le code html de ma page ainsi que le code des feuilles de style qui lui sont rattachées :

    (soyez indulgents, je me doute qu’il y a des choses pas très « clean »)

    CODE HTML

    Code html : 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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="expires" content="Sun, Dec 31 1970 12:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache">
    <title>BananAlbum</title>
    <script type="text/javascript" src="res/scripts.js"></script>
    <script type="text/javascript" src="res/swfobject.js"></script>
    <link rel="stylesheet" href="res/styles.css" type="text/css" charset="utf-8"></link>
    <link href="../../../../feuille_style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
            background-image: url(../../../structure/cadre_general/morceaux_rayures_vertes.jpg);
    }
    -->
    </style></head>
    <body bgcolor="#3e4307">
    <body onload="MM_preloadImages('file:///Macintosh HD/Users/Elodie/Desktop/Galerie_tofs/images/contenu/galerie_photo/module_gallerie/images/01_jpg.jpg')">
    <table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="320" rowspan="2" class="rect_1">&nbsp;</td>
        <td colspan="2" class="rect_2">&nbsp;</td>
      </tr>
      <tr>
        <td width="765"><img src="file:///Macintosh HD/Users/Elodie/Desktop/Galerie_tofs/images/structure/images_bandeaux/bandeau_galerie.jpg" width="765" height="150" /></td>
        <td width="15" class="ombre_droite">&nbsp;</td>
      </tr>
     
      <tr>
        <td>&nbsp;</td>
        <td colspan="2" class="ombre_bas">&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="1100" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="165" height="14">&nbsp;</td>
        <td width="915" height="14" class="fond_beige_haut">&nbsp;</td>
        <td width="20" height="14">&nbsp;</td>
      </tr>
      <tr>
        <td class="coin_vert_1">&nbsp;</td>
        <td class="fond_beige_milieu">&nbsp;</td>
        <td class="coin_vert_2">&nbsp;</td>
      </tr>
      <tr>
        <td valign="top" class="fond_vert"><a href="../index.html" class="navigation">Home page</a> <a href="accueil_resto_FR.html" class="navigation">Accueil &amp; Restauration</a> <a href="camping_FR.html" class="navigation">Camping</a> <a href="locations_FR.html" class="navigation">Locations</a> <a href="piscine_FR.html" class="navigation">Piscine</a> <a href="lac_FR.html" class="navigation">Lac</a> <a href="peche_FR.html" class="navigation">Pêche</a> <a href="animations_FR.html" class="navigation">Animations</a> <a href="curiosites_FR.html" class="navigation">Curiosités</a> <a href="reservation_FR.html" class="navigation">Réservation</a> <a href="tarifs_FR.html" class="navigation">Tarifs</a> <a href="galerie_FR.html" class="navigation">Galerie photo</a> <a href="contact_FR.html" class="navigation">Contact</a> <a href="quisommesnous_FR.html" class="navigation">Qui sommes nous</a> <a href="liens_FR.html" class="navigation">Liens</a></td>
    <td background="../images/structure/cadre_general/fond_beige_milieu.gif"><blockquote>
          <p align="justify">&nbsp;</p>
          </blockquote>
        </td>
        <td class="fond_vert">&nbsp;</td>
      </tr>
     
      <tr>
        <td class="coin_vert_3">&nbsp;</td>
        <td class="fond_beige_milieu">&nbsp;</td>
        <td class="coin_vert_4">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td class="fond_beige_bas">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <!-- Rudin Swagerman -->
    <!-- thegreatesthits.net -->
    <!-- 2007 -->
    <!-- BananAlbum.net -->
    	<div id="flashcontent">
    	<noscript>
    	<a href="http://www.bananalbum.com/go/enablejavascript/"><img src="res/PleaseEnableJavascript.gif"/></a>
    	</noscript>
    	<script type="text/javascript">
                    document.write("<a href=\"http://www.bananalbum.com/go/getflash/\"><img src=\"res/PleaseUpdateFlashPlayer.gif\"/></a>");
            </script>
    	</div>
     
    	<script type="text/javascript">
                    // <![CDATA[
                    
            document.title = "images_de_base";
            bgcolor = "#3e4307";
            imgcolor = "#ffffff";
            linecolor = "#9ea36a";
            txtcolor = "#9ea36a";
                    respath = "res/";
                    var so = new SWFObject("res/BananAlbum.swf", "BananAlbum", "100%", "100%", "8", "#3e4307");
                    so.addVariable("jalbum", "true");
                    so.addVariable("bgcolor", bgcolor.replace("#","0x"));
                    so.addVariable("imgcolor", imgcolor.replace("#","0x"));
                    so.addVariable("linecolor", linecolor.replace("#","0x"));
                    so.addVariable("txtcolor", txtcolor.replace("#","0x"));
                    so.addParam("allowFullScreen", "true");
                    so.write("flashcontent");
                    
                    // ]]>
            </script>
    </body>
    </html>
    CSS DU MODELE DE PAGE

    Code css : 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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    @charset "UTF-8";
    /* CSS Document */
    p{
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #330000;
    	line-height: 18px;
    	padding: 3px;
    }
    .gras {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-style: normal;
    	font-weight: bold;
    	color: #330000;
    }
    .navigation {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #FFFFCC;
    	font-style: normal;
    	font-weight: normal;
    	text-decoration: underline;
    	background-color: #333805;
    	display: block;
    	padding: 8px;
    	width: auto;
    }
    .fond_vert {
    	background-color: #333805;
    }
    .rect_1 {
    	background-image: url(images/structure/cadre_general/1_320x165logo.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
    .rect_2 {
    	background-image: url(images/structure/cadre_general/2_780x15.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
    .ombre_bas {
    	background-image: url(images/structure/cadre_general/3bis.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
    .ombre_droite {
    	background-image: url(images/structure/cadre_general/4bis.gif);
    	background-repeat: no-repeat;
    	background-position: center center;
    }
    .fond_beige_haut {
    	background-image: url(images/structure/cadre_general/fond_beige_haut.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    .fond_beige_milieu {
    	background-image: url(images/structure/cadre_general/fond_beige_milieu.gif);
    	background-repeat: repeat-y;
    }
    .fond_beige_bas {
    	background-image: url(images/structure/cadre_general/fond_beige_bas.gif);
    	background-repeat: no-repeat;
    	background-position: top;
    }
    .coin_vert_1 {
    	background-image: url(images/structure/cadre_general/5_165x15.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    .coin_vert_2 {
    	background-image: url(images/structure/cadre_general/6_20x15.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    }
    .coin_vert_3 {
    	background-image: url(images/structure/cadre_general/7_envers.gif);
    	background-repeat: no-repeat;
    	background-position: top;
    }
    .coin_vert_4 {
    	background-image: url(images/structure/cadre_general/8_envers.gif);
    	background-repeat: no-repeat;
    	background-position: top;
    }
    .pages_galerie {
    	background-color: #333508;
    	background: 333508;
    }


    CSS DU MODULE PHOTO

    Code css : 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
    html, body {
    	width: 100%;
    	height: 100%;
    	overflow: hidden;
    	margin: 0;
    	padding: 0;
    }
     
    #flashcontent {
    	width:80%;
    	height:80%;
    	position:absolute;
    	z-index:100;
    	left:215px;
    	top:300px;
    }
    /*
     * BananAlbum | <a href="http://www.BananAlbum.net" target="_blank">www.BananAlbum.net</a> | 2007
     */

    MERCI D’AVANCE POUR VOS REPONSES !

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 825
    Points
    14 825
    Par défaut
    Je pense que le plus simple est que tu crées un tableau de deux colonnes, la première pour mettre ta navigation et la seconde ton div qui contient le swf et d'enlever le position:absolute.

    Ou sinon, si tu as le temps, plutôt lire les cours :

    http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

  3. #3
    Membre à l'essai
    Profil pro
    Étudiant
    Inscrit en
    Septembre 2006
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2006
    Messages : 15
    Points : 10
    Points
    10
    Par défaut
    OK merci bcp !

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

Discussions similaires

  1. Comment rendre la position dynamique avec CSS?
    Par m3allem001 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 28/01/2010, 16h31
  2. Position d'éléments en CSS
    Par El Locos dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/10/2009, 17h10
  3. probleme de position avec css
    Par bouzakher dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 06/03/2009, 20h52
  4. elimination du contour d'un élément d'un formulaire avec css
    Par skyangel20 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 12/03/2007, 18h00
  5. Réponses: 2
    Dernier message: 04/12/2006, 21h40

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