Sujet Précédent Sujet Suivant

Gerer les floats

Fermé
fuks952 Messages postés 1 Date d'inscription samedi 30 novembre 2013 Statut Membre Dernière intervention 30 novembre 2013 - 30 nov. 2013 à 00:55
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 - 30 nov. 2013 à 14:15
Salut a vous =),

J'ai un problème avec mon code html et css. Je veux faire apparaitre sur ma section entière mon background-color. Mais ca ne marche pas.

J'ai fait une balise form qui comprend ma structure de la page pratiquement. dans mon form il y a une partie <div id="connexionTxt"> ...</div>

ou je mets en css un float right. lorsque je charge ma page il met bien cette balise a droite. Cependant ma section n'a plus le background.

Seul la partie haute : <!--zone de saisie pour s'inscrire-->
<form method="post" action="">

<h2> Connexion </h2>
<p> nom d'utilisateur<br/> ... <p>Vous ne pouvez pas acceder à votre compte ?</p>

contient le background.

Je vous envoie mon code html :

<!Doctype Html>

<html>

<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
<title></title>
<meta charset="UTF-8"/>
</head>


<body>
<header>

<img class="logo2" src="img/logo2.jpg" alt="logo"/>

<div class="blocBleu">
<nav>
<ul>
<li class="affaireS"> Affaire Snowden </li>
<li class="galerie"> Galerie </li>
<li class="contact"> Contact </li>
<li class="twitter"> <img class="twitter" src="img/twitt.png" alt="icone"/> </li>
<li class="facebook"> <img class="facebook" src="img/facebook.png" alt="icone"/> </li>
<li class="gplus"> <img class="gplus" src="img/gplus.png" alt="icone"/> </li>

<li class="connexion">Connexion</li>
</ul>

</nav>
</div>






</header>


<section>
<article>

<!--zone de saisie pour s'inscrire-->
<form method="post" action="">

<h2> Connexion </h2>
<p> nom d'utilisateur<br/>
<input id="_pseudo" type="text" size="30"/>
<br/>Mot de passe <br/>
<input id="_pseudo2" type="password" /> </br>


<!-- bouton connxion-->
<input onclick="connexion2();" type=submit value="connexion" />

<!-- case a cocher-->
<input type="checkbox" name="Rester connecté" id="rester connecté" />
<label for="fester connecté">Rester </label><br />

</p>

<p>Vous ne pouvez pas acceder à votre compte ?</p>


<div id="connexionTxt">


<h4>Connectez vous en un seul click avec facebook </h4>

<ul>
<li>Pas de mots de passe supplémentaire à<br/> retenir </li>
<br/>
<br/>
<li>Rien n'est publié sur votre mur sans votre<br/>accord </li>

</ul>


<img class="facebook" src="img/facebook.png" alt="icone"/> <input type=submit value="Se connecter avec facebook" />


</div>

</form>

</article>

</section>



<footer>
<img class="logo2" src="img/logo2.jpg" alt="logo"/> <p class="textFooter">Mon site de Nouvelles.com ,2012-2013,tous droits réservés</p>
</footer>


<!-- connexion java script-->
<script >
function connexion2(){

var _pseudo = document.getElementById("_pseudo").value;
var _pseudo2 = document.getElementById("_pseudo2").value;

if( _pseudo == "docnum" && _pseudo2 == "fuki" ){
alert("Code accepte");

}else
{
alert("Code erronne");
}
}

</script>
</body>


</html>


Code css :

body
{
margin : auto;
width : 920px;
color : white;
}

/*Menu de navigation principal*/
.blocBleu
{
margin-top : 10px;
background-color : rgb(53,67,80);
}



nav
{
padding : 2px;
}

/*navigation en horizontale*/
.connexion,.facebook,.twitter,.gplus,.affaireS,.galerie,.contact
{
background-color : rgb(53,67,80);
margin-right : 20px;
margin-left : 20px;
display : inline-block;
}

/*gestion block icones*/
.blocIcone
{

text-align : center;
}

/*gestion icones menu navigation*/
.facebook,.twitter,.gplus
{
width : 20px;
height : 20px;
margin-left : 5px;
margin-right : 5px;
}

#connexionTxt
{
float : right;
background-color : rgb(39,49,58);
}


article
{
clear : both;
float : none;
background-color : rgb(39,49,58);
}


footer
{
background-color : rgb(53,67,80);
clear : both; /* l'élément va être décalé vers le bas jusqu'à passer sous n'importe quel élément flottant provoquant un décalage.*/
}
.textFooter
{

text-align : center;

}

Je vous en remercie d'avance !
A voir également:

1 réponse

Réponse 1 / 1
theshadoo Messages postés 786 Date d'inscription samedi 26 mai 2007 Statut Membre Dernière intervention 3 mai 2016 123
30 nov. 2013 à 14:15
désolé mais je n'aime pas lire une page de code non indenté et non coloré, tu as des sites qui te permettent de projeter ton code en l'indentant correctement, généralement je met mes bouts de codes là dessus, car à force, t'en a un peu marre de décrypter les codes sur des supports qui ne le permettent pas hélas.

Met un overflow hidden sur la balise parente des block en float, donc à priori la balise <section> tu lui ajoutes la propriété css overflow:hidden.

Tu retrouveras ton background car il perd la hauteur de la balise parente lorsqu'un élément est en float.

Tu peux le voir avec firebug lorsque tu cibles les balises spécifique ou bien avec le firefox debugger incorporé dans le navigateur par défaut.
Raccourci Maj + F7 onglet "inspecteur" ou bien le raccourcis Ctrl + Maj + i pour l'inspecteur directement.
0

Discussions similaires

Relancer question
ButteDuLac -
Chris 94 -

7 réponses
Alexia
Alexia -
bg62 -

3 réponses
Germain
germai -
Dexterccm -

1 réponse