Créer un compte
Connexion

Boutons de navigationGénérateur d'Emails Anti-Spam (Javascript)Compresseur de Code JavascriptUserbarTextes stylés (Pseudo)Signatures pour forumsImages perso pour forums (avatar)Menus (X)html web 2.0Convertisseur de Caractères Spéciaux HTMLSondages
Vous êtes ici: Support du Web > Forum > Sites Web > (X)html/CSS/Javascript > Problème de div css

Problème de div css

Pour créer et répondre aux sujets, vous devez être connecté.
Pages: 1
Auteur Message
pinprenelle
04/01/2011 à 18:23:19
pinprenelle
Membre
 Bonjour

D'abord Bonne année tout le monde et longue vie à support du web :#1:

Je suis toujours coincée avec mon fichu site de malheur
J'ai un problème avec mon menu déroulant en css mais ça on verra plus tard ^^
Ce qui me coince le plus c'est que je travaille qu'avec des div et j'ai du mal à les positionner comme je veux: j'ai un div général qui contient mon site, à l'intérieur j'ai un div en haut qui prends toute la longueur, j'ai un autre div en dessous à gauche pour le menu et enfin un dernier qui doit s'aligner avec mon menu mais qui systématiquement va sous le div général :(

mieux qu'un long discours: le code! Il est un peu pourri car j'ai laissé tous mes tests ^^
<div id="SectImage1" style="background-image:url(/media/panorama-2.jpg);height:600px; width:960px;" >
          <!--<div class="main">-->
              <div class="banner">
                    <table border="0" cellpadding="0" cellspacing="2" width="100%" ><tr>
                      <td width="30"><a href="#"><img src="<?php echo TEMPLATE_DIR;?>/images/FR.jpg" border="0"></a></td>
                      <td width="30"><a href="#"><img src="<?php echo TEMPLATE_DIR;?>/images/EN.jpg" border="0"></a></td>
                      <td width="30"><a href="#"><img src="<?php echo TEMPLATE_DIR;?>/images/DE.jpg" border="0"></a></td>
                      <td width="30"><a href="#"><img src="<?php echo TEMPLATE_DIR;?>/images/NL.jpg" border="0"></a></td>
                      <td align="right"><a href="<?php echo WB_URL; ?>/" target="_top"><?php page_title('', '[WEBSITE_TITLE]'); ?></a>
                        <span><?php //WB_TITLE; ?></span></td></tr>
                    </table>
              </div>
              <!-- MENU + NEWSLETTER -->
              <div id="gauche">
                    <!-- menu --><div id="titremenu">MENU</div>            
                    <div id="avmenu">
                         
                        <?php show_menu2(0, SM2_ROOT,SM2_ALL, SM2_ALL, '<li [if(level>0){class=sousnenu}][if(level==0){class=pmenu}]>[a][menu_title]</a>','</li>','<ul>','</ul>');?>
                    </div>
                    <!-- newsletter -->
                    <div id="titremenu">NEWSLETTER</div>
              </div>
                           
              <!-- CONTENU -->
               <div id="droit">
                  <div class="content">
                      <?php echo $page_id;//page_content(); ?>
                  </div>
               </div>
              <!-- FOOTER -->
            <!--<div class="footer">
                    <?php //page_footer(); ?>
             </div> -->
          <!--</div>-->
      </div>
le CSS:
body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
}
#SectImage1 {
        width: 960px;
        height:600px;
        margin: auto;
        padding: 0;
}
.banner{
 /* position: absolute; */
  width: 950px; /* à cause du padding 5 de chaque côté */
  height:26px;
  background-image: url(images/header.png);
  padding: 1px 5px;
  border: 1px solid green;
}
/*---------- MENU ----------*/
#gauche{
  background-image: url(images/fond_menu.jpg);
  /*clear:left;
  float:left;*/
  /*position: relative;*/
  float: left;
  /*clear: left;*/
  width:150px;
  height:574px;
  /*margin-top: 26px;
  margin:0 0 10px 0;*/
  padding:0;  
  border: 1px solid brown;
}
/*---------- CONTENU ----------*/
#droit{
  clear: left;
  width: 800px;
  height: 574px;
  /*position: relative;*/
  /*float: right;
  top: 26px;  */
 
  border: 1px solid white;
}
Merci
Spitfire 95
04/01/2011 à 19:48:14
Spitfire 95
Membre
 Le lien vers la page en question nous, enfin me en tout cas, serait plus utile pour voir ce qui ne va pas ;)
Merci.
Et deux sites utiles quand on a des problèmes avec une CSS ou du HTML qui passent mal :
validator.w3.org
jigsaw.w3.org/css-validator
pinprenelle
04/01/2011 à 20:56:45
pinprenelle
Membre
 ok merci, pour le lien du site il y est (site de malheur) mais si tu préfères: http://demo.lemasdelaplage.com
Spitfire 95
04/01/2011 à 21:15:54
Spitfire 95
Membre
 Au temps pour moi, j'ai cherché mais j'ai pas vu.

div id="gauche" => Menu
div id="droit" => div général
div class='content' => div mal placé

C'est ça ? Parce que c'est plus facile de se repérer avec des noms qu'avec des indications géographiques, surtout que des divs... Y'en a partout dans des pages web ! :0


PS : J'adore la zone de défilement de l'image. Nombre de webmasters l'auraient fait en flash, mais votre site passe bien et ne nécessite pas flash au moins. Pour une fois qu'un dev fait des animations sans polluer le web de flash... :#1:
pinprenelle
04/01/2011 à 23:40:51
pinprenelle
Membre
 Merci du compliment: perso j'aime le flash uniquement en bannière :p

div id="SectImage1" => div général
div class="banner" => div du haut
div id="gauche" => menu
div id="content" => contenu qui se balade ^^
ybouane
05/01/2011 à 06:36:38
ybouane
Admin
 Bonjour,
enlève le clear:left; et ajoute margin-left:152px; (150(taille du menu) + 2(bordure)).
Voici le code:
body,td,th {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000;
}
#SectImage1 {
        width: 960px;
        height:600px;
        margin: auto;
        padding: 0;
}
.banner{
  width: 950px; /* à cause du padding 5 de chaque côté */
  height:26px;
  background-image: url(images/header.png);
  padding: 1px 5px;
  border: 1px solid green;
}
/*---------- MENU ----------*/
#gauche{
  background-image: url(images/fond_menu.jpg);
  float: left;
  width:150px;
  height:574px;
  padding:0;  
  border: 1px solid brown;
}
/*---------- CONTENU ----------*/
#droit{
  margin-left:152px;
  width: 800px;
  height: 574px;
  border: 1px solid white;
}
Cordialement :)
Image
Pages: 1