[Resolu] Bug avec éléments flottants sur mise en page

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Resolu] Bug avec éléments flottants sur mise en page

toum_toum

Vivons masqués

Salut à vous.

J'ai un bug pour une mise en page de zones de textes, qui contient de nombreux éléments flottants.

J'ai fait une page allégée, et ça passe. Voici le résultat voulu :

Or, dans ma "page complexe", cela rend différemment :

J'ai un bug qui apparaît sous la première ligne de titres. Un décalage immense vers le bas :

En dessous de ce "décalage", curieusement, aucun soucis :

Ma question : je pense que ma méthode n'est pas bonne concernant mes données float right / float left / classe "clearfloat"

Voici la manière dont je m'y suis pris. (Je mets la version allégée, espérant qu'au niveau de la méthode c'est déjà déficient)

#bloc03a : titre colonne de gauche
#bloc03b : titre colonne de droite
#bloc04a : texte colonne de gauche
#bloc04b : texte colonne de droite
.clearfloat : classe qui permet d'annuler le flottement du précédent élément

CSS :

Code :

@charset "utf-8";
body {
font: 15px Arial, Helvetica, sans-serif;
background-image:url(../images/fond_01.gif);
background-repeat:repeat;
margin: 0;
padding: 0;
text-align: center;
color: #333333;
}
#conteneur {
position:relative;
background-color:#BEA4C1;
width: 650px;
margin: 0px auto 0px auto;
top: 20px;
text-align: left;
padding: 20px 35px 20px 35px;
}
#bloc03a {
float:left;
width: 270px;
color:#000;
background-color: #954394;
font-size:1.40em;
padding: 5px 10px 5px 10px;
}
#bloc03b {
float:right;
width: 270px;
color:#000;
background-color: #954394;
font-size:1.40em;
padding: 5px 10px 5px 10px;
}
#bloc04a {
float:left;
width: 270px;
background-color: #FFF;
font-size:0.90em;
padding: 10px;
}
#bloc04b {
float:right;
width: 270px;
background-color: #FFF;
font-size:0.90em;
padding: 10px;
}
.clearfloat { /* élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.centrage {
text-align: center;
}

HTML :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="./styles/stylebug_04.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<br />
<div id="bloc03a" class="centrage">Titre1</div>
<div id="bloc03b" class="centrage">Titre2</div><br class="clearfloat" />
<div id="bloc04a">Saisie simple ou avec mise en page, relecture et correction de tous vos documents professionnels : courriers, rapports, comptes-rendus de réunions, contrats, notes diverses… <br />
Réalisation de tableaux, graphiques…</div>
<div id="bloc04b">Saisie devis, bon de commande, facture… <br />
Relance clients/fournisseurs.<br />
Recouvrement de créances. <br />
Création et mise à jour de base de données.</div><br class="clearfloat" /><br />
<div id="bloc03a" class="centrage">Titre3</div>
<div id="bloc03b" class="centrage">Titre4</div><br class="clearfloat" />
<div id="bloc04a">Saisie d’écriture comptable, tenue d’échéancier clients/fournisseurs.<br />
(* avec l’aval et sous la responsabilité de votre comptable)</div>
<div id="bloc04b">Retranscription de fichier audio, permanence téléphonique, prise de rdv, tenue d’agenda, envoi/réception de mails, présentation de diaporama, organisation de réunions, déplacements, séminaires… <br />
Création graphique (cartes de visite, d’invitation, flyers, logos…)</div><br class="clearfloat" /><br />
<div id="bloc03a" class="centrage">Titre5</div><br class="clearfloat" />
<div id="bloc04a">Organisation de vacances. <br />
Initiation à l’informatique, à Internet. <br />
Utiliser sa messagerie électronique, un traitement de texte,...</div>
<br class="clearfloat" /><br /><br />
</div>
</body>
</html>

Merci de votre éclairage.

Message édité par toum_toum le 27-07-2010 à 12:38:59

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Publicité

Dj YeLL

$question = $to_be || !$to_be;

Pourquoi tu ne fais pas:

Code :

<div>
<h3>Titre</h3>
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>

Avec ces DIV en float left ?

Message édité par Dj YeLL le 22-07-2010 à 14:30:29

---------------
Gamertag: CoteBlack YeLL

toum_toum

Vivons masqués

Ja préféré créer mes "blocs" car j'ai déjà pas mal de titres à coté, en plus (ou je vais en avoir... )

De toutes façons ça ne me sert à rien d'avoir juste les titres à gauche ou à droite. Il me faut aussi les textes qui viennent dessous (et avec des fonds/espaces colorés)

D'où mes créations de "blocs" (même si le terme de bloc n'est pas bien adapté en effet)

Message édité par toum_toum le 22-07-2010 à 14:35:59

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Dj YeLL

$question = $to_be || !$to_be;

Euh ... dans ce que je te propose, les blocs, ce sont les DIV ... qui regroupent donc Titre + Contenu

Message cité 1 fois

---------------
Gamertag: CoteBlack YeLL

David Boring

Non franchement, tu ne peux garder un tel html.
Ton site sans style ne ressemble à RIEN.
Suis le conseil de Dj YeLL

toum_toum

Vivons masqués

Dj YeLL a écrit :

Euh ... dans ce que je te propose, les blocs, ce sont les DIV ... qui regroupent donc Titre + Contenu

Ok je regarde ça alors.

Comment je fais pour avoir un fond coloré, différent, pour les titres et pour les textes ?

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

Dj YeLL

$question = $to_be || !$to_be;

toum_toum a écrit :

Ok je regarde ça alors.

Comment je fais pour avoir un fond coloré, différent, pour les titres et pour les textes ?

S't'une blague ? [:wam]

---------------
Gamertag: CoteBlack YeLL

toum_toum

Vivons masqués

Héhé désolé [:aurelie22]

Bon en tous cas merci.
En effet c'est 100 fois plus simple avec cette méthode. Me suis empêtré avec mes blocs, alors que...

:jap:

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

toum_toum

Vivons masqués

Vous me conseilleriez quoi pour que mes paddings , sur mes nouvelles DIV, et destinées à recentrer un peu mes textes-contenus, n'affectent pas les titres <h> (ou autres) qui sont insérés dedans ces DIV (et au dessus de ces textes-contenus) ?

Edit : bon je me suis debrouillé en créant une nouvelle DIV (avec des propriétés de padding), que je déclare dans mon CSS après celle du titre.
Ca alourdit un peu mais pour le moment je ne vois pas d'autre solution...

Message édité par toum_toum le 23-07-2010 à 00:04:29

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

David Boring

Code :

<div>
<h3>Titre</h3>
<div class="bd">
<p>Bla bla bla</p>
<xx>Bla bla bla</xx>
</div>
</div>

Code :

.bd {padding:10px}

Si tu veux regarder des beaux modules, jette un coup d'oeil sur oocss
http://oocss.org/module.html

Publicité

toum_toum

Vivons masqués

Merci pour le lien, en effet ça m'intéresse...

PS : une question. Il est préférable (de manière générale) de créer une classe, plutôt qu'une nouvelle id (dans la page CSS) ?

Message édité par toum_toum le 23-07-2010 à 00:19:04

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

gatsu35

Blablaté par Harko

Ton décalage est à cause de la nav de gauche, tu ne montre qu'un bout du bordel donc on pourra pas t'aider la dessus. Mais je suis sur à 100% que ton conteneur, commence tout à gauche de ta page, au lieu d'être calé normalement à partir de la droite de la nav qui est en float:left.
C'est un comportement normal des flottant. Pour résoudre ce petit soucis, tu appliques un contexte de formatage sur ton conteneur et ton problème sera réglé.
.conteneur {overflow:hidden; zoom:1}

---------------
Blablaté par Harko

toum_toum

Vivons masqués

Non le problème (toujours en cours) n'est pas celui-là :

En fait j'ai environ 600 pixels de large dans mon contenant.
Dans celui-ci je mets des séries de 2 blocs flottants (à gauche), faisant chacun 270 pixels de large.

Donc il se mettent 2 à 2 cote à cote. Pour ça pas de soucis.

Mais le probleme intervient dès lors que le 2nd du "couple" est plus court (= moins de texte) que le premier.
Dès lors le bloc suivant vient se coller en dessous (au lieu d'aller à la ligne).

Pour contrer ça j'avais créé (récupéré qq part il y a qq semaines) la Div "clearfloat"

Code :

.clearfloat { /* élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Mais je pense qu'elle buggue ...
-------------------------------------------------------------------

J'ai 6 blocs : 1, 2 , 3, 4 , 5 et 6

Ils semettent comme ça :

1 2

3 4

5 6

Mais si 1 est plus "long" que 2 (du fait de plus de texte à l'intérieur), ça devient :

1 2

3

4 5

6

D'où la ligne "clearfloat", mais qui ne fonctionne pas bien.

Message édité par toum_toum le 23-07-2010 à 16:29:27

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

David Boring

Regardes le code de oocss.
Tes lignes peuvent être

Code :

<div class="line"> 1 2 </div>
<div class="line"> 3 4 </div>
<div class="line"> 5 6 </div>

Code :

.line {overflow:hidden;zoom:1}

C'est du web pas du print. Le texte ne coule pas en dessous. OK, tu aura du blanc, mais ce n'est pas grave.
Franchement c'est même plus lisible.

toum_toum

Vivons masqués

Salut.

Un peu en retard, desolé. Merci, c'est impecc'.

J'avais mal compris la propriété overflow, utilisée dans ce cas.

Un lien intéressant sur le sujet :
http://css4design.developpez.com/t [...] -partie-2/

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

FORUM HardWare.fr

Programmation

HTML/CSS

[Resolu] Bug avec éléments flottants sur mise en page

Sujets relatifs
[Resolu] Problème formulaire envoi mail	[Résolu][Batch] Comparaison chaines de caractères
URL Rewriting - Besoin de conseil pour mise en place	Bug d'affichage incompréhensible : Espace vide sans raison ?
Comment intégrer mon calendrier Week Calendar dans une page ?	[RESOLU] [Plugin] Ajouter patch à un plugin
Effet de page qui tourne dans un environnement 3D	utilisation de script js plusieurs fois dans une même page
[Oracle]Mise à jour de clé étrangère aléatoire	[Resolu]Site mal aligné
Plus de sujets relatifs à : [Resolu] Bug avec éléments flottants sur mise en page

Page générée en 0.092 secondes