28112 sujets

CSS et mise en forme, CSS3

[Résolu] Besoin d'aide et astuce svp :)

Bonjours à vous j’espère que vous allez bien ?

J'ai deux petite question dont une concerne la police sur Photoshop a CSS
upload/1564097682-76487-question.jpg

sur l'image que je viens de poster au-dessus on voit la police Myriad Pro qui est Regular a 30PX et Forte.

comment on écrit tout ça en CSS je me demande surtout pour le mot Forte

font-family: "Myriad Pro", regular, serif;

font-size: 30px;


j'essais de reproduire une maquette que j'ai créer via Photoshop, mais pour ma police d’écriture c'est pas parfait du à un manque d'information.


Deuxième question en rapport avec les Hovers

Voici mon Menu
upload/1564098181-76487-11.jpg

J'aimerais que quand l’utilisateur survole la souris sur le menu Accueil @ Contact que le rectangle gris en dessous change de couleur comme ceci.

upload/1564098265-76487-22.jpg

présentement ce que j'ai réussis à faire fonctionnement seulement quand l'utilisateur survole la souris sur le rectangle de couleur gris qui devient blanc, je suis pas capable de faire en sorte que si l’utilisateur survole le mot accueil et bien le rectangle gris devient blanc.

je vais laisser mon code Html et CSS. je suis en première session en programmation web.
merci à de votre temps précieux.



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

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Samuel St-Jean">
    <meta name="description" content="Html page web TP2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FixTooth.com</title>
    <link href="TP2CSS.css" rel="stylesheet" rel="stylesheet">
    </head>

    <body> 
    <header>
    <section id="grad">
        <img src="images/logo.png" class="logo" alt="logo" width="300px" height="150px">
        <h1>FIX TOOTH</h1>
    <nav>
        <ul>
            
            <li><a href="accueil.htm" title="page accueil" class="active">Accueil</a></li>
            <li><a href="produits.htm" title="page produits">Services</a></li>
            <li><a href="blogue.htm" title="lire le blogue">Promotion</a></li>
            <li><a href="apropos.htm" title="page à propos">Blogue</a></li>
            <li><a href="contact.htm" title="page contact">Contact</a></li>

            <div id="navacc">
            <li><a href="accueil.htm" title="" class="active"></a></li>
            </div>
            <li><a href="produits.htm" title=""></a></li>
            <li><a href="blogue.htm" title=""></a></li>
            <li><a href="apropos.htm" title="s"></a></li>
            <li><a href="contact.htm" title=""></a></li>
            
        </ul>
    </nav> 
     </section>       
    </header>
    </body>


CSS

html {
    background-color: white;
    width: 1080px;
    box-sizing: border-box;
    margin: 0 auto;

}

header img {
    align-content: center;
    text-align: center;
    float: left;
    margin-left: 5px;
}

header h1 {

    align-content: center;
    text-align: center;
    margin: 0;
    letter-spacing: 20px;
    font-size: 75px;
    font-family: "Castellar", regular, serif;
    color: white;
}



ul li a {

    font-family: "Myriad Pro", regular, serif;
    font-size: 30px;
    font-weight: bold;
}

#navacc a:hover {
    background: white;
    color: white;
    text-decoration: none;
}

#navacc li a {
    height: 17px;
    width: 96px;
    display: block;
    text-decoration: none;
    background: #494949;
    margin-top: -2px;
   
    
}




ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline-block;
    margin-left: 35px;
    margin-top: 5px;

}

li a {
    color: white;
    text-decoration: none;
}



#grad {
    background: linear-gradient(#90a0c9, #90a0c9);
    height: 150px;
}


body {

    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
}

Modifié par MI7QC (27 Jul 2019 - 21:16)
Administrateur
Hello,

J'espère que tu vas bien également.

Je vais tenter de répondre à ta première question...

Je ne vois nulle part dans ton HTML ou dans ton CSS l'endroit qui fait référence à tes polices "Castellar" et "Myriad Pro", donc si tes visiteurs ne l'ont pas sur leur ordinateur, elles ne s'afficheront pas chez eux.

Ensuite, la graisse "Forte" n'existe pas en tant que telle dans le Web. Tu peux l'émuler comme tu l'as fait via :

font-weight: bold;


Ceci dit, tu peux également choisir une valeur autre que "bold" qui sera plus intéressante : essaye les valeurs 600, 700, 800 ou 900. Tu auras peut-être un meilleur résultat.
Administrateur
Concernant ton second problème : c'est tout à fait normal que la bordure sous le lien ne change pas au survol du lien puisque ce sont deux éléments complètement séparés.

Tu as créé un div "navacc" qui ne se trouve même pas dans ta liste de liens.

Il serait bien plus simple de placer une bordure sous chacun des liens, ainsi tu pourrais changer la couleur de la bordure au survol et au focus.

Supprime ta div navacc qui ne fait que parasiter tout ça, et essaye un truc aussi simple que ça :

ul li a {
  border-bottom: 20px solid #333;
}
ul li a:hover, ul li a:focus {
  border-bottom-color: #fff;
}
je vais très bien merci Smiley smile

pour ce qui est de la polices je vais l'intégrer bientôt faut je refasse un peu de lecture dans mes document et pour mon Hover l'astuce fonctionne à merveille j'ai pris la peine de l’écrire dans mes notes de cours sa sera bien utile.

sa doit pas toujours être évident quand on fait une maquette et la reproduire a 100% identique sur HTML,CSS vue les contraintes des polices.... présentement je navigue les astuce sur le web mais c'est pas au top et voici la différence visuel.

voici ma maquette PhotoShop

upload/1564193446-76487-23232323232323232.jpg

et ma version CSS,html

upload/1564193710-76487-sanstitre.jpg


Petite question sur mon Sous-menu on peut constater que les titres des sous-menu on une espace de X pixel est-ce que c'est du a un probleme de margin? logiquement le text serait a la meme position que le mot service, comme sur ma maquette...


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

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Samuel St-Jean">
    <meta name="description" content="Html page web TP2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FixTooth.com</title>
    <link href="TP2CSS.css" rel="stylesheet" rel="stylesheet">
    
    
    </head>
    
    <body>
        
    <header>
    <section id="grad">
        <img src="images/logo.png" class="logo" alt="logo" width="300px" height="150px">
        <h1>FIX TOOTH</h1>
    
    <nav> 
        <ul class="topmenu">
            <li><a href="accueil.htm" title="page accueil" >Accueil</a></li>
            <li><a href="services.htm" title="les services">Services</a>
            
            <ul class="sousmenu"> 
             <li><a href="Detartrage.htm" title="Detartrage">Detartrage</a></li>
              <li><a href="Prothese.htm" title="Prothese">Prothese</a></li>
        </ul>
        </li>
            <li><a href="promotion.htm" title="les promotions">Promotion</a></li>
            <li><a href="leblogue.htm" title="lire blogue">Blogue</a></li>
            <li><a href="contact.htm" title="page contact">Contact</a></li> 
              
        </ul>
    </nav>  
     </section>       
    </header>
    <section id="separation"> </section> 
    <div> 
    <img id="imgbck" src="images/bck.jpg" class="logo" alt="logo" >
 
      <p id="bodytext">Depuis bientôt 35 ans, la clinique dentaire Fix Tooth offre des services dentaires d’exception à la population de Mars et ses environs. Sa mission : offrir des soins de première qualité dans un environnement chaleureux et convivial.</p>
        
      <h1 id="bodytext1">FIX TOOTH - FIX TOUT</h1>
    </div> 
    
   <section id="separation1"> </section>
    
    </body>



CSS ligne 74 menu déroulant.


html {
    background-color: white;
    width: 1080px;
    box-sizing: border-box;
    margin: 0 auto;

}


/************** HEADER *************/

header img {
    align-content: center;
    text-align: center;
    float: left;
    margin-left: 5px;
}

header h1 {

    align-content: center;
    text-align: center;
    margin: 0;
    letter-spacing: 20px;
    font-size: 75px;
    font-family: "Castellar", regular, serif;
    font-weight: 1;
    color: white;
}

#grad {
    background: linear-gradient(#90a0c9, #90a0c9);
    height: 150px;
}


/* un box sizing pour survoler sur le menu et faire hover sur les rectangles */
ul li a {

    font-family: "Myriad Pro", regular, serif;
    font-size: 30px;
    font-weight: bold;
    border-bottom: 20px solid #494949;
    
}

ul li a:hover, ul li a:focus {
  border-bottom-color: #fff;
    
}

/***** positionnemnt du menu ****************/

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    display: inline-block;
    margin-left: 35px;
    margin-top: 5.5px;

}

li a {
    color: white;
    text-decoration: none;
}


/******** styles menus deroulants   **************/
    
ul.sousmenu{
        margin-top: 22px;
        background: #494949;
        opacity: 0.9;
        width:auto;
        height:auto;
}
    
  
ul.sousmenu li a{
        font-family: "Myriad Pro", regular, serif;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid black;
        padding: 0.1em 1em;
        white-space: nowrap; /* le texte reste toujours sur une seule ligne*/   
        
}
    
ul.sousmenu li:last-child a{
    border-bottom:none;/* enlever le border du dernier li*/
}
    
/* selecteur ci-apres pour les a du sous menu seulement*/
ul.sousmenu li a:hover {
        background:hsla(50, 31%, 11%, 0.7);
        padding-top:.2em;
        color:white;
} 
    
ul.topmenu li{
    position:relative; /* parent point de reference pour le positionnement des sous menu*/    
}

/* le selecteur veut dire: si un li du topmenu est en etat de survol et qui a un enfant ul, changer la propriete display a block*/
    ul.topmenu li:hover > ul{
        display:block;
        position:absolute; /* sorti du normal flow: la position naffecte pas le top menu*/
        top:2em; /* se place dirrectement en dessous du top menu*/
        z-index:2;
}
    
ul.sousmenu {
        display:none; 
}

#separation{
    height: 1px;
    background-color: black;
}

/********************BODY*************************/




body {

    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    font-weight: bold;
}

#imgbck{
    opacity: 0.7;   
}

#bodytext{ 
font-family: "Cambria Math", regular, serif;
font-size: 24px;
font-weight: 900;
line-height: 26px;
font-style: oblique 50deg;
text-align:center;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 6px;
margin-left: 60px;
position:absolute;
top:185px;
width:955px;
z-index:1;
}

#bodytext1{ 
font-family: "Castellar", regular, serif;
font-size: 55px;
font-weight: 100;
line-height: 26px;
text-align:center;
text-transform: uppercase;
letter-spacing: 3px;
word-spacing: 6px;
position:absolute;
top:350px;
width:1080px;
z-index:1;
color: #000000;
}

#separation1{
    height: 1px;
    background-color: black;
    margin-top: -4.5px;
}

Modifié par MI7QC (27 Jul 2019 - 04:20)
Sujet clos
Aller à