Problème entre deux balises <div> (CSS inclus dans les balises)

**Crocodile26** · 07/12/2014, 14h46

Bonjour à tous !

Voici mes problèmes, je démarre la création d'une page avec le code CSS inclus dans les balises html (ne me demandez pas pourquoi svp, mes travaux doivent êtres rédigés dans cette méthode qui n'est pas la meilleure, je sais !)

malgré avoir créé une div dans une autre, je n'arrive pas à choisir le background de la 2e div
malgré avoir fait un display:inline-block, la liste est toujours à la verticale
j'essaie tant bien que mal d'obtenir une marge horizontale entre mes deux div mais sans succès

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div style="width:90%; <!--page entière.o>
            margin:15px auto;
            min-width:795px;
            background:#383E3E;
            box-shadow:#161616 4px 4px 8px 3px;">
<div style="font-size:17px; <!--1er bloc nav.o>
            color:#383E3E;
            font-family:'arialblack';
            font-weight:bold;
            width:750px;
            line-height:28px;
            margin:10px auto;
            padding:0px;
            border:2px solid #383E3E;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            box-shadow:#585858 4px 4px 8px 3px;>
            background:#FFFFFF;">
                <ul style="list-style-type:none;
                           display:inline-block;
                           margin-right:15px;">
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
</div> <!--1er bloc nav.c>
</div> <!--page entière.c>

Merci d'avance à l'âme charitable qui passera par ici !

**NoSmoking** · 07/12/2014, 16h22

Bonjour,

...mes travaux doivent êtres rédigés dans cette méthode...

tout d'abord permets moi de

...excuse moi

ensuite regarde ton code ici
background:#FFFFFF;">

**Crocodile26** · 07/12/2014, 16h29

Oui oui en effet (erreur d'étourderie lol) je n'ai jamais travaillé avec le css inclus dans les balises html.

Donc pour la couleur, c'est OK

Il me manque plus que la marge horizontale entre les deux premières div . . .quelqu'un sait ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div style="width:90%;
            margin:15px auto;
            min-width:795px;
            background:#383E3E;
            box-shadow:#161616 4px 4px 8px 3px;"> <!--page entière.o-->
<div style="font-size:17px; <!--1er bloc nav.o-->
            color:#383E3E;
            font-family:'arialblack';
            font-weight:bold;
            width:750px;
            line-height:28px;
            margin:10px auto;
            margin-top:20px;
            padding:0px;
            border:2px solid #383E3E;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            box-shadow:#585858 4px 4px 8px 3px;
            background:#FFFFFF;"> <!--menu.nav.o-->
                <ul style="list-style-type:none;
                           margin-right:15px;">
                    <li style="display:inline;"><a href=""title="add" style="display:inline-block;text-decoration:none;">Item1</a></li>
                    <div style="text-align:right;"
                    <li style="display:inline;"><a href=""title="store" style="display:inline-block;text-decoration:none;text-align:right;">Item2</a></li>
                    <li style="display:inline;"><a href=""title="us" style="display:inline-block;text-decoration:none;text-align:right;">Item3</a></li>
                    </div>
                </ul>
</div> <!--menu.nav.c-->
<div style="font-size:17px;
            color:#383E3E;
            font-family:'arialblack';
            font-weight:bold;
            width:750px;
            line-height:28px;
            margin:10px auto;
            margin-top:40px;
            padding:0px;
            border:2px solid #383E3E;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            box-shadow:#585858 4px 4px 8px 3px;
            background:#FFFFFF;"> <!--2e block.o-->
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget       dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div> <!--2e block.c-->
</div> <!--page entière.c-->

**NoSmoking** · 07/12/2014, 16h44

Il me manque plus que la marge horizontale entre les deux premières div

de quoi parles tu ?

**Crocodile26** · 07/12/2014, 16h51

Envoyé par NoSmoking

de quoi parles tu ?

Voici la version de mon code sans erreurs cette fois-ci

Vois-tu, la div de la ligne1 correspond à la page entière, et celle de la ligne 6 correspond à une sorte d'entête avec un petit menu de navigation, mais je souhaite créer une petite marge horizontale entre la div (ligne1) et la div (ligne6).

J'ai tout essayé en jouant avec les margin-top etc mais je n'obtiens pas le résultat souhaité.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div style="width:90%;
            margin:15px auto;
            min-width:795px;
            background:#383E3E;
            box-shadow:#161616 4px 4px 8px 3px;"> <!--page entière.o-->
<div style="font-size:17px; 
            color:#383E3E;
            font-family:'arialblack';
            font-weight:bold;
            width:750px;
            line-height:28px;
            margin:10px auto;
            margin-top:20px;
            padding:0px;
            border:2px solid #383E3E;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            box-shadow:#585858 4px 4px 8px 3px;
            background:#FFFFFF;"> <!--menu.nav.o-->
                <ul style="list-style-type:none;
                           margin-right:15px;">
                    <li style="display:inline;"><a href=""title="" style="display:inline-block;text-decoration:none;">Item1</a></li>
                    <li style="display:inline;"><a href=""title="" style="display:inline-block;text-decoration:none;margin-left:500px;">Item2</a></li>
                    <li style="display:inline;"><a href=""title="" style="display:inline-block;text-decoration:none;margin-left:20px;">Item3</a></li>
                </ul>
</div> <!--menu.nav.c-->
<div style="font-size:17px;
            color:#383E3E;
            font-family:'arialblack';
            font-weight:bold;
            width:750px;
            line-height:28px;
            margin:10px auto;
            margin-top:40px;
            padding:0px;
            border:2px solid #383E3E;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            box-shadow:#585858 4px 4px 8px 3px;
            background:#FFFFFF;"> <!--2e block.o-->
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget       dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div> <!--2e block.c-->
</div> <!--page entière.c-->

**NoSmoking** · 07/12/2014, 17h06

Horizontale !, pas plutôt verticale, tu cherches à espacer les bords haut de ces 2 DIVs.

Problème de fusion de marge
- mettre un border: 1px solid transparent; sur la DIV 1
- mettre un padding: 0.01em; sur la DIV 1

On en a parlé il y a peu dans cette discussion

**Crocodile26** · 07/12/2014, 17h16

Ah oui c'était hier en effet lol

Merci pour ta précieuse aide et pour le petit rappel que tu as posté sur le thread de baldeadama !

Problème entre deux balises <div> (CSS inclus dans les balises)

CSS

Discussions similaires

Partager

Partager