Voir le sujet précédent :: Voir le sujet suivant |
Auteur |
Message |
Génius flashmioche
|
[resolu]decalage de div , Posté le: 10-12-2003 22:56 |
|
|
Bonsoir,
Sa faisait un moment n'est ce pas?
voilà mon défie
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
|
[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
|
[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 |
|
|
salemioche salemioche
|
[resolu]decalage de div , Posté le: 11-12-2003 19:04 |
|
|
globalinteger si tu veux en tout cas pour le reste oui |
|
|
SIBELIUS html mioche
|
[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
|
[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 |
|
|
Génius flashmioche
|
[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
|
[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 |
Dernière édition par Génius le 15-12-2003 0:01; édité 3 fois |
|
SIBELIUS html mioche
|
[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
|
[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 |
|
|
|