pb cellule de tableau décallées à gauche !!!

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
bibys63

pb cellule de tableau décallées à gauche !!!

Message par bibys63 »

Bonjour à tous,

J'ai un problème que je n'arrive pas à résoudre !!!
Dans un fielset (float:left; dans la css) qui contient un tableau, toutes les cellules sont décalées vers la gauche. Si j'enlève le float left, tout est nickel !!!

Dans la même config, si j'utilise "outline table cell" avec web developer 0.8, les cellules sont encore une fois nickel.

Merci par avance pour votre aide.
jv2759
Tyrannosaurus Rex
Messages : 4161
Inscription : 12 févr. 2004, 14:29

Message par jv2759 »

c'est pas plutot un sujet pour la partie developpement web???

Sinon donne nous un exemple un lien sur le site par exemple, car là c'est ultra flou...

En plus ce qui me semble bizard c'est ta balise fielset, car elle n'as pas vraiment l'aire d'être tres répendut,

http://www.google.fr/search?hl=fr&ie=UT ... %3Dlang_fr
Inscrit sur la liste des abonner absent...
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
jv2759
Tyrannosaurus Rex
Messages : 4161
Inscription : 12 févr. 2004, 14:29

Message par jv2759 »

C'est pire encore, cela veux dire qu'il y as des personne qui ont fait des site avec cette erreure...
Inscrit sur la liste des abonner absent...
bibys
Arias
Messages : 2
Inscription : 21 sept. 2004, 17:55

exemple de code

Message par bibys »

merci pour ces premières réponses !!!
Voici un petit exemple qui ne fonctionne pas !!!

<fieldset>
<legend>Agents</legend>
<dl>
<dt><label for="agt_Nom">Nom&nbsp;:</label></dt>
<dd>test</dd></dl>
</fieldset>
<fieldset>
<legend>Historique</legend>
<table border="1" rules="all">
<caption>Grades et qualifications</caption>
<thead>
<tr>
<th>Grade</th><th>Qualification</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD</td>
<td>ETAM</td>
<td>2004-01-01</td>
</tr>
</tbody>
</table><br/><table border="1" rules="all">
<caption>Départements</caption>
<thead>
<tr>
<th>Département</th><th>Date</th></tr>
</thead>
<tbody>
<tr>
<td>STRUCTURE</td>
<td>2004-01-01</td>
</tr>
</tbody>
</table><br/><table border="1" rules="all">
<caption>Agences</caption>
<thead>
<tr>
<th>Agence</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>AGENCE</td>
<td>2004-06-20</td>
</tr>
</tbody>
</table></fieldset>

merci à ceux qui pourront m'aider !!!
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

On peut voir ça grandeur nature sur une vraie page web ? Du code comme ça c'est assez indigeste et, pour ma part, tous ces tableaux ne me parlent pas trop :?
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

jv2759 a écrit :C'est pire encore, cela veux dire qu'il y as des personne qui ont fait des site avec cette erreure...
Je connais bien un site qui utilisait des balises <image> :lol:
« La vie d’un geek est un combat perpétuel contre l’imperfection »
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Tant qu'on est dans le HS, j'ai vu une fois un <style="color:red"> qui là posait réellement problème puisqu'il faisait disparaître tout le contenu suivant cette étrange balise :?
bibys
Arias
Messages : 2
Inscription : 21 sept. 2004, 17:55

l'application est en cours de dev...

Message par bibys »

Désolé, mais je ne peux pas vous fournir de page visible car l'appli est en cours de dev. Le pb, c'est que j'ai conseillé firefox à mon client (qui travaillait avec ie). Je suis donc un peu coincé !!!
je vous mets à disposition le source de la page complète et la css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Laumonet - Personnel - Récapitulatif agent</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico "/>
<link rel="stylesheet" title="Défaut" type="text/css" href="/css/screen.css" media="screen" />
<link rel="stylesheet" title="Défaut" type="text/css" href="/css/print.css" media="print" />
<script type="text/javascript" src="/js/fonctions.js"></script>
</head>
<body onload="Chargement();">
<h1 onmouseover="CacherMenus();">Laumonet - Personnel - Récapitulatif agent</h1>

<form action="/agents/index.php?view=admin" method="post" enctype="application/x-www-form-urlencoded" accept-charset="iso-8859-1" onsubmit="return FormSubmit();">
<fieldset onmouseover="CacherMenus();">
<legend>Agents</legend>
<dl>
<dt><label for="agt_Nom">Nom&nbsp;:</label></dt>
<dd>test cbi </dd></dl>
</fieldset>
<fieldset onmouseover="CacherMenus();">
<legend>Historique</legend>
<table border="1" rules="all">
<caption>Grades et qualifications</caption>

<thead>
<tr>
<th>Grade</th><th>Qualification</th><th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD</td>
<td>ETAM</td>
<td>2004-01-01</td>
</tr>

</tbody>
</table><br/><table border="1" rules="all">
<caption>Départements</caption>
<thead>
<tr>
<th>Département</th><th>Date</th></tr>
</thead>
<tbody>
<tr>
<td>STRUCTURE</td>
<td>2004-01-01</td>
</tr>

</tbody>
</table><br/><table border="1" rules="all">
<caption>Agences</caption>
<thead>
<tr>
<th>Agence</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>AGENCE BRIVE</td>
<td>2004-06-20</td>

</tr>
</tbody>
</table></fieldset>
<fieldset onmouseover="CacherMenus();">
<legend>Actions</legend>
<button type="submit" name="ret">Retour</button>
</fieldset>
</form>
<p id="menu1" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu1');">Données de base<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu1" class="ssmenu">
<li><a href="/agences/">Agences</a><span>&nbsp;;</span></li>

<li><a href="/assurances/">Assurances</a><span>&nbsp;;</span></li>
<li><a href="/banques/">Banques</a><span>&nbsp;;</span></li>
<li><a href="/grades/">Catégories</a><span>&nbsp;;</span></li>
<li><a href="/departements/">Départements</a><span>&nbsp;;</span></li>
<li><a href="/categories/">Fonctions</a><span>&nbsp;;</span></li>
<li><a href="/heures_hors_production/">Heures hors production</a><span>&nbsp;;</span></li>

<li><a href="/clients/">Maîtres d'ouvrage payeurs</a><span>&nbsp;;</span></li>
<li><a href="/mandataires/">Mandataires</a><span>&nbsp;;</span></li>
<li><a href="/missions/">Missions</a><span>&nbsp;;</span></li>
<li><a href="/agents/">Personnel</a><span>&nbsp;;</span></li>
<li><a href="/phases/">Phases</a><span>&nbsp;;</span></li>
<li><a href="/qualifications/">Qualifications</a><span>&nbsp;;</span></li>

<li><a href="/repartitions_type/">Répartitions type</a><span>&nbsp;;</span></li>
<li><a href="/societes/">Sociétés</a><span>&nbsp;;</span></li>
<li><a href="/sous-traitants/">Sous-traitants</a><span>&nbsp;;</span></li>
<li><a href="/taux_horaires/">Taux horaires</a><span>&nbsp;;</span></li>
<li><a href="/tranches/">Tranches</a><span>&nbsp;;</span></li>
<li><a href="/tva/">TVA</a><span>&nbsp;;</span></li>

</ol>
<p id="menu2" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu2');">Devis particuliers<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu2" class="ssmenu">
<li><a href="/devis/">Création</a><span>&nbsp;;</span></li>
</ol>
<p id="menu3" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu3');">Affaires<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu3" class="ssmenu">

<li><a href="/affaires/">Création</a><span>&nbsp;;</span></li>
<li><a href="/devis_heures/">Devis d'heures</a><span>&nbsp;;</span></li>
<li><a href="/fiches_comptable/">Fiche comptable</a><span>&nbsp;;</span></li>
<li><a href="/suivis/?view=heures">Suivi des heures par affaire</a><span>&nbsp;;</span></li>
<li><a href="/suivis/?view=temps">Suivi des temps par personne</a><span>&nbsp;;</span></li>
<li><a href="/repartitions_assurances/">Répartitions assurances</a><span>&nbsp;;</span></li>

</ol>
<p id="menu4" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu4');">Heures<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu4" class="ssmenu">
<li><a href="/agents_heures/?view=personnel">Saisie d'heures</a><span>&nbsp;;</span></li>
<li><a href="/recapitulatifs_heures/?view=mensuel">Récapitulatif mensuel par personne</a><span>&nbsp;;</span></li>
<li><a href="/recapitulatifs_heures/?view=general">Récapitulatif général</a><span>&nbsp;;</span></li>
<li><a href="/recapitulatifs_heures/?view=annuel">Récapitulatif annuel des heures de production</a><span>&nbsp;;</span></li>

<li><a href="/agents_heures/?view=admin">Saisie d'heures (administrateur)</a><span>&nbsp;;</span></li>
</ol>
<p id="menu5" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu5');">Mouvements<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu5" class="ssmenu">
<li><a href="/journaux_production/?view=executes">Saisie des exécutés</a><span>&nbsp;;</span></li>
<li><a href="/factures/">Saisie des factures</a><span>&nbsp;;</span></li>
<li><a href="/journaux_production/?view=sousTraitance">Saisie de la sous-traitance</a><span>&nbsp;;</span></li>

</ol>
<p id="menu6" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu6');">Journaux<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu6" class="ssmenu">
<li><a href="/affaires/?view=recapProduction">Récapitulatif mensuel de production</a><span>&nbsp;;</span></li>
<li><a href="/affaires/?view=journalExecutes">Journal des exécutés</a><span>&nbsp;;</span></li>
<li><a href="">Journal de production</a><span>&nbsp;;</span></li>
<li><a href="/factures/?view=journalFactures">Journal des factures</a><span>&nbsp;;</span></li>

<li><a href="/factures/?view=journalReglements">Journal des réglements</a><span>&nbsp;;</span></li>
<li><a href="/factures/?view=journalEncaissements">Récapitulatif de TVA</a><span>&nbsp;;</span></li>
<li><a href="/factures/?view=encoursFacturation">Encours de facturation</a><span>&nbsp;;</span></li>
<li><a href="/factures/?view=encoursReglement">Encours de réglements</a><span>&nbsp;;</span></li>
<li><a href="/affaires/?view=encoursGeneraux">Encours généraux</a><span>&nbsp;;</span></li>
<li><a href="/tableau_bord/">Tableau de bord général</a><span>&nbsp;;</span></li>

</ol>
<p id="menu7" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu7');">Listings<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu7" class="ssmenu">
<li><a href="/listings/?view=affaire">Listing des affaires</a><span>&nbsp;;</span></li>
<li><a href="/listings/?view=commande">Listing des commandes</a><span>&nbsp;;</span></li>
<li><a href="/listings/?view=sousTraitant">Listing des affaires sous-traitées</a><span>&nbsp;;</span></li>
<li><a href="">Listing des assurances</a><span>&nbsp;;</span></li>

</ol>
<p id="menu8" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu8');">Prévisionnel<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu8" class="ssmenu">
<li><a href="/previsionnels/?view=objectifs">Saisie des objectifs</a><span>&nbsp;;</span></li>
<li><a href="/previsionnels/?view=previsionnel">Saisie du prévisionnel</a><span>&nbsp;;</span></li>
<li><a href="">Planning mensuel</a><span>&nbsp;;</span></li>
<li><a href="">Planning semestriel</a><span>&nbsp;;</span></li>

</ol>
<p id="menu9" class="menu">
<a href="#" onmouseover="CacherMenus();" onclick="MontrerMenu('ssmenu9');">Administration<span>&nbsp;:</span></a>
</p>
<ol id="ssmenu9" class="ssmenu">
<li><a href="/profils/">Profils</a><span>&nbsp;;</span></li>
<li><a href="/utilisateurs/">Utilisateurs</a><span>&nbsp;;</span></li>
</ol>
</body>
</html>

CSS :

html{
background-color:#74D0F1;
background-image:url("/test/img/tong.png");
background-position: right bottom;
background-repeat:no-repeat;
margin:2.5em 0 0 0;
padding:0;
}

body{
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
color:#000;
font-size:75%;
float:none;
}

h1{
background-color:#FFE436;
border:2px solid #E67E30;
color:#333;
font-size:1.5em;
margin:0;
padding:0 1em;
line-height:1.5em;
}

table{
caption-side:top;
}

th, td{
padding:0.2ex;
}

.total, tfoot{
background-color:#E67E30;
font-weight:bold;
}

caption{
font-weight:bold;
font-style:italic;
margin-bottom:0.2ex;
}

tbody{
background-color:#fff;
color:#000;
}

th{
background-color:#666;
color:#fff;
}


fieldset{
background-color:#E0CDA9;
color:#000;
margin:1ex;
padding:1ex;
float:left;
border:2px solid #E67E30;
}

legend{
background-color:#FFE436;
color:#333;
font-weight:bold;
padding:0.2em 1em;
border:2px solid #E67E30;
}

label{
cursor:pointer;
}

/* detection d'erreur */
label{
color:red;
}

dl > dt > label{
color:#000;
}

input, select{
border:2px solid red;
}

form dl > dd > input, form dl > dd > select{
border:2px inset #000;
}
/* */

form dt{
font-weight:bold;
}

form dd{
margin-left:1em;
}

form button{
border-color:#ccc;
border-width:2px;
background-color:#686F8C;
color:#fff;
font-weight:bold;
}

form button[disabled]{
color:#ccc;
}

.menu, .ssmenu {
position:absolute;
margin:0;
padding:0.5ex;
background-color:#686F8C;
font-weight:bold;
color:#fff;
border:0.2em outset #ccc;
}

.menu {
top:-2.7em;
width:10.5em;
height:1.2em;
z-index:2;
}

.ssmenu {
top:-0.5em;
width:11.5em;
z-index:3;
list-style-type:none;
}

.menu span, .ssmenu span {
display:none;
}

.ssmenu li {
border-bottom:1px solid #ccc;
}

.menu a, .ssmenu a {
text-decoration:none;
color:#fff;
display:block;
}

.ssmenu li:hover, .ssmenu a:hover, .ssmenu a:focus {
background-color:#000;
opacity:1;
}

p.erreur{
color:red;
}

Voilà !!! merci par avance.
jv2759
Tyrannosaurus Rex
Messages : 4161
Inscription : 12 févr. 2004, 14:29

Message par jv2759 »

Les premiére remarque qui n'arrangerons pas ton probléme.

Je pense que tu as fait des erreure de conseption dans ta pages.

Car tu définit un form, alors que tu n'as aucun formulaire...

Pour le bouton, vue qu'il ne permet d'envoyer aucune information tu peux le mettre seul sans rien d'autre. Tu pourais même même un lien simple...

Sinon pour revenir à ton probléme, tu utilise :

position:absolute;

Sauf qu'il faut savoir que ie ne comprend pas tres bien cette fonction...


Sinon pour les tableaux, effectivement cela semble être un bug. Il refuse fieldset et float. (ou alors il faudrait aller vérifier dans les norme css pour voir comment il doit s'appliquer dans ce genre de cas)

La solution c'est de remplacer tout les fieldset par des div et cela marche tres bien...

La solution c'est de suprimer le form et
Inscrit sur la liste des abonner absent...
FF_Olivier
Iguane
Messages : 979
Inscription : 09 juil. 2004, 15:41

Message par FF_Olivier »

jv2759 a écrit :(---8<---)...La solution c'est de suprimer le form et
Tiens, jv est tombé à court d'encre dans son éditeur de texte :wink: ...
Ou alors, c'est le clavier qui s'est blo
openSUSE 12.2 - FF v24.0 FR - TB v24.0 FR ma config en détails - Décrivez la vôtre ici ;)
userContent.css : modifiez l'apparence et le contenu des sites visités !
jv2759
Tyrannosaurus Rex
Messages : 4161
Inscription : 12 févr. 2004, 14:29

Message par jv2759 »

et de mettre un div à la place...

jv est tombé à court d'encre
On vas dire cela comme ca, au moins on reste polit;)
Inscrit sur la liste des abonner absent...
Invité

merci

Message par Invité »

Merci pour vos réponses !!!
Je vais remplacer les fieldset par des div.
Ce n'est pourtant qu'une solution en attendant mieux (la correction du bug si bug il y a sur firefox :wink:

En tout cas merci et si qq un a du nouveau, je reste à l'écoute...

Encore merci

@+
jv2759
Tyrannosaurus Rex
Messages : 4161
Inscription : 12 févr. 2004, 14:29

Re: merci

Message par jv2759 »

Anonymous a écrit : Ce n'est pourtant qu'une solution en attendant mieux (la correction du bug si bug il y a sur firefox :wink:
Je suis d'accord avec toi sur le fait qu'il faudrait qu'il corige cela. Maintenant je suis pas d'accord avec toi sur le fait que tu utilise fieldset dans un sence détourner à sa fonction premiére.

fieldset est utiliser pour des formulaire, or toi tu ne l'utilise pas dans le cas d'un formulaire...

Tu l'utilise pour faire de la mise en pages...
Inscrit sur la liste des abonner absent...
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités