28172 sujets

CSS et mise en forme, CSS3

bonjour,
j'ai un problème avec le positionnement et dimensions de div.
actuellement j'ai ça :
http://images3.hiboox.com/images/1308/7p64syhj.jpg
obtenu avec le code
html :
<div class="conteneur">
    <div class="bloc1">bla bla bla</div>
    <!--<div class="bloc2">bli bli bli</div>-->
    <div class="bloc3">blu blu blu</div>
</div>


css :
.conteneur {                               
    width: 340px;                          
    height: 100%;                          
    background-color: orange;              
}                                          

.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
je voudrais supprimer le div vert pour que le bleu prenne toute la place jusqu'à la fin de l'ancien vert comme ceci :
http://images3.hiboox.com/images/1308/sbbw8vi9.jpg
j'ai donc essayé le code suivant :
html :
<div class="conteneur">
    <div class="bloc1">bla bla bla</div>
    <!--<div class="bloc2">bli bli bli</div>-->
    <div class="bloc3">blu blu blu</div>
</div>

css : 
.conteneur {                                   
    width: 340px;                              
    height: 100%;                              
    background-color: orange;                  
}                                              

.bloc1 {
background-color: blue;
height: 50px;
width: 100%;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
le souci c'est que ça marche pas terrible :
http://images3.hiboox.com/images/1308/nvezy439.jpg
comment je peux dire au div bleu de prendre la place disponible selon celle prise à droite ?

merci
mik a écrit :

j'ai donc essayé le code suivant :
html :
<div class="conteneur">
    <div class="bloc1">bla bla bla</div>
    <!--<div class="bloc2">bli bli bli</div>-->
    <div class="bloc3">blu blu blu</div>
</div>

css : 
.conteneur {                                   
    width: 340px;                              
    height: 100%;                              
    background-color: orange;                  
}                                              

.bloc1 {
background-color: blue;
height: 50px;
[#darkred]width: 100%;[/#]
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}

Pourquoi donner une largeur de 100% à ton bloc 1 ? Il suffirait de lui attribuer la largeur appropriée: 220px.
mik a écrit :
tout simplement parce que le bloc 2 peut être présent ou non Smiley cligne

Si tu ne veux pas à avoir à modifier tes styles en fonction de la présence de ce deuxième bloc, il va falloir recourir à une autre méthode de positionnement.

[#black][b]HTML[/b][/#]

<div id="conteneur">
<div id="bloc1">Lorem ipsum dolor…</div>
<div id="bloc2">Lorem ipsum dolor…</div>
<div id="bloc3">Lorem ipsum dolor…</div>
</div>

[#black][b]CSS[/b][/#]

#conteneur {display:table; width:380px; border-spacing:20px}
div div {display:table-cell}
#bloc3 {width:100px}

Internet Explorer ne supporte pas ce mode d'affichage, il faudra recourir à un tableau de mise en forme si son support est nécessaire.
bon en fait j'ai créé un deuxième style avec la bonne taille en px et je gère le changement de style via php Smiley smile
Sinon avec un seul code CSS il y avait la possibilité d'utiliser un contexte de formatage.

/* Les blocs sont ici dans l'ordre
   qu'ils doivent prendre dans le code HTML */

div#droite {
	float: right;
	width: 30%;
	margin-left: 10px;
}
div#middle { /* Ce bloc peut être présent ou pas dans la page */
	float: right;
	width: 20%;
	margin-left: 10px;
}
div#left {
	overflow: hidden; /* Contexte de formatage */
	zoom: 1; /* émuler contexte de formatage dans IE6 */
}
(La propriété zoom, non standard, sera de préférence adressée à IE6 seulement -- ou IE6 et inférieurs -- via un commentaire conditionnel ad hoc.)

Voilà. div#left s'adapter à la largeur laissée par les flottants dans leur conteneur respectif. On peut avoir div#middle ou pas dans une page, et div#left s'adaptera.