Problème de cadrage

Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
- - Dernière réponse : cs_AccessToYou
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Dernière intervention
16 juin 2016
- 15 juin 2016 à 04:50
Bonjour,
J'ai toujours pas compris le problème des marges
pourquoi ma div de droite est-elle décalée lorque j'ajoute la div suivant?
Cordialement

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Selectlevel</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.container {
margin-left: auto;
margin-right: auto;
width: 750px;
height: 750px;
border: solid 10px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
}

.scontainer {
display: inline-block;
margin-left: 10px;
margin-top: 10px;
width: 728px;
height: 728px;
border: solid 2px black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: deeppink;
}
.divheader {
display:inline-block;
margin-left: 5px;
margin-top: 5px;
width: 714px;
height: 50px;
border:solid 2px black;

border-radius:10px;
background-color: yellow;
}

.divleft {
display:inline-block;
margin-left: 5px;
margin-top: 5px;
width: 50px;
height: 590px;
border:solid 2px black;

border-radius:10px;
background-color: deepskyblue;
}
.divcenter {
display:inline-block;
margin-left: 5px;
margin-top: 5px;
width: 590px;
height: 590px;
border:solid 2px black;

border-radius:10px;
background-color: greenyellow;
}
.divright {
display:inline-block;
margin-left: 5px;
margin-top: 5px;
width: 50px;
height: 590px;
border:solid 2px black;
border-radius:10px;
background-color: yellow;
}
.suivant {
display: inline-block;
width: 50px;
height: 50px;
/* margin-top: 270px;*/
border-radius: 25px;

position: relative;
background: url(suivant.png) no-repeat;
}
.divfooter {
display:inline-block;
margin-left: 5px;
margin-top: 5px;
width: 714px;
height: 50px;
border:solid 2px black;

border-radius:10px;
background-color: yellow;
}


</style>

</head>
<body>
<script type="text/javascript">

//*********************************************************************************************************************************************************
onload = function () { new chifukoo() }
// *****************************************************************************************************
</script>
<div id='cadre' class='container'>
<div id='scontainer' class='scontainer'>

<div id='divheader' class='divheader'></div>
<div id='divleft' class='divleft'> </div>
<div id='divcenter' class='divcenter'> </div>
<div id='divright' class='divright'>
<div id='suivant' class='suivant'> </div>
</div>
<div id='divfooter' class='divfooter'></div>
</div>
</div>

<script type="text/javascript">


validerdebut();

</script>
</body>
</html>

Afficher la suite 

Votre réponse

4 réponses

Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
bonjour en mettant le div de droit en float right c'est bon

.divright {
display:inline-block;
margin-right: 5px;
margin-top: 5px;
width: 50px;
height: 590px;
border:solid 2px black;
border-radius:10px;
background-color: gray;
float:right;
}

Commenter la réponse de @karamel
Messages postés
78
Date d'inscription
vendredi 26 février 2010
Dernière intervention
8 juin 2016
0
Merci
Bonjour
Effectivement celà fonctionne, mais pourquoi pas dans la première version
C'est pour comprendre
Cordialement
Commenter la réponse de titan3131
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
c'est le positionnement d'un element par rapport au precedent qui gène quand ceux ci son en inline-block.

on peut aussi utilisé vertical-align en precisant son alignement par rapport au haut de l’élément précédent on évite que l’élément soit en float

.divright {
            display:inline-block;
            margin-right: 5px;
            margin-top: 5px;
            width: 50px;
            height: 590px;
            border:solid 2px black;
            border-radius:10px;
            background-color: gray;
            vertical-align:top;
}


rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel
Messages postés
34
Date d'inscription
mardi 21 novembre 2000
Dernière intervention
16 juin 2016
0
Merci
.suivant {
display: block;
....

Commenter la réponse de cs_AccessToYou

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.