Partage

probleme avec les marges

activite organiser cv

12 octobre 2017 à 19:56:16

je veut un premier bloc qui couvre tout la page web. dans ce bloc je veut 2 bloc. un pour le lisere et lautre pour le reste(le texte l'image). je veut que le bloc du lisere soit positionner completement a gauche et quil prenne 20% de la page en largeur et prenne 100% en longueur. je veut que mon deuxieme bloc soit positionner completement a droite et quil ai une largeur de 80% de la page. J'ai essayer a mainte reprise mais ne suit jamais arriver au resultat souhaite merci beaucoup!

-
Edité par witlish 15 octobre 2017 à 20:54:57

12 octobre 2017 à 20:02:28

Bonjour,

Avant tout, je peux t'assurer que c'est possible, j'ai suivi le même cours que toi et j'y suis arrivé, je suis pourtant pas une lumière :3

Je te conseil de bien relire le cours, et de réessayer, après tout, le forum n'est pas là pour faire les exercices à ta place :/

Si malgré ça tu n'y arrives toujours pas, pourquoi ne pas partager ton code, on pourrait alors t'expliquer ce qui ne vas pas et le corriger plutôt que de fournir bêtement la solution

PS : N'oublie pas d'utiliser les Balises de <code> et ajoute le fichier HTML, pas seulement le CSS

Bon courage !

12 octobre 2017 à 20:09:01

Salut, voici mon code html je  n'est pas encore de code css :

-
Edité par witlish 12 octobre 2017 à 20:35:39

Staff 12 octobre 2017 à 21:51:20

Bonsoir , ( point 1 de la charte de bonne conduite et cela fait également partie de règles de bonne communication lorsque l'on s'adresse à des humains)

Je t'invite à éditer ton premier message afin d'en modifier le titre de ton sujet, car «Besoin d'aide html css» n'est pas explicite de la problématique que tu rencontres. Merci (Point 3 de la charte de bonne conduite.)

Et tant que tu y es "je veut", ne serais ce pas plutôt "J'aimerais"? Merci également de nous fournir ton code html et css en utilisant le bouton code </> .

Se démerder tout seul (par grafikart)
14 octobre 2017 à 18:55:26

ÉmileGagnon1 a écrit:

Salut, voici mon code html je  n'est pas encore de code css :

-
Edité par ÉmileGagnon1 12 octobre 2017 à 20:35:39


Hey,

Navré mais ton code s'est vu supprimé (je t'avais dis d'utiliser <code> :p)

Autrement et Pour info, tu dis ne pas avoir de code CSS, impossible de faire ce que tu demande sans le CSS ! Je t'invite à continuer le cours en suivant Ce lien

Bonne soirée !

14 octobre 2017 à 19:06:44

Je pense que c'est possible dans le code html avec

<div style= ...>contenu</div>

mais vraiment pas pratique. Tu a l'air de ne pas avoir suivi suffisamment le cours. Je t'invite à suivre le lien de xXFurtiiVytiiZz et si tu as besoin de plus de cours .

Bonne lecture ^^

-
Edité par KFoxLDG 14 octobre 2017 à 19:07:06

15 octobre 2017 à 17:19:03

donc voici mes codes mon probleme est que le lisere ne prend pas tout 
lespasce en hauteur et a une marge a sa gauche que je ne peut pas 
enlever. Pour ceux qui doute j'ai tres bien suivi les cours margin ne 
marche pas et heigth:100% non plus. Merci de votre aide.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Curriculum vitae de Jean Dupont</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
    <div class="tout">        
            
            <div class="imglisiere">
                <img src="lisere.jpg" alt="lisere">
            </div>

    <div class="centrale">
       <header><h1><strong>Jean Dupont</strong></h1>
         <p>Élève sur OpenClassroom. </br> 
        
          <div id="conteneurimages">
            <div class="images"><a href="jeandupont.jpg"><img src="jeandupont2.jpg" class="photojean" alt="photo de jean dupont"></a></div>
            <div class="images"><a href="jeandupont.jpg"><img src="jeandupont2.jpg" alt="photo de jean dupont"></a></div>
            <div class="images"><a href="jeandupont.jpg"><img src="jeandupont2.jpg" class="photojean" alt="photo de jean dupont"></a></div>
          </div>
         </p>
        
        </header>

          </br>
        
        <section>
        <div id="conteneur">
        <div class="element">
            <h2> Mon expérience</h2>                                   
              <ul>
                 <li>Geek a temps partiel</li>
                 <li>Procrastinateur a temps plein</li>
                 <li>Joueur de jeux video depuis mes 4 ans</li>
              </ul>
        </div>
        <div class="element">
       
            <h2> Mes competences</h2> 
                <ul>
                   <li>Je connais mieu que quiquonque les geeks</li>
                   <li>Je m'endors en 1 minute</li>
                   <li>Je suis le meilleur au monde au jeu video</li>
               </ul>
        </div>
        
        <div class="element">
            <h2> Ma formation</h2>
                <p>Mes freres m'ont presque tout appris.Le</br>reste je l'ai apprit en regardant des tutos.</p>
        </div>
        
        </div>
        </section>

    </body>

</html>
@font-face {
    font-family: 'ambleregular';
    src: url('fonts/Amble-Regular-webfont.eot');
    src: url('fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Amble-Regular-webfont.woff2') format('woff2'),
         url('fonts/Amble-Regular-webfont.woff') format('woff'),
         url('fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('fonts/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h2,ul
{
	font-family: 'ambleregular', Impact, "Arial Black";
	border-radius: 6px;
}

h2
{
	color: fuchsia;
}

h2+p
{
	font-family: 'ambleregular';
}

h1, h1+p
{
	text-align: center;
}

.photojean
{
	border: 3px fuchsia inset;
}

body
{

    background-image: url("blanc.jpg");

}
figure
{
    box-shadow: 6px 6px 0px fuchsia;
}
#conteneur
{
	display: flex;
	justify-content: flex-end;
}
#conteneurimages
{
	display: flex;
	justify-content: center;
}
.imglisiere
{
	width:250px;
	overflow: hidden;
	display: inline-block;
	height: 60%;
}
.centrale
{
	display: inline-block;
	vertical-align: top;
}
.tout
{
	display: flex;
	justify-content: space-between;
}


-
Edité par witlish 15 octobre 2017 à 17:25:30

15 octobre 2017 à 18:21:33

Pour résoudre ton problème de marge il faut que tu saches que body à par défaut une marge (je suis pas sûr mais j'ai quand même un peu vérifié.) donc essaye ça

body{
   margin:0px 0px 0px 0px;
}


Pour le reste je sais pas trop.

Staff 15 octobre 2017 à 18:34:54

Bonjour,

petite remarque :  margin: 0px 0px 0px 0px; c'est juste, mais il y a beaucoup plus simple avec margin: 0;.

En effet, si les 4 valeurs sont identiques elles peuvent être ramenées à une seule, et si la valeur est "0" nul besoin de mettre une unité (zéro patate c'est exactement pareil que zéro tomate, l'assiette est vide de la même manière :( ).

witlish > pense à modifier ton titre comme te l'a demandé AbcAbc6.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
Anonyme
15 octobre 2017 à 18:35:21

KFowLDG

Un « margin: 0 » serait plus rapide 😁

15 octobre 2017 à 19:36:31

merci tout le monde ca a regler mon probleme comment pu-je changer le titre?

-
Edité par witlish 15 octobre 2017 à 19:38:36

Staff 15 octobre 2017 à 19:41:00

witlish a écrit:

 comment pu-je changer le titre?

bonsoir, en éditant ton premier message.

Se démerder tout seul (par grafikart)

probleme avec les marges

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown