18041 sujets

Questions générales et questions de débutants

Création de CV interactif

Bonjour,

Dans le cadre de mes cours je débute avec le HTML et CSS. Et je réalise mon CV site sur Dreamweaver, après avoir rentré tout le contenu je finalise la mise en page avec des difficultés. J'ai un bandeau en haut fixe avec mon nom, et des blocs de couleurs avec différentes catégories : expériences, formations, divers, compétences... J'ai tout mis sur une même page pour essayer de mettre un effet scroll (évidemment je n'ai pas réussi à le faire marcher ^^), mes ancres du menu principal à ces catégories ne fonctionnent pas à cause du bandeau donc je rajoute une boite vide avant pour décaler l'ancre mais ca ne marche pas pour tous les onglets et je ne comprend pas pourquoi ? Avez vous des conseils pour ces ancres qui ne fonctionnent pas ?

Merci de votre aide plus j'avance et plus je rencontre des problèmes ^^
Modérateur
Victor BRITO a écrit :
Salut,

Quel mode de Dreamweaver utilises-tu ? Le mode code ou le mode création ?


+1

Pas de <code>, pas d'<img> (image) du problème, on peut pas <td> (t'aider) Smiley lol
Je suis sur Dreamveaver en mode création, je redige le code.

Il n'est pas encore en ligne mais si je le met en ligne je pourrais toujours le modifier après ?
Melouuuu a écrit :
Il n'est pas encore en ligne mais si je le met en ligne je pourrais toujours le modifier après ?
Oui, et heureusement Smiley cligne
Quelles études suis-tu ?
Je suis en train de le mettre en ligne via fillezilla

Je suis en master Culture Art et Patrimoine avec la spécialité des nouvelles technologies

C'est la première fois que je fais un site web
Bonne nouvelle j'ai tout mis sur Fillezilla mais rien en ligne : http://rouillon.melissa.pagesperso-orange.fr

Sinon je vous joint mon code et CSS

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mélissa ROUILLON</title>

<link href="MR.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"> </script>

<script type="text/javascript">
$(function(){
$('#bouton').click(function() {
$('html,body').animate({scrollTop: 0}, 'slow');
});
});

$(window).scroll(function() {
if($(window).scrollTop()==0){
$('#bouton').fadeOut();
}else{
$('#bouton').fadeIn();
}
});
</script>



</head>

<body>

<!-- Page d'accueil -->

<div id="Bandeauhaut">


<h1>Mélissa ROUILLON</h1>

<div id="menu">
<ul>
<li><a href="#Formations2">Formations</a></li>
<li><a href="#Experiences2">Expériences</a></li>
<li><a href="#Competences3">Compétences</a></li>
<li><a href="#Divers">Divers</a></li>
</ul>
</div>
</div>

<div id="Profil">
<br />
</div>

<div class="texte">

<div id="contact">
<h2>Contact </h2>
<img src="Photos/side_bg.gif"/>
<h3>Mélissa ROUILLON</h3>
<p>7 Rue Rousseau <br />
49000 ANGERS</p>
<p>Téléphone : 06.37.03.72.82</p>
<p><a href="mailto:rouillon.melissa@live.fr">rouillon.melissa Smiley at live.fr</a></p>
<p><img src="Photos/side_bg.gif"/><br /></p>
<a href="http://www.linkedin.com/pub/m%C3%A9lissa-rouillon/59/734/786" target="blank"> <img src="Photos/linkedin-noir.png" alt="Image" onmouseover="javascript:this.src='Photos/linkedin-blanc.png';" onmouseout="javascript:this.src='Photos/linkedin-noir.png';"/> </a>
<a href="CV/CV Mélissa Rouillon.pdf" target="_blank"> <img src="Photos/CV-noir.png" alt="Image" onmouseover="javascript:this.src='Photos/CV-blanc.png';" onmouseout="javascript:this.src='Photos/CV-noir.png';"/> </a>
</div>


<div id="contenu">
<h2>A propos</h2>

<div id="présentation"> Actuellement en Master 2 Culture, Art et Patrimoine à l'ESTHUA d'Angers. Je souhaite m'orienter vers la diffusion et la communication de compagnie de théâtre, art de rue... <br /><br />


Je me construis une expérience dans ce domaine que j’agrémente avec un tissu d'associations et d'actions bénévoles. Je fais parti d'une agence de développement culturel au niveau rural et d'associations culturelles. <br /><br />

Je souhaiterais ouvrir la culture aux publics éloignés et empêchés, à travers une structure, une compagnie et des actions culturelles. </div>



<div id="Photo profil">
<img src="Photos/MR.png"/>
</div>

</div>

</div>



<!-- Pages Formations -->

<div id="Formations2">
<br />
<br />

</div>

<div id="Formations">
<h2>Formations</h2>

<div class="Master">
<img src="Photos/Formations/Université d'Angers 1200pxl.jpg"/>
<h4><a href="http://www.univ-angers.fr/fr/formation/offre-de-formation/MLMD/0002/mmc-850/mppct-1.html" target="blank"> Master Culture Art et Patrimoine <br />
Parcours Technologies Numériques et Produits Culturels</a></h4>
<p> <a href="http://www.univ-angers.fr/fr/index.html" target="_blank"> Université d'Angers </a> </p>
<p>2012 - 2014</p>
</div>

<div class="DEES">
<img src="Photos/Formations/Logo-ESUP.jpg"/>
<h4><a href="http://www.esup.fr/cursus-programmes/marketing-vente-communication/162-.html" target="blank">DEES Communication et Médiation Culturelle</a><br />
Mention B</h4>
<p> <a href="http://www.fede.org/" target="_blank"> Fédération Européenne des écoles </a> </p>
<p> <a href="http://www.esup.fr/" target="_blank"> ESUP </a> </p>
<p>2011 - 2012</p>
</div>


<div class="BTS">
<img src="Photos/Formations/téléchargement.png"/>
<h4><a href="http://www.ste-marguerite.net/communication.php" target="blank">BTS Communication</a> <br />
Mention AB</h4>
<p> <a href="http://www.ste-marguerite.net/" target="_blank"> Lycée Sainte Marguerite </a> </p>
<p>2009 - 2011</p>
</div>


</div>


<!-- Pages Experiences -->

<div id="Experiences">

<div id="Experiences2">&nbsp;</div>

<h2>Expériences</h2>

<h6>2014</h6>

<div class="Compagnie">Chargée de communication et de diffusions, <b><a href="http://www.atraverschamps.org/" target="blank">Compagnie A Travers Champs</a></b> & <b><a href="http://www.cie-mendigot.fr/" target="blank">Compagnie Mendigot</a></b>, Chanzeaux - Vihiers - 49 - 6 mois </div>

<h6>2013</h6>

<div class="Compagnie">Chargée de communication et de diffusion, <b><a href="http://www.atraverschamps.org/" target="blank">Compagnie A Travers Champs</a></b>, Chanzeaux - 49750 - 4 Mois</div>

<h6>2012</h6>

<div class="Compagnie"> Assistante de l'administrateur, <b>L'Echalier, agence rurale de développement culturel</b>, Saint Agil - 41170 - 8 Mois</div>


<h6>2011</h6>

<div class="Compagnie"> Graphiste au sein de la Direction des Ressources Humaines, <b><a href="http://www.le-loir-et-cher.fr/jahia/" target="blank">Conseil Général du Loir et Cher</a></b>, Blois - 41000 - 2 Mois</div>

<h6>2010</h6>


<div class="Compagnie"> Chargée de communication et des publics, <b><a href="http://www.lhectare.fr/" target="blank">L'Hectare, Scène conventionnée</a></b>, Vendôme - 41100 - 3 Mois </div>

<div class="Compagnie"> Graphiste et employée de production, <b><a href="http://www.dixitimprim.com/" target="blank">Dixit Imprim'</a></b>, Vendôme - 41100 - 1 Mois </div>


<h6>2009</h6>

<div class="Compagnie"> Assistante du directeur, <b><a href="http://www.evenementiel-nord.fr/" target="blank">DK COM</a></b>, Dunkerque - 59240 - 1 Mois </div>


<h6>Emploi saisonnier</h6>

<div class="Compagnie"> Animatrice pour les adolescents (12-17 ans)</div>

</div>


<!-- Pages Compétences -->

<div id="Compétences">

<div id="Competences3">&nbsp;</div>

<h2>Compétences</h2>

<div class="Communication">
<img src="Photos/Compétences/Hover/Communication1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/Communication2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/Communication1.png';"/>
</div>

<div class="PAO"> <img src="Photos/Compétences/Hover/PAO1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/PAO2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/PAO1.png';"/>
</div>

<div class="MédiationCulturelle"> <img src="Photos/Compétences/Hover/MC1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/MC2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/MC1.png';"/>
</div>

<div class="Gestiondeprojet"> <img src="Photos/Compétences/Hover/GP1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/GP2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/GP1.png';"/>
</div>

<div class="Gestiondecontenu">
<img src="Photos/Compétences/Hover/GC1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/GC2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/GC1.png';"/>
</div>

<div class="Langues"> <img src="Photos/Compétences/Hover/langues1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/langues2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/langues1.png';"/>
</div>



<div class="Logiciels"> <img src="Photos/Compétences/Hover/logiciels1.png" alt="Image" onmouseover="javascript:this.src='Photos/Compétences/Hover/logiciels2.png';" onmouseout="javascript:this.src='Photos/Compétences/Hover/logiciels1.png';"/> </div>

</div>


<!-- Pages Divers -->



<div id="Divers">
<h2>Divers</h2>


<div class="Equitation"> <img src="Photos/Divers/Equitation1.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/Equitation2.png';" onmouseout="javascript:this.src='Photos/Divers/Equitation1.jpg';"/> </div>

<div class="Concerts"> <img src="Photos/Divers/Concert.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/Concerts2.png';" onmouseout="javascript:this.src='Photos/Divers/Concert.jpg';"/> </div>

<div class="Artderue"> <img src="Photos/Divers/Graff.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/Artderue2.png';" onmouseout="javascript:this.src='Photos/Divers/Graff.jpg';"/> </div>

<div class="Musée"> <img src="Photos/Divers/Musée.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/Musée2.png';" onmouseout="javascript:this.src='Photos/Divers/Musée.jpg';"/> </div>

<div class="Lire"> <img src="Photos/Divers/Livre.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/Lecture2.png';" onmouseout="javascript:this.src='Photos/Divers/Livre.jpg';"/> </div>

<div class="BAFA"> <img src="Photos/Divers/bafa.jpg" alt="Image" onmouseover="javascript:this.src='Photos/Divers/bafa2.png';" onmouseout="javascript:this.src='Photos/Divers/bafa.jpg';"/> </div>

</div>

<!-- Bouton Retour vers le haut -->

<div id="bouton"> <a href="#Profil"><img src="Photos/trianglebouton.png"/></a></li> </div>


<!-- Crédits -->

<div id="Credits">

Mélissa ROUILLON _ Tous droits réservés _ Crédits Photo : <a href="http://www.sxc.hu" target="blank">www.sxc.hu</a> _ 2013




</div>

</body>
</html>



CSS :

@charset "utf-8";
/* CSS Document */

/* BODY */
body{
background-image:url(Photos/fond%20triangle.png);
margin:0px;
padding:0px;
}


/* BANDEAU */
#Bandeauhaut{
position:fixed;
top:0px;
left:0px;
background-color:#FFF;
background-image:url(Photos/triangles.png);
width:100%;
height:179px;
background-repeat:repeat-x;
top:-1.5em;
z-index:1;
}


.texte{
margin-top:200px;
margin-left:150px;
margin-right:150px;
padding:0px;
}

#Bandeauhaut h1{
font-family:"Caviar Dreams";
font-size:80px;
text-align:center;
margin-left:0px;
margin-bottom:0px;
margin-top:40px;
}

#menu{
background-image:url(Photos/bande%20noire.png);
height:40px;
background-repeat:no-repeat;
margin-left:150px;
padding-top:1px;
padding-bottom:20px;
padding-left:80px;
}


#menu li{
list-style-type: none;
display: inline;
padding:50px;
margin-left:20px;
text-align:center;
font-family:"please write me a song";
}

#menu a{
color:#FFF;
text-decoration:none;
font-size:22px;
}



/* PROFIL */

#présentation{
font-family:Calibri;
text-align:justify;
width:400px;
position:absolute;
left:420px;
}


#contact{
background-color:#FFF;
font-family:Calibri;
width:260px;
height:350px;
position:absolute;
left:910px;
padding-left:15px;
padding-right:15px;
padding-bottom:15px;
padding-top:0px;
text-align:center;
}

/* PROFIL */
h2{
font-family:"please write me a song";
text-align:left;
font-size:32px;
}

h3{
font-family:"Caviar Dreams";
font-size:25px;
line-height:10%;
}






/* FORMATIONS */
#Formations{
background-image:url(Photos/Formations/fond-formation.png);
margin:150px;
padding-top:5px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
position:absolute;
top:540px;
width:1010px;
height:410px;
font-family:Calibri;
box-shadow: 8px 8px 12px #aaa;
}

a{
text-decoration:none;
color:#000;
}

.Master{
background-color:#FFF;
width:230px;
height:230px;
padding:20px;
text-align:center;
position:absolute;
left:50px;
box-shadow: 8px 8px 12px #aaa;

}

.DEES{
background-color:#FFF;
width:230px;
height:230px;
padding:20px;
text-align:center;
position:absolute;
left:380px;
box-shadow: 8px 8px 12px #aaa;
}



.BTS{
background-color:#FFF;
width:230px;
height:230px;
padding:20px;
text-align:center;
position:absolute;
left:720px;
box-shadow: 8px 8px 12px #aaa;
}




/* EXPERIENCES */

h5{
font-size:14px;
}

h6{
font-family:"Caviar Dreams";
font-size:12px;
line-height:0%;
}


.Compagnie{
border-left:2px;
border-left:groove;
border-color:#000;
padding:10px;
line-height:5%;
}


#Experiences{
position:absolute;
background-image:url(Photos/Exp%C3%A9riences/fond-experience.png);
margin:150px;
padding-top:5px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
font-family:Calibri;
top:1200px;
width:1010px;
height:580px;
line-height:5%;
box-shadow: 8px 8px 12px #aaa;
}


/* COMPETENCES */
#Compétences{
position:absolute;
background-image:url(Photos/Comp%C3%A9tences/fondcompetences.png);
margin:150px;
padding-top:0px;
padding-left:20px;
padding-right:20px;
font-family:Calibri;
top:2100px;
width:1010px;
height:450px;
line-height:30%;
box-shadow: 8px 8px 12px #aaa;
}

.Communication{
position:absolute;
margin-left:115px;
margin-bottom:30px;
display:block;
}

.PAO{
margin-left:315px;
margin-bottom:30px;
position:absolute;
}

.MédiationCulturelle{
margin-left:515px;
margin-bottom:30px;
position:absolute;
}


.Gestiondeprojet{
margin-left:715px;
margin-bottom:30px;
position:absolute;
}

.Gestiondecontenu{
margin-left:115px;
margin-bottom:30px;
position:absolute;
top:260px;
}

.Langues{
margin-left:315px;
margin-bottom:30px;
position:absolute;
top:260px;
}



.Logiciels{
width:380px;
height:180px;
margin-left:515px;
background-color:#FFF;
position:absolute;
top:260px;
font-family:"please write me a song";
}

.Logiciels li{
list-style:none;
display: inline;
padding:25px;

}





/* DIVERS */

#Divers{
position:absolute;
background-image:url(Photos/Divers/fonddivers.png);
padding-top:5px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
display:block;
top:2900px;
left:150px;
width:1010px;
height:360px;
box-shadow: 8px 8px 12px #aaa;
line-height:30%;
}

.Equitation{
position:absolute;
left:150px;
}

.Concerts{
position:absolute;
left:323px;

}

.Artderue{
position:absolute;
left:523px;
}

.Musée{
position:absolute;
left:323px;
top:192px;
}

.Lire{
position:absolute;
left:523px;
top:192px;

}

.BAFA{
position:absolute;
left:723px;
}


/* BOUTON RETOUR VERS LE HAUT */

#bouton{
position:fixed;
bottom:50px;
right:25px;
display:none;
}




/* CREDITS */

#Credits a{
text-decoration:none;
color:#FFF;
}

#Credits{
background-image:url(Photos/bande%20noire.png);
background-repeat:no-repeat;
font-family:"please write me a song";
color:#FFF;
position:absolute;
top:3300px;
left:150px;
width:1100px;
height:40px;
padding-bottom:0px;
padding-top:15px;
padding-left:325px;
}
Sujet clos
Aller à