créer un site


[resolu]decalage de div

Poster un nouveau sujet sur css   Répondre au sujet à css:[resolu]decalage de div    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 10-12-2003 22:56

Bonsoir,

Sa faisait un moment n'est ce pas?

voilà mon défie Smile
Est ce que c'est realisable de faire ça en css

decaler abc sur d(la div global)

merci


Dernière édition par Génius le 17-12-2003 20:03; édité 3 fois
salemioche
salemioche
salemioche
Message[resolu]decalage de div , Posté le: 11-12-2003 12:00

oui, si tu y regardes bien en fait ca ressemble à la nouvelle version de salemioche.net. il faut qu'en image de fond de tes menu a b c, il y est un truc moitié foncé moitié clair.
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 11-12-2003 19:00

Ha ba oui suis je bete il suffit le mettre dans une grande div vertical qui a la moitier bleu l'autre bleu clair

Donc toujours dans la div globalintegrer une div vertical coller a gauche


Merci Salemioche Wink
salemioche
salemioche
salemioche
Message[resolu]decalage de div , Posté le: 11-12-2003 19:04

globalinteger si tu veux Smile en tout cas pour le reste oui
SIBELIUS
html mioche
html mioche
Message[resolu]decalage de div , Posté le: 11-12-2003 23:56

Salut, je ne suis pas sûr d'avoir compris, mais essaye ça :

Code:
<html>
<head>
<title>test</title>

<style type="text/css">
<!--
body {
margin: 0;
background-color: blue;
}
.conteneur {
width: 700px;
position: absolute;
left: 50%;
margin-left: -350px;
}

.header {
height: 100px;
margin-left: 100px;
background-color: #A4C2F8;
}
.central {
margin: 20px 0 20px 100px;
height: 400px;
background-color: #A4C2F8;
}
.a, .b, .c {
position: absolute;
left: 0;
width: 200px;
height: 100px;
background-color: #c5c5c5;
border-right: 4px solid gray;
border-bottom: 4px solid gray;
}
.a {
top: 50px;
}
.b {
top: 180px;
}
.c {
top: 310px;
}
.contenu {
position: absolute;
left: 230px;
top: 50px;
width: 400px;
height: 410px;
background-color: #fff;
border-right: 4px solid gray;
border-bottom: 4px solid gray;
}
-->
</style>
</head>

<body>
<div class="conteneur">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="contenu">Contenu</div>
<div class="header"></div>
<div class="central"></div>
</div>
</body>
</html>
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 13-12-2003 12:59

Voila c'était quelque chose dans le genre que j'avais besoin merci Salemioche et Sibelus Wink
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 14-12-2003 22:08

Moi si j'essaye de faire chevaucher 2div sa ne fonctionne pas sois elle se met en dessous sois au dessus mais jamais chevaucher

une idée?
merci
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 14-12-2003 22:21

finalement j'ai fait comme ceci
c'est une version simplifiée de ce que je voulais faire mais bon.
Sur ie sa fonctionne mais sur firebird oulala tout est faux lol
Code:
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
   background-color: #717ba7;
   color: #000000;
   text-align: center;
   padding: 0;
   margin: 0;
   }
#global{
   width: 760px;
   height:auto; 

   margin:0px;
   margin-right:auto;
   margin-left:auto;
   float:left;
   padding:10px;
   
   background-color: #717ba7;
   
}
#centre{
   width: 640px;
   height:auto; 
   float:right;
   margin:0px;
   margin-right:auto;
   margin-left:auto;
   padding:10px;
   background-color: #d8e0fc;
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
   border-left: #000 1px solid;
}
.menu, .menu2, .menu3{
   margin:0px;
   padding:10px;
   background-color: #EBEBEB;
   border: #000 1px solid;
}

.menu{
position: absolute; top: 170 px; left: 70px;width: 100px; height: 100px
}

.menu2{
position: absolute; top: 280 px; left: 70px;width: 100px; height: 100px
}

.menu3{
position: absolute; top: 390 px; left: 70px;width: 100px; height: 100px
}

.entete{
   width: 640px;
   height:100; 
   float:right;
   margin:0px;
   margin-right:auto;
   margin-left:auto;
   margin-bottom:5px;
   padding:10px;
   background-color: #d8e0fc;
   border: #000 1px solid;
}

.menuhaut{
   width: 640px;
   height:auto; 
   float:right;
   margin:0px;
   margin-right:auto;
   margin-left:auto;
   padding:10px;
   border-right: #000 1px solid;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
   background-color: #d8e0fc;
}

.texte{
   width: 550px;
   height:350; 
   float:right;
   margin:0px;
   margin-right:auto;
   margin-left:auto;
   padding:10px;
   background-color: #ffffff;
   border: #000 1px solid;
   
}



ul {list-style-type: none;}

li { float: left;}

div.dsmenuhaut a {
     
    margin: 0 2px;
     width: 100px;
     height: 20px;
     float: left;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
     }
   
div.dsmenuhaut a:hover {
     background: #ccc;
     border: 1px solid gray;
     }

div.dsmenuhaut a:active {
     background: gray;
     border: 1px solid gray;
     color: #fff;
     }

.signature{
   width: 640px;
   height:10px; 
   float:right;
   margin:0px;
   margin-right:auto;
   margin-left:auto;
   margin-top: 5px;
   padding:10px;
   border: #000 1px solid;
   background-color: #d8e0fc;

}

</style>
</head>

<body>

      <div id="global">
            <div class="entete"></div>
            <div class="menuhaut">
                  <div class="dsmenuhaut">
                  <ul>
                  <li><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
                  <li><a href="#">Menu 4</a></li>
                  <li><a href="#">Menu 5</a></li>
                  </ul>
                  </div>
            </div>
               <div id="centre">
               <div class="texte"></div>   
               
               </div>
         <div class="menu"></div>
         <div class="menu2"></div>
         <div class="menu3"></div>   
         
         <div class="signature"></div>      
      </div>

</body>
</html>


(excuse pour la base salemioche)
si quelqu'un a le temps pour me dire mes erreurs...
merci Wink


Dernière édition par Génius le 15-12-2003 0:01; édité 3 fois
SIBELIUS
html mioche
html mioche
Message[resolu]decalage de div , Posté le: 14-12-2003 22:38

Il faut passer par la position absolue. Il n'y a pas d'autres méthodes.
Génius
flashmioche
flashmioche
Message[resolu]decalage de div , Posté le: 14-12-2003 23:59

Ba le code que j'ai fait donne a peut près quelque chose de correct sous ie mais sous firebird les menus sont plus du tout à leurs places
Et puis je suis sur qu'il y a bien plus simple en code pour arriver au résultats que je souhaites que se que j'ai fait
Malheureusement mes compétences en css s'arrêtent là...

Merci Smile
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:[resolu]decalage de div    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales