28112 sujets

CSS et mise en forme, CSS3

Besoin d'aide Mini projets en css HtML

Bonjour a tous ,

J'aurais besoin d'aide pour un devoir que je dois effectuer en html/css a la fac le cahier des charge est le suivant:

Partie HTml:

6 pages
Partie CSS:
respectez les conventions de codage
un menu avec des boutons qui changent de couleur quand on a la souris dessus
Comporter un pied de page rappelant obligatoirement le logo du département et le nom des deux binômes avec un lien vers leur adresse mail
un style uniformisé pour toutes les pages
une adaptation a 3 diffèrent périphériques :Smartphone Ecrans et imprimantes
Je ne sais pas par ou commencer et comment parvenir a certaines de ces taches et vous demandes donc de l'aide

merci d'avance de votre possible aide
Modérateur
bonjour, bonsoir,

qu'as tu déjà fait ?
Quelles sources, références, connaissances as tu que tu peux utiliser ?

tu pouvais commencer par les "squelettes" (fichiers html/css) , et les liens pour naviguer de pages en pages ... ou bien tu n'as rien de rien ? Au quel cas, le forum n'est pas là pour faire ton exercice, mais t'aider Smiley smile au cours de ton avancement.

Cdt
Modifié par gcyrillus (11 Nov 2020 - 19:20)
gcyrillus a écrit :
bonjour, bonsoir,

qu'as tu déjà fait ?
Quelles sources, références, connaissances as tu que tu peux utiliser ?

tu pouvais commencer par les "squelettes" (fichiers html/css) , et les liens pour naviguer de pages en pages ... ou bien tu n'as rien de rien ? Au quel cas, le forum n'est pas là pour faire ton exercice, mais t'aider Smiley smile au cours de ton avancement.

Cdt

J'ai déjà réussi a faire un menu déroulant respectant le cahier des charge je pense que les 6 pages avec les différents liens ne vont pas être un problème ce qui me pause un peu problème c'est la compatibilité avec les différents périphérique (ex: mon menu déroulant marche sur pc mais pas sur smartphone) et j'aurais besoin de quelque conseil de mise en page
Modérateur
Sans voir ton code , il va être difficile de t'aider.

Je suis personnellement assez fan des éditeurs en ligne qui permettent de partager des morceaux de codes fonctionnels à coté du code mis dans la question . exemples parmis d'autres : http://jsfiddle.net , http://codepen.io/pen , http://jsbin.com (au cas ou IE11 est impliqué) , des morceaux de structure HTML https://www.webfx.com/web-design/html-ipsum/ , des images https://dummyimage.com/ ou https://picsum.photos/images .
Smiley decu https://codepen.io/Idriss2/pen/jOrXOWq
Pour l'instant j'ai fait ça je n'est pas encore mis les lien parce que j'essaye de travailler sur la mise en page le déroulant marche bien sur ordinateur mais pas smartphone je n'ai pas du tout assez d'expériences je penses avoir fais beaucoup d'erreur et je n'aime pas du tout la mise en page de ma page d'accueil. 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Page d'acceuil</title>
	<link rel="stylesheet" href="Bang.css" />

</head>
<header>
	<ul id="Test_menu">
		<li><a href="#">Sommaire</a>
			<ul>
			<li><a href="#">Page d'acceuil</a></li>
			<li><a href="#">Page de recherche</a></li>
			<li><a href="#">Réfferences bibliographique</a></li>
			<li><a href="#">Résumer en anglais</a></li>
		</ul>
		</li>
		<li><a href="#">CV</a>
		<ul>
			<li><a href="#">Cv Idriss</a></li>
			<li><a href="#">Cv Anais </a></li>
		</ul>
		</li>
	</ul>
</header>
<body>
<h1><b>Logiciel d'attaque réseau</b> - Forgeur de paquets Scapy</h1>	
<footer>
	<img src="RT.png">
	<a href="mailto:ndongoidriss2203@gmail.com">Idriss N</a>
	<a href="mailto:#">Anaïs C</a>
	</footer>
	

body{
background-color:#000000;
color:#FFFFFF;
position: relative;
text-align: center;
}
footer{
	text-align:right;
    position absolute; bottom: 0;
}
footer img{border:3; 
text-align:left;}

h1{
	border: 1px solid white; padding: 5px;
	font-style: arial;
}
/*Menu déroulant*/
#Test_menu, #Test_menu ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#Test_menu li{
display:inline-block;
position:relative;
border-radius:8px 8px 0 0;
}
#Test_menu ul li{
display:inherit;
border-radius:0;
}
#Test_menu ul li:hover{
border-radius:0;
}
#Test_menu ul li:last-child{
border-radius:0 0 8px 8px;
}
#Test_menu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#Test_menu li:hover ul{
	
max-height:15em;

}
/*couleur*/
#Test_menu li:first-child{
background-color: #B62B16;
background-image:-webkit-linear-gradient(top, #a13c30 0%, #B62B16 100%);
background-image:linear-gradient(to bottom, #a13c30 0%, #B62B16 100%);
}
#Test_menu li:last-child{
background-color: #089F97;
background-image:-webkit-linear-gradient(top, #089F97 0%, #06B8AE 100%);
background-image:linear-gradient(to bottom, #089F97 0%, #06B8AE 100%);
}
/* background des liens sous menus */
#Test_menu li:first-child li{
background:#B62B16;
}
#Test_menu li:last-child  li{
background:#06B8AE;
}
/* background des liens menus et sous menus au survol */
#Test_menu li:first-child:hover, #Test_menu li:first-child li:hover{
background:#FDB2A2;
}
#Test_menu li:last-child:hover, #Test_menu li:last-child li:hover{
background:#83ECE6;
}
/* les a href */
#Test_menu a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#Test_menu ul a{
padding:8px 0;
}
#Test_menu li:hover li a{
color:#fff;
text-transform:inherit;
}
#Test_menu li:hover a, #Test_menu li li:hover a{
color:#000;
}
Smiley decu
Modérateur
Bonjour,

allan00958 a écrit :
Pour adapter le site selon la taille de l'écran:

https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries

+1

Pour les mobiles, il faudrait aussi rajouter la ligne suivante dans la partie <head> de la page :
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette instruction permet aux mobiles d'adapter l'affichage et en particulier la taille des caractères.

Amicalement,
Modérateur
Pour un premier projet , peut-etre devrait tu ordonner plus clairement ton HTML et ton CSS pour ne pas t'y perdre trop facilement.

la première étape serait de créer ton layout principal pour y dispatcher tes différentes zones et leur contenu pour enfin stylisé chacun d'eux.

par exemple ton code HTML avec des balises HTML5 comme tu as commencé 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>titre de la page </title>
  <link rel="stylesheet" href="Bang.css" />
</head>

<body>
  <header>
    <nav> ton menu ici</nav>
    <h1>titre plutôt ici?</h1>
  </header>
  <main> 
    contenu principal 
  </main>
  <footer> 
    footer en bas 
  </footer>
</body>

</html>


attention a poser ta balise <body> aprés <head> et non pas <header> . Smiley smile

pour le CSS , idem, une arborescence pour t'y retrouver :
/* CSS commun */
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
/* ====== */
/* header */
header {}
header nav {}
header nav ul {/* ton menu */}
header h1 {}
/* etc... */
/* ====== */

/* ==== */
/* main */
main {}
/* etc... */
/* ==== */

/* ====== */
/* footer */
footer {}
/* etc... */
/* ====== */


/*  gestion des mediaqueries */

/* ecran plus large que 768px */
@media (min-width:768px ) {
  
  body{}
  
  /* ====== */
  /* header */
  
  /* ====== */

  /* ==== */
  /* main */
  
  /* ==== */

  /* ====== */
  /* footer */
  
  /* ====== */

}


voila ce ne sont que des exemples , mais tu pourras reprendre, ajouter/enlever du contenu ou des regles/selecteur CSS plus facilement en ayant une cohérence de lecture dans chaque fichier.

l'exemple te colle le footer en bas .

Pour ton menu, qu'est ce qui ne fonctionne pas dans les mobiles ?
Modifié par gcyrillus (13 Nov 2020 - 15:29)
Sujet clos
Aller à