Partage

Alignement

Help besoin d'un petit coup de pouce pour un alignement de texte

Sujet résolu
15 mai 2018 à 10:38:10

Les performances ("Expérience compétence et formation") doivent être sur la même ligne 

J'arrive a alignée les titres mes le texte ne suit pas je ne comprend pas pourquoi je vous laisse mon code html/css ci dessous 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<link rel="stylesheet" href="anaiscv.css"/>  
	    <title>CV Touchard Anais</title>
	</head>
		<center><h1>Touchard Anaïs</h1></center>
		
<body>
	<div id="liseré">
	</div>
 

	<center><h1>Web designer</h1></center>
		<a href="https://www.hostingpics.net/viewer.php?id=747716anais.png"><img src="https://img11.hostingpics.net/thumbs/mini_747716anais.png" alt="Photo de profil"/></a>
<div class="experience">
	 
	 <h2>Expérience</h2>

			<ul>
				<p><li>Septembre 2017 - Immersion Web Designer avec Standesign à Poilly lez Gien</li></p>
				<p><li>Janvier 2017 – Mars 2017 Assemblage de pièces d’ascenseurs à OTIS Gien</li></p>

<p><li>Juillet 2016 – Octobre 2016 Petites Mission intérimaire avec Adecco et Motiv intérim </p>

<p><li>Juillet 2011 - Juillet 2016 : Aide-atelier/Préparateur/Aide bobineur dans le secteur de la Voie
 SCA Tissue France – Industrie papier-carton, Arrabloy (45)

	   <p><ul><li>Travail d’équipe 
	   <br><li>Utilisation du pont roulant 
	   <br><li>Palettisation (conditionneur manuel)
	   <br><li>Gestion des déchets et nettoyage dans l’atelier 
	   <br><li>Nettoyage (complet) semestriel de la machine Airlaid
	   <br><li>Transformation de la bobine-mère selon la demande du client
	   <br><li>Création d’étiquetage des différents produits 
       <br><li>Transformation </pr></ul></p>

<p> <li>Novembre 2013 Distribution de Sac Jaune pour la ville de Gien avec le SMICTOM </p>

<p><li>Mai 2011 - Juillet 2011 - Aide à la personne Hôpital de Gien (Maison de Retraite) </p>

<p><li>Décembre 2009 Aide a domicile ADG Gien

	 <p><ul><li>  Aide à l’hygiène (aide à la toilette)
         <li>Aide au lever et au coucher 
	     <li> Aide à la prise de repas
         <li>Travails ménagers</p></ul>

         </li>
			</ul>
		</div>
		<div class="competences">
		<br><h2>Compétences</h2>
		<ul>
			<li>Utilisation de logiciels informatiques              
			<li>Travail d’équipe
            <li>Travail dans le secteur de la Santer
            <li>Créativité
            </div> 




<div class="formation">
	<br><h2>Formation</h2>
		<ul>
			<li>2008/2010 LEP du Giennois CAP ATMFC avec Obtention du diplôme 
            <li>2008/2009 M.F.R de Semur en Auxois Formation par alternance BEP Canin/Félin

</div>

	</p>
</body>

</html>



body

{ 

	background-image: url("image_de_fond.png"); 
  color: #000; 

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-size: cover;


  /*image de fond*/
}


h1
{
	color:#2c3e50;
text-shadow: 2px 2px 4px blue; 

}

h2
{
     color:#4A1A2C;
     font-family:"arial black",Impact,"comic sans ms;"
 }


body
{
	font-family: 'ambleregular',Impact,"arial" 
}


h2
{
    width: 350px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
    width: 10%;
}

#lisere
{
border-width: 60px; 
float:left; 
background-color: black; 
opacity: 0.3;
padding: 60px;
border-bottom: 800px solid ;

}

h1
{
  font-size: 42px;
  text-shadow: 1px -1px #778899, 2px 2px #B0C4DE, -3px 0 4px #708090;
  font-family: 'Amatic SC', sans-serif;
  color: #f1c40f;
  text-align:center;
  margin:6px;
}

.experience
{
 position:absolute;
 width:250px;
 padding:40px;
 margin:auto;
 text-align:justify;
 margin-left:70px;
 margin-bottom:-00px;
}

.competences
{
 position:absolute;
 width:1450px;
 padding:20px;
 margin:auto;
 text-align:justify;
 margin-left:80px; 
 margin-top:-00px;
}

.formation
{
 position:absolute;
 width:1400px;
 padding:10px;
 margin:auto;
 text-align:justify;
 margin-left:800px; 
 margin-top:-00px
}




-
Edité par AnaïsTouchard 15 mai 2018 à 11:33:12

Anais Touchard

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Staff 15 mai 2018 à 10:40:03

Bonjour,

encore une fois : corrige ton HTML avant toute chose.

Et le cours HTML5/CSS3 d'OpenClassrooms ne t'a certainement pas appris à utiliser position: absolute pour de la mise en page.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
15 mai 2018 à 10:57:32

Bonjours j'ai voulu le corriger hier avec le validator W3C mes il ne marche pas 

Anais Touchard
15 mai 2018 à 11:02:47

Salut,

Le validateur fonctionne très bien, je viens encore de l'utiliser à l'instant.

D'ailleurs je confirme, ton code est truffé d'erreurs, de balises mal imbriquées, mal fermées ou même pas fermées du tout. En prime tu as aussi du contenu en dehors du body...

Et tu utilises également certaines balises (center par exemple) qui sont dépréciées et ne répondent plus à aucune norme depuis le milieu des années 90...

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mai 2018 à 11:04:22

Bah moi je viens d'essayer encore a l'instant et sa ne marche pas sinon je l'aurais déjà fait

J'y arrive avec le validator de CSS mes pas le HTML

-
Edité par AnaïsTouchard 15 mai 2018 à 11:07:12

Anais Touchard
15 mai 2018 à 11:12:53

Que signifie "ca ne marche pas" ?

Tu n'arrives pas à accéder au site ? Quelle est l'URL que tu utilises ? Tu n'essaierais pas de valider ton HTML dans le validateur de CSS par hasard ?

Tu as un message d'erreur ? Si oui, lequel ?

Comment procèdes-tu ?

Etc etc.

Et au passage, puisque tu dis que le validateur CSS fonctionne, pourquoi ne pas avoir pris le temps de corriger les multiples erreurs et incohérences de ton CSS ?

-
Edité par Mewen_bzh 15 mai 2018 à 11:19:46

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mai 2018 à 11:21:09

Le validator de css me met aucune erreurs dans mon css

Et quand je rentre mon code pour le html et que je valide sa ne charge pas 

Anais Touchard
15 mai 2018 à 11:27:13

Tu ne réponds pas à mes questions. Il nous est donc impossible de t'aider.

En ce qui concerne ton CSS, le validateur me renvoie plusieurs erreurs, notamment l'accolade fermante en trop à la ligne 33 et l'accent dans "#liseré" qui n'est pas un caractère autorisé. Si ton validateur ne te renvoie pas ces erreurs c'est que tu ne l'utilises pas correctement.

Tu as également de multiples incohérences dans ton CSS, par exemple les propriétés "margin-top:-00px" qui n'ont pour seul effet que d'alourdir ton code et en ralentir l'exécution.

-
Edité par Mewen_bzh 15 mai 2018 à 11:27:37

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
15 mai 2018 à 11:38:53

L'erreurs lisere et l'accolade a déjà était corriger ces pour sa.

Est si j'avais répondu a la question pour le correcteur HTML mes quand je copie colle mon code html dans le correcteur et que je valide a la fin pour que sa corrige et bah rien sa ne charge pas 

Je suis entrain de regarder mes ligne une par une 

Anais Touchard
Staff 15 mai 2018 à 12:03:06

Tu remplis bien la partie "Validate by direct input" sur le validateur HTML ? Ici : https://validator.w3.org/#validate_by_input. Parce que je viens de retester, avec ton code, et ça me renvoie bien des erreurs.

-
Edité par Lamecarlate 15 mai 2018 à 12:03:43

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
15 mai 2018 à 12:12:27

Ha merci avec votre lien sa marche bien je sais pas pourquoi sa marcher pas avec le mien car ces la même choses. 

Je vais corriger tous sa alors Merci

Anais Touchard
Staff 15 mai 2018 à 12:14:14

Indépendamment, tu pourras faire un peu attention à ton écriture ? C'est parfois difficile de déchiffrer…
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
15 mai 2018 à 14:51:35

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<link rel="stylesheet" href="anaiscv.css"/>  
	    <title>CV Touchard Anais</title>
	</head>
	
	<body>
		<h1>Touchard Anaïs</h1>
		 <div id="lisere">
	     </div>
 <h1>Web designer</h1>
		
		<header>
		<a id="https://www.hostingpics.net/viewer.php?id=747716anais.png"><img src="https://img11.hostingpics.net/thumbs/mini_747716anais.png" alt="Photo de profil"/></a>
</header>

<section>
	
    <div class="experience">

	 <h2>Expérience</h2>

			
				<ul>
					<li>Septembre 2017 - Immersion Web Designer avec Standesign à Poilly lez Gien</li>
					<li>Janvier 2017 – Mars 2017 Assemblage de pièces d’ascenseurs à OTIS Gien</li>
					<li>Juillet 2016 – Octobre 2016 Petites Mission intérimaire avec Adecco et Motiv intérim</li>
					<li>Juillet 2011 - Juillet 2016 : Aide-atelier/Préparateur/Aide bobineur dans le secteur de la Voie SCA Tissue France – Industrie papier-carton, Arrabloy (45)</li>
 				    <li>Travail d’équipe</li> 
	   				<li>Utilisation du pont roulant </li>
	   				<li>Palettisation (conditionneur manuel)</li>
	   				<li>Gestion des déchets et nettoyage dans l’atelier </li>
	   				<li>Nettoyage (complet) semestriel de la machine Airlaid
	   				<li>Transformation de la bobine-mère selon la demande du client</li>
	   				<li>Création d’étiquetage des différents produits </li>
      				<li>Transformation</li> 
      				<li>Novembre 2013 Distribution de Sac Jaune pour la ville de Gien avec le SMICTOM </li>
      			    <li>Mai 2011 - Juillet 2011 - Aide à la personne Hôpital de Gien (Maison de Retraite) </li>
      			    <li>Décembre 2009 Aide a domicile ADG Gien</li>
                    <li>  Aide à l’hygiène (aide à la toilette) </li>
                    <li>Aide au lever et au coucher</li>
                    <li> Aide à la prise de repas</li>
                    <li>Travails ménagers</li>
                </ul>
		</div>


		<div class="competences">
			<h2>Compétences</h2>
		<ul>
			<li>Utilisation de logiciels informatiques</li>            
			<li>Travail d’équipe</li>
            <li>Travail dans le secteur de la Santer</li>
            <li>Créativité

         </ul> 
            </div> 
</section>




<div class="formation">
	<h2>Formation</h2>
		<ul>
			<li>2008/2010 LEP du Giennois CAP ATMFC avec Obtention du diplôme</li>
            <li>2008/2009 M.F.R de Semur en Auxois Formation par alternance BEP Canin/Félin</li>
        </ul>

</div>
</body>
</html>

body

{ 

	background-image: url("image_de_fond.png"); 
  color: #8A2BE2; 

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-size: cover;


  /*image de fond*/
}


h1
{
color:#2c3e50;
text-shadow: 2px 2px 4px blue; 
margin:0 auto; 
}

h2
{
     color:#4A1A2C;
     font-family:"arial black",Impact,"comic sans ms;"
 }


body
{
	font-family: 'ambleregular',Impact,"arial" 
}


h2
{
    width: 350px; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */
    text-align: justify;
    padding: 12px;
    margin-bottom: 20px;
    width: 10%;
   

}

#lisere
{

border-width: 60px; 
float:left; 
background-color:  #8A2BE2; 
opacity: 0.3;
padding: 60px;
border-bottom: 800px solid ;

}

h1
{
  font-size: 42px;
  text-shadow: 1px -1px #778899, 2px 2px #B0C4DE, -3px 0 4px #708090;
  font-family: 'Amatic SC', sans-serif;
  color: #f1c40f;
  text-align:center;
  margin:6px;
}

.experience
{
 position:absolute;
 width:400px;
 padding:90px;
 margin:auto;
 text-align:justify;
 margin-left:10px;
}


.competences
{
 position:absolute;
 width:400px;
 padding:90px;
 margin:auto;
 text-align:justify;
 margin-left:650px; 
}

.formation
{
 width:400px;
 padding:90px;
 margin:auto;
 text-align:justify;
 margin-left:1200px; 
}

header
 {
   
    text-align:right;
  }

Merci j'ai résolu le problème que je chercher 

-
Edité par AnaïsTouchard 15 mai 2018 à 15:06:52

Anais Touchard

Alignement

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