Forums Développement Multimédia

Aller au contenu

- - - - -

Comment insérer du texte par dessus les boutons du Menu Principale

CODE dreamwaver CC 2018

1 réponse à ce sujet

#1 youpibrother

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 20 June 2018 - 06:14 AM

Bonjour, je débute avec le code HTML5... je ne parviens pas à insérer et positionner du texte par dessus les boutons que j'ai codé!
- Ou ? comment placer du texte par dessus ses formes s'il vous plait. voir "MENU PRINCIPAL" ci dessous.

Cordialement
Cyrille




/* -----DEBUT---STYLE---CSS----- */

@charset "utf-8";

/* ---------------- */
body {margin: 0; padding: 0; overflow-x:hidden; background:#C5BFBF;background: url(images/bg-France_Rivers_Bridges.jpg)no-repeat center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;}
/* ---------------- */
img {position: absolute; display: block; margin: 0; border: none; padding: 0}
/* ---------------- */
div {position: absolute;}
#container {display: block; position: relative; width: 960px; height: 1035px; overflow: hidden;}
#bravo12 {top: 0;left: 1060px;width: 960px;height: 1035px;}
#haut {top: 0;left: -1060px;width: 960px;height: 60px;background:#FE0000;}



/* MENU PRINCIPAL - toutes les FORMES */
#f_menu_principal {top: 60px;left: -1060px;width: 960px;height: 35px;background:#000;}
#menu_principal {top: 65px;left: -1056px;width: 946px;height: 25px;}
#menu_principal_btn01 {top: 0;left: 0;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn02 {top: 0;left: 95px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn03 {top: 0;left: 190px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn04 {top: 0;left: 285px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn05 {top: 0;left: 380px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn06 {top: 0;left: 475px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn07 {top: 0;left: 570px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn08 {top: 0;left: 665px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn09 {top: 0;left: 760px;width: 91px;height: 25px;background:#1F2121;}
#menu_principal_btn10 {top: 0;left: 855px;width: 91px;height: 25px;background:#1F2121;}
/* DIAPORAMA - REMPLACER par un DIAPORAMA de SIX IMAGES + AJOUTER BOUTONS de NAVIGATION*/
#diaporama {top: 95px;left: -1060px;width: 960px;height: 360px;}
#diaporama01 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
#diaporama02 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
#diaporama03 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
#diaporama04 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
#diaporama05 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
#diaporama06 {top: 0;left: 0;width: 960px;height: 360px;background:#00FF00;}
/* BOUTONS LIENS avec IMAGES */
#pip {top: 460px;left: -1060px;width: 961px;height: 70px;}
#pip01 {top: 0;left: 0;width: 158px;height: 70px;background:#00FF00;}
#pip02 {top: 0;left: 160px;width: 158px;height: 70px;background:#00FF00;}
#pip03 {top: 0;left: 321px;width: 158px;height: 70px;background:#00FF00;}
#pip04 {top: 0;left: 482px;width: 158px;height: 70px;background:#00FF00;}
#pip05 {top: 0;left: 643px;width: 158px;height: 70px;background:#00FF00;}
#pip06 {top: 0;left: 803px;width: 158px;height: 70px;background:#00FF00;}
/* PUBLICITE INTERNE */
/* #publicite01 Sera tjrs une Image */
/* #publicite02 Sera tjrs du texte avec une insertion de "GOOGLE FONTS" */
#publicite {top: 535px;left: -1060px;width: 960px;height: 190px;}
#publicite01 {top: 0;left: 0;width: 275px;height: 190px;background:#00FF00;}
#publicite02 {top: 0;left: 275px;width: 685px;height: 190px;background:#FFF;}
/* FRAME de GAUCHE */
#frame_g {top: 730px;left: -1060px;width: 182px;height: 300px;}
#frame1 {top: 0;left: 0;width: 182px;height: 300px;background:#FFF;}
/* ETIQUETTES des DETAILS */
#detail {top: 730px;left: -875px;width: 777px;height: 300px;}
#detail01 {top: 0;left: 0;width: 257px;height: 300px;background:#FFF;}
#detail02 {top: 0;left: 260px;width: 257px;height: 300px;background:#FFF;}
#detail03 {top: 0;left: 520px;width: 257px;height: 300px;background:#FFF;}
/* ONGLETS pour les ETIQUETTES ROUGE des ONGLETS */
#onglet {top: 737px;left: -875px;width: 767px;height: 22px;}
#onglet01 {top: 0;left: 0;width: 90px;height: 20px;background:#FE0000;}
#onglet01_trait {top: 20px;left: 0;width: 247px;height: 2px;background:#FE0000;}
#onglet02 {top: 0;left: 260px;width: 90px;height: 20px;background:#FE0000;}
#onglet02_trait {top: 20px;left: 260px;width: 247px;height: 2px;background:#FE0000;}
#onglet03 {top: 0;left: 520px;width: 90px;height: 20px;background:#FE0000;}
#onglet03_trait {top: 20px;left: 520px;width: 247px;height: 2px;background:#FE0000;}
/* -----FIN---STYLE---CSS----- */




<!-- DEBUT de HTML -->

<!doctype html>
<!-- OBLIGATOIR de mettre la langue... dans ce cas c'est FR -->
<html lang="fr">
<!-- DEBUT de : <head> -->
<head>
<meta charset="utf-8">
<title>Index</title>
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<!-- FIN de : </head> -->

<body>
<!-- Je crée un conteneur qui contient des sections -->
<div id="container" >
<!-- Début HEADER -->
<div id="bravo12"><div id="haut" ></div>

<div id="f_menu_principal" ></div>
<div id="menu_principal" >
<div id="menu_principal_btn01" ></div>
<div id="menu_principal_btn02" ></div>
<div id="menu_principal_btn03" ></div>
<div id="menu_principal_btn04" ></div>
<div id="menu_principal_btn05" ></div>
<div id="menu_principal_btn06" ></div>
<div id="menu_principal_btn07" ></div>
<div id="menu_principal_btn08" ></div>
<div id="menu_principal_btn09" ></div>
<div id="menu_principal_btn10" ></div>
</div>

<div id="diaporama" >
<div id="diaporama01" ></div>
<div id="diaporama02" ></div>
<div id="diaporama03" ></div>
<div id="diaporama04" ></div>
<div id="diaporama05" ></div>
<div id="diaporama06" ></div>
</div>

<div id="pip" >
<div id="pip06" ></div>
<div id="pip05" ></div>
<div id="pip04" ></div>
<div id="pip03" ></div>
<div id="pip02" ></div>
<div id="pip01" ></div>
</div>

<div id="publicite" >
<div id="publicite01" ></div>
<div id="publicite02" ></div>
</div>

<div id="frame_g" >
<div id="frame1" ></div>
</div>

<div id="detail" >
<div id="detail01" ></div>
<div id="detail02" ></div>
<div id="detail03" ></div>
</div>

<div id="onglet" >
<div id="onglet01" ></div>
<div id="onglet01_trait" ></div>
<div id="onglet02" ></div>
<div id="onglet02_trait" ></div>
<div id="onglet03" ></div>
<div id="onglet03_trait" ></div>
</div>
</div>
</div>
</body>
</html>
<!-- FIN de HTML -->
Merci de votre intérêt enthousiaste...:
À très bientôt pour une plus grande expérience !

Cordialement
Cyrille, LE PUIL

1, ruelle Maéva Ranou
97620 Chirongui
Mayotte (île de)
GSM. (+262) 639.685.617

Sites web en cours de construction : avec Dreamwever CC 2018
(ouverture sept. 2018)
www.Bravo.yt
www.YoupiBrother.com

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6998 messages

Posté 21 June 2018 - 17:20 PM

Bonsoir,

Pour info, un menu se fait généralement avec une liste à puce.
Pour simplifier, le menu devrait être de la forme :

<nav id="menu">
        <ul>
                <li><a href="lien">lien 1</a></li>
                <li><a href="lien">lien 2</a></li>
                <li><a href="lien">lien 3</a></li>
                <li><a href="lien">lien 4</a></li>
                <li><a href="lien">lien 5</a></li>
        </ul>
</nav>

et le CSS qui correspond :

#menu ul {
        list-style:none;
        font-size : 0;
        margin : 0;
        padding : 0;
}
#menu ul li{
        display:inline-block;
}
#menu ul li a{
        display:inline-block;
        background-color : orange;
        color : white;
        text-decoration : none;
        padding : 6px 10px;
        border-radius : 3px;
        font-size : 16px;
        transition-duration : 500ms;
}
#menu ul li a:hover{
        background-color : blue;
}





Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP