Sujet Précédent Sujet Suivant

Problème de cadrage

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016 - 19 mai 2016 à 16:16
cs_AccessToYou Messages postés 34 Date d'inscription mardi 21 novembre 2000 Statut Membre 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>

4 réponses

Réponse 1 / 4

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
20 mai 2016 à 14:35

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;
         }

Réponse 2 / 4

titan3131 Messages postés 77 Date d'inscription vendredi 26 février 2010 Statut Membre Dernière intervention 8 juin 2016
20 mai 2016 à 20:10

Bonjour
Effectivement celà fonctionne, mais pourquoi pas dans la première version
C'est pour comprendre
Cordialement

Réponse 3 / 4

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par @karamel le 21/05/2016 à 10:36

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 !

Réponse 4 / 4

cs_AccessToYou Messages postés 34 Date d'inscription mardi 21 novembre 2000 Statut Membre Dernière intervention 16 juin 2016 1
15 juin 2016 à 04:50

.suivant {
display: block;
....

Discussions similaires

API Windows - Fenêtre sans bordure ?

Votre réponse

Discussions similaires