28220 sujets

CSS et mise en forme, CSS3

Div qui coule plus que ne float :)

Bonsoir

J'ai juste un petit soucis de div qui chasse vers le bas. Tout de suite les images :
upload/3961-avant.png
Et j'aimerais ça :
upload/3961-apres.jpg

Le code :
<style>
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

.chiffres {
	width: 100px;
	float: left;
	margin-right: 15px;
	margin-bottom: 10px;
}
.un {
	width: 80px;
	background-color: #CCCCCC;
	font-size: 30px;
	text-align: center;
}

.deux {
	width: 80px;
	background-color: #666666;
	font-size: 30px;
	text-align: center;
}

.conteneur {
	padding-left: 30px;
	padding-right: 30px;
}

.contenu {
	border: medium solid #000000;
	bottom: 10px;
	width: 100%;
	margin-bottom: 10px;
	float: left;
}

.bloc1 {
	background-color: green;
	padding-left: 20px;
}
.bloc2 {
	background-color: red;
	padding-left: 20px;
}
</style>
<div class="conteneur">
<div class="chiffres"><div class="un">1</div><div class="deux">2</div></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
</div>

Il ne doit pas manquer grand chose Smiley confused

Merci de votre aide.
salut et comme ce
<div class="conteneur">



<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>

<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>

<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="chiffres"><div class="un">1</div><div class="deux">2</div></div>
</div>
Comme dirait Raphael, tu dois avoir la maladie de la classite avec une petite pointe de divite Smiley smile

Essaie donc de code, sous FF il marche nickel
<style>
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

#conteneur {
	padding-left: 30px;
	padding-right: 30px;
}

#bloc_chiffres {
	float:left;
	margin-left: 15px;
	width: 100px;
	text-align: center;
}
.chiffre {
	border: 1px solid black;
	background-color: #CCCCCC;
	font-size: 30px;
	text-align: center;
}

.contenu {
	overflow: auto;
	margin: 15px 15px;
}

.bloc1 {
	background-color: green;
}
.bloc2 {
	background-color: red;
}
</style>

<div id="conteneur">
<div id="bloc_chiffres"><p class="chiffre">1</p><p class="chiffre">2</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
</div>

Modifié par Merlin (13 Nov 2005 - 22:53)
@Marvin : aucun besoin en particulier, cette feuillle sera incluse dans le conteneur d'un gabarit css trouvé sur Alsacréation.
Il faudrait juste qu'elle ressemble à mon image souhaitée et respecter le fait que des balises blocs (comme le paragraphe) soient dans un même contenant (ça pourrait pas être un span ?). En fait tout simplement pour faire un border autour des deux paragraphes (voir l'image).

Smiley list
[*]Du coup je me dis que la div de contener dans mon exemple fait redondant. Non ? Quoique je n'ai pas toujours besoin de margins arbitraires dans tous les cas pour mon #contener.
[*]Si le bloc_chiffres codé par Merlin n'est pas unique, on ne peut donc pas donner d'ID unique dans cette feuille ?
[/list]

Merci de vos éclairements.

(//edit : rien à voir mais sur le forum ça ne marche pas les classiques BBcodes list ?)
Modifié par globy (14 Nov 2005 - 08:03)
Bon alors a priori, tes paragraphes ne devraient pas être flottants. En revanche, tu vas avoir un problème concernant les bordures : si tu ne mets pas de marge gauche à tes paragraphes, la bordure passera derrière les float. Si tu en mets une, c'est tous tes paragraphes qui seront décalés (et forméeront donc une colonne).
J'ai pas trop compris. Mes <p class"bloc1"> et <p class"bloc2"> ne sont pas flottant mais sont inclus par deux dans une div. La bordure c'est la div qui l'a.
Modifié par globy (14 Nov 2005 - 10:59)
J'ai mis les screenshots et le code, il manque quelque chose ? Smiley murf

J'ai pas mal tâtonné depuis... ça n'y fait rien.
Merci partiel à Poch qui m'a suggéré un truc.

J'ai ça à présent :
upload/3961-suivant.jpg

Le code :
<style>
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 11px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.chiffres {
width: 100px;
float: left;
margin-right: 15px;
margin-bottom: 10px;
}
.un {
width: 80px;
background-color: #CCCCCC;
font-size: 30px;
text-align: center;
}
.deux {
width: 80px;
background-color: #666666;
font-size: 30px;
text-align: center;
}
.conteneur {
width: 450px;
}
.contenu {
border: medium solid #000000;
bottom: 10px;
margin-bottom: 10px;
float: left;
width: 335px;
}
.bloc1 {
background-color: green;
padding-left: 20px;
}
.bloc2 {
background-color: red;
padding-left: 20px;
}
</style>
<div class="conteneur">
<div class="chiffres"><div class="un">1</div><div class="deux">2</div></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
<div class="contenu"><p class="bloc1">vert</p><p class="bloc2">rouge</p></div>
</div>


Marche sur FF et IE. Resterait plus à dire aux divs "contenu" de flotter jusqu'aux bords de la div parente (conteneur).

/me prendrait bien une petite dosette d'aide Smiley confused
Vizirette acceptée.
Modifié par globy (15 Nov 2005 - 18:05)
C'est une solution TRES BOF mais tu peux créer deux classes différentes, une pour les 2éléments du haut avec une valeur fixe en px ou en %, et une pour les autres avec une valeur de 100%

C'est pas très folichon, mais si tu es bloqué là dessus pour avancer le reste du site web ça te permet d'avoir une solution temporaire en attendant de pouvoir y revenir.

Je sais que j'utilise souvent ce genre de méthodes lorsque je n'arrive pas à régler un problème en peu de temps, ça me permet de passer à autre chose, d'apprendre de prendre un peu de reucul, et j'y reviens par la suite, lorsque j'ai plus de temps à y consacrer
Tu as raison. C'est gavant ces histoires de css : no way et en plus je viens de tomber sur un cas très bizarre ou ça passe très bien sur IE et pas sur FF Smiley eek (lié à ma recherche d'une solution pour mon problème)
Je lance un nouveau topic pour qu'on m'explique ça parce que là, je sèche.

Il y a des jours avec, il y a des jours sans css Smiley biggol
Sujet clos
Aller à