11497 sujets

JavaScript, DOM et API Web HTML5

Bonsoir a tous!!! je me présente, laurent, 30 ans, et apprenti bootsrap worker!!!lol
Je me decide a vous poster mon souci car cela fait des jours que je bataille sans succès.
je vous fais une petite description: voila je suis en train de faire un carousel bootstrap. dans ce carousel, un "form" découpé en plusieurs partie donc chaque partie sera sur une partie différente du carousel.
pour l'instant tout va , le seul souci c'est que je n'arrive pas a deplacer les bulles "indicators" qui sont mal placer, je souhaite les placer en dehors du form, juste en dessous, dans la partie de la section tous en bas.
j'arrive a les deplacer en jouant avec les height, mais saoit (en reduisant l'ecran pour tester l'adaptabilité), je me retrouve avec les indicators au milieu de mon form, au alors une parie de mon form se retrouve coupé!!!!!
je vous donne le code:
<div class="container-fluid">
	

<section>

		<!--ENFIN LE FORMULAIRE-->
<form method="post" action="traitement.php">
		
		<!--LE CODE CAROUSEL-->
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators bulles">
	<li data-target="#carousel" data-slide-to="0" class="active"></li>
	<li data-target="#carousel" data-slide-to="1"></li>
	<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">


		<!--PREMIERE PARTIE DU CAROUSEL-->
<div class="item active">

		<!--SOUS TITRE-->



<div class="row">	
<div class="col-lg-offset-2 col-lg-8 formulaire">

		<!--PREMIERE LIGNE PARTIE VOUS-->
		<legend>Vous êtes ...</legend>
<div class="radio">

		<ul><li>
		<label for="celib" class="radio">
        <input type="radio" name="vous" value="celib" id="celib">
        célibataire
		</label>
      
		<label for="couple" class="radio">
        <input type="radio" name="vous" value="couple" id="couple">
        en couple
		</label>
      
		<label for="moi" class="radio">
        <input type="radio" name="vous" value="moi" id="moi">
        je le garde pour moi
		</label>
		</li></ul>
</div>


		<legend>Avez-vous des enfants ...</legend>
<div class="radio">

		<ul><li>
		<label for="oui" class="radio">
        <input type="radio" name="gosse" value="oui" id="oui">
        oui
		</label>
      
		<label for="non" class="radio">
        <input type="radio" name="gosse" value="non" id="non">
        non
		</label>
		</li></ul>
</div>
	
		<legend>Vous habitez ...</legend>
<div class="radio">

		<ul><li>
		<label for="home" class="radio">
        <input type="radio" name="loger" value="home" id="home">
        chez moi
		</label>
      
		<label for="coloc" class="radio">
        <input type="radio" name="loger" value="coloc" id="coloc">
        en colocation
		</label>
      
		<label for="parents" class="radio">
        <input type="radio" name="loger" value="parents" id="parents">
        chez mes parents
		</label>

		<label for="inconnu" class="radio">
        <input type="radio" name="loger" value="inconnu" id="inconnu">
        c'est pas important pour le moment
		</label>
		</li></ul>
</div>
	
		<legend>Votre personnalité ...</legend>
<div class="checkbox">

		<ul><li>
		<label for="attentionne" class="checkbox">
        <input type="checkbox" name="perso" id="attentionne">
        attentionné
		</label>
      
		<label for="calme" class="checkbox">
        <input type="checkbox" name="perso" id="calme">
        calme
		</label>
      
		<label for="drole" class="checkbox">
        <input type="checkbox" name="perso" id="drole">
        drole
		</label>
      
		<label for="sensible" class="checkbox">
        <input type="checkbox" name="perso" id="sensible">
        sensible
		</label>
      
		<label for="spontane" class="checkbox">
        <input type="checkbox" name="perso" id="spontane">
        spontané(e)
		</label>
		</li></ul>
      
		<ul><li>
		<label for="possessif" class="checkbox">
        <input type="checkbox" name="perso" id="possessif">
        possessi(f)(ve)
		</label>
      
		<label for="genereux" class="checkbox">
        <input type="checkbox" name="perso" id="genereux">
        généreu(x)(se)
		</label>
      
		<label for="reserve" class="checkbox">
        <input type="checkbox" name="perso" id="reserve">
        reservé(e)
		</label>
      
		<label for="fier" class="checkbox">
        <input type="checkbox" name="perso" id="fier">
        fièr(e)
		</label>
      
		<label for="solitaire" class="checkbox">
        <input type="checkbox" name="perso" id="solitaire">
        solitaire
		</label>
		</li></ul>
	  
		<ul><li>
		<label for="aventureux" class="checkbox">
        <input type="checkbox" name="perso" id="aventureux">
        aventureux
		</label>
      
		<label for="conciliant" class="checkbox">
        <input type="checkbox" name="perso" id="conciliant">
        conciliant(e)
		</label>
      
		<label for="vif" class="checkbox">
        <input type="checkbox" name="perso" id="vif">
        vif
		</label>
      
		<label for="sociable" class="checkbox">
        <input type="checkbox" name="perso" id="sociable">
        sociable
		</label>
      
		<label for="insouciant" class="checkbox">
        <input type="checkbox" name="perso" id="insouciant">
        insouciant(e)
		</label>
		</li></ul>
</div>
	
		<legend>Vos loisirs ...</legend>
<div class="checkbox">
         
		<ul><li>
		<label for="internet" class="checkbox">
        <input type="checkbox" name="loisirs" id="internet">
        web
        </label>
      
		<label for="musique" class="checkbox">
        <input type="checkbox" name="loisirs" id="musique">
        musique
		</label>
      
		<label for="cinema" class="checkbox">
        <input type="checkbox" name="loisirs" id="cinema">
        cinéma
		</label>
      
		<label for="lecture" class="checkbox">
        <input type="checkbox" name="loisirs" id="lecture">
        lecture
		</label>
      
		<label for="brico" class="checkbox">
        <input type="checkbox" name="loisirs" id="brico">
        bricolage
		</label>
      
		<label for="shop" class="checkbox">
        <input type="checkbox" name="loisirs" id="shop">
        shopping
		</label>
		</li></ul>
	  
		<ul><li>
		<label for="nature" class="checkbox">
        <input type="checkbox" name="loisirs" id="nature">
        nature
		</label>
      
		<label for="sport" class="checkbox">
        <input type="checkbox" name="loisirs" id="sport">
        sport
		</label>

		<label for="voyage" class="checkbox">
        <input type="checkbox" name="loisirs" id="voyage">
        voyage
		</label>
      
		<label for="animaux" class="checkbox">
        <input type="checkbox" name="loisirs" id="animaux">
        animaux
		</label>
      
		<label for="auto" class="checkbox">
        <input type="checkbox" name="loisirs" id="auto">
        voitures/motos
		</label>
      
		<label for="danse" class="checkbox">
        <input type="checkbox" name="loisirs" id="danse">
        danse
		</label>
		</li></ul>
	  
		<ul><li>
		<label for="assoc" class="checkbox">
        <input type="checkbox" name="loisirs" id="assoc">
        associations
		</label>
      
		<label for="deco" class="checkbox">
        <input type="checkbox" name="loisirs" id="deco">
        art et déco
		</label>
      
		<label for="ecrire" class="checkbox">
        <input type="checkbox" name="loisirs" id="ecrire">
        écriture
		</label>
      
		<label for="politique" class="checkbox">
        <input type="checkbox" name="loisirs" id="politique">
        politique
		</label>
      
		<label for="théatre" class="checkbox">
        <input type="checkbox" name="loisirs" id="théatre">
        théatre
		</label>
      
		<label for="collect" class="checkbox">
        <input type="checkbox" name="loisirs" id="collect">
        collection
		</label>
		</li></ul>
	  
		<ul><li>
		<label for="religion" class="checkbox">
        <input type="checkbox" name="loisirs" id="religion">
        religion
		</label>
      
		<label for="jeux" class="checkbox">
        <input type="checkbox" name="loisirs" id="jeux">
        games
		</label>
      
		<label for="photos" class="checkbox">
        <input type="checkbox" name="loisirs" id="photos">
        photos
		</label>
      
		<label for="cuisine" class="checkbox">
        <input type="checkbox" name="loisirs" id="cuisine">
        cuisine
		</label>
      
		<label for="ballade" class="checkbox">
        <input type="checkbox" name="loisirs" id="ballade">
        ballade
		</label>
      
		<label for="dessin" class="checkbox">
        <input type="checkbox" name="loisirs" id="dessin">
        dessin
		</label>
		</li></ul>
</div>
	
</div>	<!--FERMETURE COL-->
</div>	<!--FERMETURE ROW-->
</div>	<!--FERMETURE ITEM-->




      
		<!--SECONDE PARTIE DU CAROUSEL-->
<div class="item"> 
<aside class="row">
<div class="col-lg-offset-2 col-lg-8 soustitre">Conseil N° 2 :<br/>
     Pour maximiser vos chances de rencontre, un profil complet avec photos est recommandé !!!<br/>
     escription et c'est rencontres assuré !!!
</div>
</aside>


<div class="row">
<div class="col-lg-offset-2 col-lg-8 formulaire">

	    <!--PREMIERE LIGNE PARTIE VOUS-->
		<legend>Vous êtes ...</legend>
<div class="radio">

		<ul><li>
		<label for="celib" class="radio">
        <input type="radio" name="vous" value="celib" id="celib">
        célibataire
		</label>
      
		<label for="couple" class="radio">
        <input type="radio" name="vous" value="couple" id="couple">
        en couple
		</label>
      
		<label for="moi" class="radio">
        <input type="radio" name="vous" value="moi" id="moi">
        je le garde pour moi
		</label>
		</li></ul>
</div>	<!--FERMETURE CLASS RADIO-->

</div>	<!--FERMETURE COL....-->
</div>	<!--FERMETURE ROW-->
</div>	<!--FERMETURE ITEM-->



et le css:

/*SOUS TITRE*/
.soustitre
{
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
  font-size: 1.5em;
  font-family: Yanone Kaffeesatz;
  color: white;
  border-radius: 5px;
  background-color: rgba(32, 32, 32, 0.5);
}

section
{
  background: url(images/couple.jpeg);

}

/*PARTIE FORMULAIRE PREMIERE PAGE DU CAROUSEL*/

.formulaire legend
{
  color: white;
}

.formulaire label
{
  color: white;
  font-family: Quicksand;
}

.formulaire
{
  border-radius: 5px;
  background-color: rgba(32, 32, 32, 0.6);

}

 
li
{
	list-style-type: none
}

ul
{
	display: inline-block;
}


désoler pour la longueur!!!!!lol
quelqu'un peut t-il m'éclairer, je galère a mort la, je sais plus quoi essayer!!!!! Smiley decu