Partage
  • Partager sur Facebook
  • Partager sur Twitter

problème contenu face à face HTML CSS

SylvainRépulsif
    2 juin 2020 à 1:58:22

    Bonjour,

    je vous écris car depuis quelques jours je bloque sur un problème de débutant.

    Je n'arrive pas à aligner du contenu sur le côté gauche et avoir mon menu sur la droite en face à face.

    Tout se met automatiquement à la suite.

    Je n'aime généralement poser des questions idiotes mais la je bloque.

    Merci à tous

    • Partager sur Facebook
    • Partager sur Twitter
    AnttonDev
    • HTML / CSS
      2 juin 2020 à 7:38:48

      Bonjour,

      Il faudrait ton code html/css pour bien répondre (penses au bouton </>)

      Mais tu dois pour régler ton problème du côté de flexbox ou avec des grilles Css 

      -
      Edité par AnttonDev 2 juin 2020 à 7:42:02

      • Partager sur Facebook
      • Partager sur Twitter

      article sur les cookies walls • validator html • validator css • Doc MDN  • SweetAlert2• Lorem Ipsum • lorem Picsum • html color codes • Caractères spéciaux et entités HTML

      Mon site : BLOG | anttondev (wixsite.com)

      SylvainRépulsif
        2 juin 2020 à 14:39:50

        Bonjour et merci pour ta réponse,

        voici ma partie Html.

        <!doctype html public>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<html>
<head>

<title> Sly Beats
</title>
<p>
<h1> </h1>
<p/>

<style>
body{
background-color:white;
}
div {
  width: 1335px;
  max-width: 1335px;
  min-width: 700px;
}

.bouton {
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:left;
    margin:0 8px 0 0;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:#FAEDED;
    font-family: Arial,sans-serif;
}
.bouton, .bouton:active {
    background: #444;
    background: linear-gradient( #555, #2C2C2C);
    background: -webkit-linear-gradient( #555, #2C2C2C);
    background: -moz-linear-gradient( #555, #2C2C2C);
    background: -ms-linear-gradient( #555, #2C2C2C);
    background: -o-linear-gradient( #555, #2C2C2C);
    background: linear-gradient( #555, #2C2C2C);
}
.bouton {
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}
.bouton:hover {
    background: #555;
    background: -webkit-linear-gradient( #777, #333);
    background: -moz-linear-gradient( #777, #333);
    background: -ms-linear-gradient( #777, #333);
    background: -o-linear-gradient( #777, #333);
    background: linear-gradient( #777, #333);
}
.bouton:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}


body {
background:rgb(255,255,255)
}




div#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	left: 10px;
	}





 
</style>

<div class="figure">
  <img src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/SLY%20BEATS.jpg"
  alt="image" width="1525" height="500" title="sly beats"style="text-align:centre">
    


</form>
</div>
</head>



<header>
<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%201.html" class="bouton">ACCUEIL</a>
<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%202.html" class="bouton">BIOGRAPHIE</a>
<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%203.html" class="bouton">BEATS</a>
<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%204.html" class="bouton">CONTACT</a>
</header>
<body>

<br> <br>
<div class="container">
  <input type="text" placeholder="Search beat">
  <div class="search"></div>
</div>
<div class="widget">
<h3 class="widget-title"align="right">
<p><font color="white"style="background:#555">collaboration</font></p>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NA4DWHPN9X6ZE">
<table>
<tr><td><input type="hidden" name="on0" value="Achat"></td></tr><tr><td><select name="os0">
	<option value="Formule A">Formule A €20,00 EUR</option>
	<option value="Formule B">Formule B €50,00 EUR</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">


<h1 class="hv2">Instrumentales</h1>
                                <hr>
 
</form>

<div class="bloc-gauche">
<h3 class="audio"align="left">
     


<div class="row">
  <div class="col-lg-4"><BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio></div>
  <div class="col-lg-8"><BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio></div>
</div>




<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<div class="bloc-gauche">
<h3 class="audio"align="right">


<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata"loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>


 <h1 class="hv2"></h1>
                                <hr>

                                

 <div class="widget">
<h3 class="widget-title"align="right">  


 
 <div class="bloc-cont">
            	<h1 class="hv2">Nouvelles instrumentales</h1>
                                <hr>   
<br> <h4>Instrumentales</h4>
 
<div class="widget">
<h3 class="widget-title"align="right">


			<ul class="l-menu">
				<li><a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/instrumentales.html">Instrumentales</a></li>
				<li><a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/exclusives.html">Exclusives</a></li>
				<li><a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/non%20exclusives.html">Non exclusives</a></li>
				<li><a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/gratuites.html">Gratuites</a></li>
				<li><a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/promo.html">Promo / ventes flash</a></li>
			</ul>
			<hr>
		<h4>Genres</h4><ul class="l-menu">
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/hiphop.html">Hiphop</a> 
							<i></i>
						</li>
					
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/hardcore.html">Hardcore</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/newschool.html">New school</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/melancolique.html">Mélancolique</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/piano.html">Piano</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/oldschool.html">Old school</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/rnb.html">Rnb</a> 
							<i></i>
						</li>
					
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/autre.html">Autre</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Dancehall-reggae.html">Dancehall / Reggae</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/world.html">World</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Club-electro.html">Club / Electro</a> 
							<i></i>
						</li>
					
						<li>
							<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Synth%C3%A9.html">Synthé</a> 
							<i></i>
						</li>
					</ul>

</div>
<footer>
<p>Copyright © 2020 - SLY BEATS - Tous droits réservés</p> 


 
 

</footer>
</body>

</html>

         merci

        et voici ma partie Css


        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>


        div {
        border:0 solid #848686;
        margin-bottom:10px;
        margin-right:5px;
        margin-top:0;
        overflow:hidden;
        padding:20px 20px 10px;
        text-align:left;
        }





        body{
        background-color:white;
        }
        div {
          width: 1335px;
          max-width: 1335px;
          min-width: 700px;
        }

        .bouton {
            width:auto;
            padding:8px 0;
            text-align:center;
            display: inline-block;
            float:left;
            margin:0 8px 0 0;
            border-radius:7px;
            font-size: 0.85em;
            width:120px;
            color:#FAEDED;
            font-family: Arial,sans-serif;
        }
        .bouton, .bouton:active {
            background: #444;
            background: linear-gradient( #555, #2C2C2C);
            background: -webkit-linear-gradient( #555, #2C2C2C);
            background: -moz-linear-gradient( #555, #2C2C2C);
            background: -ms-linear-gradient( #555, #2C2C2C);
            background: -o-linear-gradient( #555, #2C2C2C);
            background: linear-gradient( #555, #2C2C2C);
        }
        .bouton {
        box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
        text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
        }
        .bouton:hover {
            background: #555;
            background: -webkit-linear-gradient( #777, #333);
            background: -moz-linear-gradient( #777, #333);
            background: -ms-linear-gradient( #777, #333);
            background: -o-linear-gradient( #777, #333);
            background: linear-gradient( #777, #333);
        }
        .bouton:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

        body {
        background:rgb(255,255,255)
        }

        @import url('https://fonts.googleapis.com/css?family=Inconsolata:700');

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        html, body {
          width: 100%;
          height: 100%;
        }

        body {
          background: #252525;
        }

        .container {
          position: absolute;
          margin: auto;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 300px;
          height: 100px;
          .search {
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 80px;
            background: crimson;
            border-radius: 50%;
            transition: all 1s;
            z-index: 4;
            box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
            // box-shadow: 0 0 25px 0 crimson;
            &:hover {
              cursor: pointer;
            }
            &::before {
              content: "";
              position: absolute;
              margin: auto;
              top: 22px;
              right: 0;
              bottom: 0;
              left: 22px;
              width: 12px;
              height: 2px;
              background: white;
              transform: rotate(45deg);
              transition: all .5s;
            }
            &::after {
              content: "";
              position: absolute;
              margin: auto;
              top: -5px;
              right: 0;
              bottom: 0;
              left: -5px;
              width: 25px;
              height: 25px;
              border-radius: 50%;
              border: 2px solid white;
              transition: all .5s;
            }
          }
          input {
            font-family: 'Inconsolata', monospace;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 50px;
            outline: none;
            border: none;
            // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            background: crimson;
            color: white;
            text-shadow: 0 0 10px crimson;
            padding: 0 80px 0 20px;
            border-radius: 30px;
            box-shadow: 0 0 25px 0 crimson,
                        0 20px 25px 0 rgba(0, 0, 0, 0.2);
            // box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5);
            transition: all 1s;
            opacity: 0;
            z-index: 5;
            font-weight: bolder;
            letter-spacing: 0.1em;
            &:hover {
              cursor: pointer;
            }
            &:focus {
              width: 300px;
              opacity: 1;
              cursor: text;
            }
            &:focus ~ .search {
              right: -250px;
              background: #151515;
              z-index: 6;
              &::before {
                top: 0;
                left: 0;
                width: 25px;
              }
              &::after {
                top: 0;
                left: 0;
                width: 25px;
                height: 2px;
                border: none;
                background: white;
                border-radius: 0%;
                transform: rotate(-45deg);
              }
            }
            &::placeholder {
              color: white;
              opacity: 0.5;
              font-weight: bolder;
            }
          }
        }


        div#footer {
            position: absolute;
            width: 750px;
            bottom: 0;
            left: 10px;
        }




        </head>








        h1{
          text-align: center;
        }
        .form-style {
          margin:10px auto;
          width: 400px;
          padding: 20px 12px 10px 20px;
          font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        }
        .form-style td {
          padding: 0;
          display: block;
          list-style: none;
          margin: 10px 0 0 0;
        }
        .form-style label{
          margin:0 0 3px 0;
          padding:0px;
          display:block;
          font-weight: bold;
        }
        .form-style .required{
          color:red;
        }
        .form-style input[type=submit], .form-style input[type=reset]{
          background: #4eb5f1;
          padding: 8px 15px 8px 15px;
          border: none;
          color: #fff;
        }
        .form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
          background: #4eb5f1;
          box-shadow:none;
          -moz-box-shadow:none;
          -webkit-box-shadow:none;
        }
        .form-style .field-textarea{
          height: 100px;
        }
        .form-style input[type=text],
        .form-style input[type=email],
        textarea{
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          border:1px solid #BEBEBE;
          padding: 7px;
          margin:0px;
          -webkit-transition: all 0.30s ease-in-out;
          -moz-transition: all 0.30s ease-in-out;
          -ms-transition: all 0.30s ease-in-out;
          -o-transition: all 0.30s ease-in-out;
          outline: none; 
        }
        .form-style .long{
          width: 100%;
        }
        .form-style input[type=text]:focus,
        .form-style input[type=email]:focus,
        .form-style textarea:focus{
          -moz-box-shadow: 0 0 8px #88D5E9;
          -webkit-box-shadow: 0 0 8px #88D5E9;
          box-shadow: 0 0 8px #88D5E9;
          border: 1px solid #88D5E9;
        }
        .error{
          color: #D8000C;
          background-color: #FFBABA;
        }

        label {
        display:block;
        width:150px;
        float:left;
        }


        merci d'avance

        -
        Edité par SylvainRépulsif 2 juin 2020 à 14:43:52

        • Partager sur Facebook
        • Partager sur Twitter
        Lamecarlate
        • HTML / CSS
          2 juin 2020 à 16:21:43

          Bonjour,

          pas de doctype ni de head dans le fichier CSS (d'ailleurs, si tu peux le colorer, ça serait top).

          Sinon :

          div {
  width: 1335px;
  max-width: 1335px;
  min-width: 700px;
}

          c'est contre-productif (width est fixe ici, max-width et min-width ne s'appliqueront jamais), et surtout beaucoup trop vague : réalises-tu que tu touches à *toutes les divs de ton site* sans exception ? (sauf si tu surcharges, bien sûr, mais autant ne pas avoir à sortir le bazooka)

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

          SylvainRépulsif
            2 juin 2020 à 18:31:00



            Bonjour et Merci pour ta réponse Lamecarlate ,je viens de faire ce que tu m'as conseillé et je joins mon code CSS.

            div {
border:0 solid #848686;
margin-bottom:10px;
margin-right:5px;
margin-top:0;
overflow:hidden;
padding:20px 20px 10px;
text-align:left;
}





body{
background-color:white;
}


.bouton {
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:left;
    margin:0 8px 0 0;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:#FAEDED;
    font-family: Arial,sans-serif;
}
.bouton, .bouton:active {
    background: #444;
    background: linear-gradient( #555, #2C2C2C);
    background: -webkit-linear-gradient( #555, #2C2C2C);
    background: -moz-linear-gradient( #555, #2C2C2C);
    background: -ms-linear-gradient( #555, #2C2C2C);
    background: -o-linear-gradient( #555, #2C2C2C);
    background: linear-gradient( #555, #2C2C2C);
}
.bouton {
box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}
.bouton:hover {
    background: #555;
    background: -webkit-linear-gradient( #777, #333);
    background: -moz-linear-gradient( #777, #333);
    background: -ms-linear-gradient( #777, #333);
    background: -o-linear-gradient( #777, #333);
    background: linear-gradient( #777, #333);
}
.bouton:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}

body {
background:rgb(255,255,255)
}

@import url('https://fonts.googleapis.com/css?family=Inconsolata:700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #252525;
}

.container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
  .search {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: crimson;
    border-radius: 50%;
    transition: all 1s;
    z-index: 4;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
    // box-shadow: 0 0 25px 0 crimson;
    &:hover {
      cursor: pointer;
    }
    &::before {
      content: "";
      position: absolute;
      margin: auto;
      top: 22px;
      right: 0;
      bottom: 0;
      left: 22px;
      width: 12px;
      height: 2px;
      background: white;
      transform: rotate(45deg);
      transition: all .5s;
    }
    &::after {
      content: "";
      position: absolute;
      margin: auto;
      top: -5px;
      right: 0;
      bottom: 0;
      left: -5px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      border: 2px solid white;
      transition: all .5s;
    }
  }
  input {
    font-family: 'Inconsolata', monospace;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 50px;
    outline: none;
    border: none;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: crimson;
    color: white;
    text-shadow: 0 0 10px crimson;
    padding: 0 80px 0 20px;
    border-radius: 30px;
    box-shadow: 0 0 25px 0 crimson,
                0 20px 25px 0 rgba(0, 0, 0, 0.2);
    // box-shadow: inset 0 0 25px 0 rgba(0, 0, 0, 0.5);
    transition: all 1s;
    opacity: 0;
    z-index: 5;
    font-weight: bolder;
    letter-spacing: 0.1em;
    &:hover {
      cursor: pointer;
    }
    &:focus {
      width: 300px;
      opacity: 1;
      cursor: text;
    }
    &:focus ~ .search {
      right: -250px;
      background: #151515;
      z-index: 6;
      &::before {
        top: 0;
        left: 0;
        width: 25px;
      }
      &::after {
        top: 0;
        left: 0;
        width: 25px;
        height: 2px;
        border: none;
        background: white;
        border-radius: 0%;
        transform: rotate(-45deg);
      }
    }
    &::placeholder {
      color: white;
      opacity: 0.5;
      font-weight: bolder;
    }
  }
}


div#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	left: 10px;
}




</head>








h1{
  text-align: center;
}
.form-style {
  margin:10px auto;
  width: 400px;
  padding: 20px 12px 10px 20px;
  font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style td {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}
.form-style label{
  margin:0 0 3px 0;
  padding:0px;
  display:block;
  font-weight: bold;
}
.form-style .required{
  color:red;
}
.form-style input[type=submit], .form-style input[type=reset]{
  background: #4eb5f1;
  padding: 8px 15px 8px 15px;
  border: none;
  color: #fff;
}
.form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
  background: #4eb5f1;
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
}
.form-style .field-textarea{
  height: 100px;
}
.form-style input[type=text], 
.form-style input[type=email],
textarea{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border:1px solid #BEBEBE;
  padding: 7px;
  margin:0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;  
}
.form-style .long{
  width: 100%;
}
.form-style input[type=text]:focus, 
.form-style input[type=email]:focus,
.form-style textarea:focus{
  -moz-box-shadow: 0 0 8px #88D5E9;
  -webkit-box-shadow: 0 0 8px #88D5E9;
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;
}
.error{
  color: #D8000C;
  background-color: #FFBABA;
}

label {
display:block;
width:150px;
float:left;
}


            • Partager sur Facebook
            • Partager sur Twitter
            SylvainRépulsif
              6 juin 2020 à 22:47:12

              Désolé les gens mais j'ai beau chercher,je ne trouve pas pour mettre de l'audio en face de mon menu de droite .
              • Partager sur Facebook
              • Partager sur Twitter
              noopy360
              • HTML / CSS
                6 juin 2020 à 23:05:13

                Bonsoir, si je peut me permettre si tu veux que l'on puisse "pouvoir/avoir envie" de t'aider, il faut :

                • éviter les erreurs grossière dans le code (balise </head> ligne 206 par exemple) pour cela je te conseil de déjà passe ton HTML/CSS sur les sites W3C dispo dans ma signature
                • avoir une bonne indentation de ton code -> Lien qui explique le pourquoi de l'indentation dans le codage
                • poster son code avec le bouton </> dispo dans le forum
                • en bonus tu peux aussi utiliser l'inspecteur de ton navigateur préférer !
                • il faut aussi éviter les majuscules dans le nom des balises ou leurs attribues
                • Partager sur Facebook
                • Partager sur Twitter
                https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen
                SylvainRépulsif
                  7 juin 2020 à 0:08:18

                  Bonsoir et merci pour ta réponse Noopy360, je vais corriger tout cela .
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Nyut
                    9 juin 2020 à 15:49:21

                    Bonjour,

                    Je vois plusieurs problème 

                    • Dans le head, tu as des balises HTML ?????
                    • Tu as balise </form> dans le head ???? Je pense a un mauvais copier / coller mais elle est ou la balise <form>
                    • Tu as une class "bloc-gauche" : J'ai peut etre passer vite le CSS mais je ne vois pas de CSS en rapport avec cette balise
                    • Tu as 3 fois body dans le CSS (1 dans le HTML et 2 dans le CSS). Je plaind le navigateur pour savoir lequel prendre
                    • Pourquoi du CSS dans le fichier HTML puis un fichier CSS a coté. Fais plusieurs fichiers CSS si il faut et appel les dans ton HTML
                    • J'ai vu du code bootstrap ligne 133 et 134. Tu l'appel jamais
                    • Je pense que j'en oubli. Suit les conseils de noopy360 surtout sur le W3C, ca t'indiquera les erreurs

                    -
                    Edité par Nyut 9 juin 2020 à 15:50:57

                    • Partager sur Facebook
                    • Partager sur Twitter

                    arf !!!

                    SylvainRépulsif
                      26 juin 2020 à 17:48:03 

                      petite correction du code Html ,
vous en pensez quoi?
Merci

<!doctype html>
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="UTF-8">

<link href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/style.css" rel="stylesheet">

<title> Sly Beats
</title>
<body>
<p>



<div class="figure">
  <img src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/SLY%20BEATS.jpg"
  alt="image" width="1620" height="500" title="sly beats">
    



</div>




<header>
	<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%201.html" class="bouton">ACCUEIL</a>
	<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%202.html" class="bouton">BIOGRAPHIE</a>
	<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%203.html" class="bouton">BEATS</a>
	<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/page%204.html" class="bouton">CONTACT</a>
</header>
<br> <br>
<div class="container">
  <input type="text" placeholder="Search beat">
  <div class="search"></div>
</div>



 <div class="widget">


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NA4DWHPN9X6ZE">
<table>
<tr>
<td><input type="hidden" name="on0" value="Achat"></td>
</tr>
<tr>
<td><select name="os0">
	<option value="Formule A">
	Formule A €20,00 EUR
	</option>
	<option value="Formule B">
	Formule B €50,00 EUR
	</option>
</select> </td>
</tr>
</table>
<input type="hidden" name="currency_code" value="EUR">
<input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_cart_LG.gif" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
<img alt="pixel" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">


</form>

<div class="bloc-cont">
            	<h1 class="hv2">Instrumentales</h1>


                                <hr>
								</div>



<div class="bloc-gauche">

     
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>


<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<audio controls="controls" class="musique">
   <source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mp3" />
</audio>

 

                                <hr>
<div class="widget">


<div class="bloc-cont">
            	<h1 class="hv2">Nouvelles instrumentales</h1>
				
<div class="bloc-gauche">


<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<audio controls="controls" class="musique">
   <source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mp3" />
</audio>

				<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<audio controls="controls" class="musique">
   <source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mp3" />
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<audio controls="controls" class="musique">
   <source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mp3" />
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
</audio>
<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted>
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<BR><P>DEMI <P>
<audio controls preload="metadata" loop muted> 
<source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mpeg">
<source src="perfect-time.wav" type="audio/wav">
<source src="perfect-time.mp3" type="audio/ogg;codecs=vorbis">
</audio>

<audio controls="controls" class="musique">
   <source src="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/DEMI%20PORTION%20-%20ConFeaturing%20-%2012%20Mesures%20-%20Prod%20Dj%20Rolxx.mp3" type="audio/mp3" />
</audio>

				

 <div class="col-md-3">
            <div class="bloc-cont">
              
              <ul class="l-menu"> 
                <li>
				<a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/instrumentales.html"> <h2>Instrumentales</h2></a>
                </li>
                <li>
                  <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/exclusives.html"><h2>Exclusives</h2></a>
                </li>
                <li>
                  <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/non%20exclusives.html"><h2>Non exclusives</h2></a>
                </li>
                <li>
                  <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/gratuites.html"><h2>Gratuites</h2></a>
                </li>
                <li>
                  <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/promo.html"><h2>Promo / ventes flash</h2></a>
                </li>
              </ul> 
              <div class="bloc-cont"> 
                <h2>Genres</h2>
                <ul class="l-menu"> 
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/hiphop.html"><h2>Hiphop</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/hardcore.html"><h2>Hardcore</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/newschool.html"><h2>New school</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/melancolique.html"><h2>Mélancolique</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/piano.html"><h2>Piano</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/oldschool.html"><h2>Old school</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/rnb.html"><h2>Rnb</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/autre.html"><h2>Autre</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Dancehall-reggae.html"><h2>Dancehall / Reggae</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/world.html"><h2>World</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Club-electro.html"><h2>Club / Electro</h2></a>
                  </li>
                  <li>
                    <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/Synth%C3%A9.html"><h2>Synthé</h2></a>
                  </li>
                </ul> 
                
               
			   
             
			 </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
 <a href="file:///C:/Users/sylva/OneDrive/Bureau/site%20sly/instrumentales.html">1</a> <a href="page2.htm">2</a>
 
 <footer>
                Copyright © 2020 - SLY BEATS - Tous droits réservés
              </footer>
                 
</body>

                 
</html>

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Nyut
                        29 juin 2020 à 13:52:32

                        Bonjour

                        La balise paragraphe <p> va toujours avec sa balise </p>. Juste après <body> tu ouvres un paragraphe sans la fermer

                        Ligne 121 tu ouvres un paragraphe <p> mais tu la ferme par la meme balise <p> alors que ca aurait du etre </p> idem 125 ...

                        Pourquoi  des balises <br/> devant c'est ligne 121, 125 ... et en plus ca ne s'ecrit pas <br> mais <br/>

                        • Partager sur Facebook
                        • Partager sur Twitter

                        arf !!!

                        SylvainRépulsif
                          29 juin 2020 à 14:35:46

                          Bonjour et merci pour ta réponse Nyut,

                          le <br/> me permet de sauter une ligne et de faire un espace entre chaque audio dans mon site pour avoir plus d'espace entre chaque audio  .

                          Sinon il existe une autre manière de faire?

                          Merci

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Mewen_bzh
                          • HTML / CSS
                            29 juin 2020 à 15:19:25

                            Bonjour,

                            Si tu veux simplement gérer les espaces entre tes blocs alors il faut utiliser les propriétés CSS margin et padding. ;)

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Je ne réponds pas aux messages privés.

                            problème contenu face à face HTML CSS

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                            • Editeur ●
                            • Markdown