Ajouter deuxième bordure pointillée dans css par Philousk - page 1

Ok, mais pour le cadre d'un exercice, je ne dois faire aucune manipulation du HTML....

Voici d'abord, le passage de l'exercice en vert-khaki(?) , j'a souci dans l'énoncé...

Le premier paragraphe qui suit un titre h1 (ou une image dans le document présent) doit avoir une lettrine :

o la lettre a une taille 2 fois supérieure à la taille normale. Il y a donc 2 rangées de texte à côté de chaque lettrine;

o elle est de couleur brown;

o elle a un espace à sa droite de 5 px (distance avec le texte qui suit);

o notez que la lettrine est un élément comme un autre!

• Les images d’avion dans chaque section doivent avoir le formatage suivant :

o être placée dans le flot gauche;

o avoir une hauteur de 100 px;

o avoir une marge de 15 px;

o avoir une bordure noire de 1 px;

o avoir une seconde bordure pointillée de 5 px d’épais et de couleur brown.

HTML

<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> P.B.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="ressources/css/main.css" />
</head>

<body>
    <header>
        <img src="ressources/Images/cegep.png" alt="logo">
        <div id="menu">
            <ul>
                <li><a href="#section1">Menu 1</a></li>
                <li><a href="#section2">Menu 2</a></li>
                <li><a href="#section3">Menu 3</a></li>
            </ul>
            <div id="aide-icon">
                ?
                <div id="section-aide">
                    <h1>Ceci est la section d'aide</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et
                        dolore
                        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                        aliquip ex ea
                        commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat nulla
                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                        mollit anim id
                        est
                        laborum.</p>
                </div>
            </div>
        </div>

    </header>
    <aside>
        <ol>
            <li>
                <h3>Avantages</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsun</li>
                    <li class="montree2">dolor</li>
                </ul>
            </li>

            <li>
                <h3>Désavantages</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsum</li>
                    <li>dolor</li>
                </ul>
            </li>

            <li>
                <h3>Considérations</h3>
                <ul>
                    <li>lorem</li>
                    <li>ipsum</li>
                    <li>dolor
                        <ol>
                            <li>Item 1</li>
                            <li>Item 2</li>
                            <li>Item 3</li>
                        </ol>
                    </li>
                </ul>
            </li>
        </ol>
    </aside>
    <div id="contenu-principal">
        <h1 id="section1">Première section</h1>
        <img src="ressources/Images/avions/avion1.jpeg" alt="avion1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
        <h1 id="section2">Seconde section</h1>
        <img src="ressources/Images/avions/avion2.jpeg" alt="avion2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
        <h1 id="section3">Troisième section</h1>
        <img src="ressources/Images/avions/avion3.jpeg" alt="avion3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore
            magna aliqua. Ut eniam ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
            est
            laborum.</p>
    </div>

    <footer>
        &copy; C&eacute;gep limoilou - Interface web - 420-134-LI : Philippe Bolduc
    </footer>
</body>

</html>

Philousk

13 janvier 2019 à 12:10:57

Comment faire ?

La première bordure est solide 1px black, la deuxième, 5px brune et pointillée dans css seulement...

Pour l'instant...

h1 + img
	{
		float: left;
		height: 100px;
		margin: 15px;
		border: 1px solid black;
		border: dotted 5px brown; /* à vérifier*/
			
	}

Comme ceci:

Merci !

Koyuki Tanaka

13 janvier 2019 à 12:27:00

Alors, premièrement.. Bonjour à toi !

Peut on voir ton code html ?

13 janvier 2019 à 18:33:14

djaps

14 janvier 2019 à 9:30:38

Bonjour,

Peut-etre la solution : propriété css outline

cf https://developer.mozilla.org/fr/docs/Web/CSS/outline

A voir,

David

Selfhtml : http://www.info.univ-angers.fr/~gh/selfhtml_fr/index.htm

14 janvier 2019 à 12:41:10

Merci bien oui c'est bien ça. J'avais eut aussi l'information d'une autre source.

Bonne journée à toi !

Ajouter deuxième bordure pointillée dans css

Ajouter deuxième bordure pointillée dans css

Supprimer

Modérer

Signaler le message aux modérateurs