[Résolu] <Div> qui ne veut pas se placer correctement et

lomaster · le 19 avril 2009

Bonjour à vous tous (je penserais à éditer le premier message pour y mettre résolu la prochaine fois.)

Voilà j'ai un petit soucis avec une <Div> qui ne reste pas la ou elle devrait être lorsque l'on réduit la fenêtre du navigateur.. et un tableau qui n'écoute rien, je lui demande de ne pas mettre de bordure je me retrouve néanmoins avec une bordure et deux autres paramètres qu'il n'applique pas.

Voici ce que je dois obtenir en rendu final (les marges bleu sur les bords ne sont pas prise en compte dans m'a version et c'est normal):

(les zones en rouge en opacité réduite vous montre les éléments qui me pose problème, le tableau du menu supérieure et l'image de l'imprimante.)

Et donc voici ou moi j'en suis:

Les problèmes sont les suivants:

Le tableau:

Il applique des bordures que je ne souhaite pas.
Il ne place pas les images nécessaires pour créer les coins arrondis comme demandé
la dernière cellules du bas n'applique pas la couleur de background-color.

Pour l'imprimante:

Il se balade lorsque je change la résolution de la fenêtre.. IL ce place en-dessous du conteneur principal.
Ou simplement il n'apparaît pas.

Voici les liens des fichiers Xhtml et Css (je n'arive pas a mettre un scroller dans le code donc je vous mets deux liens.)

le Xhtml:

<html>
<head>
<title>Titre de l'entreprise</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<!-- Login -->
<div id="entete">
<p class="login"> Vous êtes connectés(e)<br/>
en tant que Luc</p>
<!-- logo -->
<div id="logo">
<img src="image/logo.jpg" alt="logo entreprise"/>
</div>
</div>
<table class="tablemenu">
<tr>
<td class="coing1"><img src="image/coingauche.png" width="10"
   height="10" align="top"/></td>
<td class="sapceraccueil"><img src="image/spacer.gif" /></td>
<td class="coind1"><img src="image/coindroit.png" width="10"
   height="10" align="middle" /></td>
<td width="2" ><img src="image/spacer.gif" /></td>
<td class="coing2"><img src="image/coingauche.png" width="10"
   height="10" align="top" /></td>
<td class="spacerespaceclient"><img src="image/spacer.gif" /></td>
<td class="coind2"><img src="image/coindroit.png" width="10"
   height="10" align="middle" /></td>
<td width="2" ><img src="image/spacer.gif" /></td>
<td class="coing3"><img src="image/coingauche.png" width="10"
   height="10" align="top" /></td>
<td class="spaceradministration"><img src="image/spacer.gif" /></td>
<td class="coind3"><img src="image/coindroit.png" width="10"
   height="10" align="middle" /></td>
</tr>
<tr>
<td class="spacergaccueil"><img src="image/spacer.gif" /></td>
<td class="accueil"><center>Accueil</center></td>
<td class="spacerdaccueil"><img src="image/spacer.gif" /></td>
<td height="27"><img src="image/spacer.gif" /></td>
<td class="spacergespaceclient"><img src="image/spacer.gif" /></td>
<td class="espaceclient"><center>Espace Client</center></td>
<td class="spacerdespaceclient"><img src="image/spacer.gif" /></td>
<td height="27"><img src="image/spacer.gif" /></td>
<td class="spacergadministration"><img src="image/spacer.gif" /></td>
<td class="administration"><center>Administration</center></td>
<td class="spacerdadministation"><img src="image/spacer.gif"/></td>
</tr>
</table>
<div id="menu">
<a href="#">Time sheets</a>  
<a href="#">Projets</a>  
<a href="#">sociétés</a>
<a href="#">   Contacts</a>
</div>
<!-- menu gauche -->
<div id="menugauche">
<a href="#"><img src="image/menugauche1.jpg" alt="menugauche1"/></a>
<a href="#"><img src="image/menugauche2.jpg" alt="menugauche2"/></a>
<a href="#"><img src="image/menugauche3.jpg" alt="menugauche3"/></a>
<a href="#"><img src="image/menugauche4.jpg" alt="menugauche4"/></a>
<a href="#"><img src="image/menugauche5.jpg" alt="menugauche5"/></a>
</div>
<!-- Conteneur -->
<div id="conteneur">
<div id="titre">
<div id="editelab">Edit sut Elab </div>
<div id="bouton">
 <input type="submit" value="Modifier" />
 <input type="reset" value="Annuler" />
</div>
</div>
<div id="coordonees"> [-] Coordonnées </div>
<!-- tableau -->
<table class="coordonnesé" border="1">
<tbody>
<tr>
<td rowspan="2">Adresse</td>
<td rowspan="2">42 Rue Galieni 3<sup>ème</sup> porte D</td>
<td>Téléphone</td>
<td>01.39.90.39.90</td>
</tr>
<tr>
<td>Activités</td>
<td>-<br/>
-</td>
</tr>
<tr>
<td>Code postal</td>
<td>92600</td>
<td>Divers</td>
<td>-</td>
</tr>
<tr>
<td>Ville</td>
<td>Asnière-sur-seine</td>
<td></td>
<td>-</td>
</tr>
</tbody>
</table>
<!-- fin du tableau -->
<div id="details">[-] détails</div>
<div id="blocktableau">
<!-- tableau -->
<table class="tableaudetails" border="1">
<thead> <!-- En-tÃªte du tableau -->
<tr>
<th>Mois</th>
<th>Nom</th>
<th>Ville</th>
<th>CP</th>
<th>Email</th>
<th>Téléphone</th>
<th></th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
<th>Exemple</th>
</tr>
</thead>
<tbody> <!-- Corps du tableau -->
<tr>
<td class="couleurmois">Janvier</td>
<td class="largeurcellulnom">de Lacotte</td>
<td class="largeurcellulville">Asnière sur Seine</td>
<td class="largeurcellulcp">92600</td>
<td class="largeurcelluletel">rdelacotte@elab.com</td>
<td class="largeurcelluletel" >60.07.08.09.10</td>
<td class="bouton1"><img src="image/bouton1.jpg" alt="bouton1"/></td>
<!-- titre d'exemple. -->
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<!--fin à titre d'exemple. -->
</tr>
<tr>
<td class="couleurmois">Mars</td>
<td>de Lacotte</td>
<td>Asnière sur Seine</td>
<td>92600</td>
<td>rdelacotte@elab.com</td>
<td>60.07.08.09.10</td>
<td class="bouton1"><img src="image/bouton1.jpg" alt="bouton1"/></td>
<!-- titre d'exemple. -->
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<!--fin à titre d'exemple. -->
</tr>
<tr>
<td class="couleurmois">Avril</td>
<td>de Lacotte</td>
<td>Asnière sur Seine</td>
<td>92600</td>
<td>rdelacotte@elab.com</td>
<td>60.07.08.09.10</td>
<td class="bouton1"><img src="image/bouton1.jpg" alt="bouton1"/></td>
<!-- titre d'exemple. -->
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<!--fin à titre d'exemple. -->
</tr>
<tr>
<td class="couleurmois">Septembre</td>
<td>de Lacotte</td>
<td>Asnière sur Seine</td>
<td>92600</td>
<td>rdelacotte@elab.com</td>
<td>60.07.08.09.10</td>
<td class="bouton1"><img src="image/bouton1.jpg" alt="bouton1"/></td>
<!-- titre d'exemple. -->
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<!--fin à titre d'exemple. -->
</tr>
<tr>
<td class="couleurmois">Octobre</td>
<td>de Lacotte</td>
<td>Asnière sur Seine</td>
<td>92600</td>
<td>rdelacotte@elab.com</td>
<td>60.07.08.09.10</td>
<td class="bouton1"><img src="image/bouton1.jpg" alt="bouton1"/></td>
<!-- titre d'exemple. -->
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<td>Exemple</td>
<!--fin à titre d'exemple. -->
</tr>
<tr>
<td colspan="18">
<a href="#"><img src="image/ajout.jpg" alt="ajout"/></a></td>
</tr>
</tbody>
</table>
<!-- fin du tableau -->
</div>
<div id="blocbouton">
<input type="submit" value="Modifier" />
<input type="reset" value="Annuler" />
</div>
<div id="pieddepage">
<div id="onglet1"> [+] Item x de Elab Ajouter</div>
<div id="onglet2"> [+] Projets de Elab Ajouter </div>
</div>
</div>
<div id="imprim"><img src="image/imprim.jpg" alt="impression"/></div>
<!-- Fin du Conteneur -->
<!-- picto imprimante -->
</body>
</html>

La <Div> pour l'image est celle-ci :

<div id="imprim"><img src="image/imprim.jpg" alt="impression"/></div>

Elle se trouve à la ligne 435

et pour le tableau c'est le tout premier.

Le code css:

body
{
background-color: #fff;
font:11px/20px verdana, arial, helvetica, sans-serif;
}

a img 
{

  border: none; 
}

a
{
text-decoration: none;
color:#ffffff;
font-size:11px;
}

table 
{
  width: 100%;
  border: 1px solid #8d8d8d;
  border-collapse: collapse; 
  font-size: 10px;
}

.tableaudetails
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0.5%;
width: 99%;
font-size:10px;

}






.tablemenu
{
width:412px; 
border:0px;
border-collapse:collapse;
border-width:0px;
border-style:none;
border:0;
cellspacing:0; 
cellpadding:0;
}

.coing1
{

background-color:#D1D1D1;
}

.sapceraccueil
{
 width:116px; 
 background-color:#D1D1D1;
}

.coind1
{

background-color:#D1D1D1
}


.coing2 
{

background-color:#13A4E7;
}

.spacerespaceclient 
{
width:116px;
background-color:#13A4E7;
}

.coind2 
{

background-color:#13A4E7;
}

.coing3 
{

background-color:#E1090A;
}

.spaceradministration 
{
width:146px; 
background-color:#E1090A;
}

.coind3
{ 
background-color:#E1090A;
}

.spacergaccueil
{
height:27px; 
background-color:#D1D1D1;
}

.accueil 
{
height:27px; 
valign:top; 
background-color:#D1D1D1;
}

.spacerdaccueil 
{
height:27px; 
background-color:#D1D1D1;
}

.spacergespaceclient 
{
height:27px;
background-color:#13A4E7;
}

.espaceclient 
{
height:27px; 
valign:top;
background-color:#13A4E7;
}

.spacerdespaceclient 
{
height:27px; 
background-color:#13A4E7;
}

.spacergadministration 
{
height:27px; 
background-color:#E1090A;
}

.administration 
{
height:25px; 
valign:top;
background-color:#E1090A;
}

.pacerdadministation
{
height:27px; 
background-color:#E1090A;
}





td
{
padding: 3px;
border: 1px solid #8d8d8d;
background-color: #ffffff;
text-indent: 3px;

}

.largeurcelluletel
{
width: 6%;
}

.largeurcellulcp
{
width:5%;
}

.largeurcellulemail
{
width: 7%;
}

.largeurcellulnom
{
width: 7%
}

.largeurcellulville
{
width: 8%;
}

.bouton1
{
text-align: center;
width: 3%;
}
th 
{
  background-color: #e3e3e3;
  color: #5e5e5e;
  text-align: center;
  background-image:url("image/degradetableau.png");
}


.couleurmois
{
background-color: #e5e5e5;
width:7%
}


#entete
{
width: 100%;
height: 70px;
text-align: center;
font-family: "Arial", "Arial", "Times New Roman", Times, serif;
font-size: x-small;	

}

.login
{
background-image: url("image/login.jpg");
background-repeat: no-repeat;
width:207px;
height: 40px;
margin: auto;
margin-top:-10px;
}


#logo
{
float: right;
margin-top:-35px;
}


#imprim
{

float:right;
margin-top: 36%;
margin-right: 5%;
}

#menu
{
width:100%;
background-color: #176fa8;
border: 1px solid #0d4a72;
color:#ffffff;
text-indent:30px;
margin-bottom: 32px;
margin-top: -15px;
font-family: Arial, "Arial", "Times New Roman", serif;
}


#onglet 
{
text-indent: 30px;
font-family: Arial, "Arial", "Times New Roman", serif;
}

.styleonglet1
{
color:#176fa8;
background-color:#c7c7c7;
background-image:url("image/degradeonglet1.png");
}

.styleonglet2
{
color:#ffffff;
-moz-border-radius: 10px;
padding: 15px;
background-color:#176fa8;
background-image:url("image/degradeonglet1.png");
}

.styleonglet3
{
color:#ffffff;
-moz-border-radius: 10px;
padding: 15px;
background-color:#7d0a12;
background-image:url("image/degradeonglet1.png");
}


#conteneur
{
float:none;
position:absolute;
margin-left:75px;
width: 90.2%;
background-color:#7fb1d0;
text-align:justify;
-moz-border-radius: 10px;
text-indent:10px;
padding-top:5px;
border: 1px solid #8d8d8d;
}



#editelab
{
color: #ffffff;
padding-top:5px;
padding-bottom:5px;
font-size: 13px;
font-weight: bold;
background-color:#7fb1d0;;
background-image:url("image/degrade.png");
}

#bouton
{
float:right;
margin-right: 0.8%;
padding-top:5px;
padding-bottom:5px;
}

#blocbouton
{
background-color:#ffffff;
border-top:1px solid #8d8d8d;
width: 99.2%;
text-align: right;
padding-right:0.8%;
padding-top:5px;
padding-bottom:5px;
}


#coordonees
{
background-color:#b8cfde;
border: 1px solid #8d8d8d;
color: #4078ad;
padding-top:5px;
padding-bottom:5px;
font-weight: bold;
font-size: 13px;
}

#details
{
background-color:#b8cfde;
border: 1px solid #8d8d8d;
color: #4078ad;
padding-top:5px;
padding-bottom:5px;
font-weight: bold;
font-size: 13px;
}

#blocktableau
{
background-color: #ffffff;
width: 100%;
}

#pieddepage
{
background-color:#e0f4fb;
border-top: 1px solid #8d8d8d;
margin-bottom:20px;
}

#menugauche
{
list-style-type: none;
float:left;
margin-top: 0px;
width:51px;
}
#menugauche a img
{
border-bottom:0px;
margin-top:0px;
}


#pieddepage
{
padding-top:2%;
padding-bottom:5px;
}

#onglet1
{
padding-top:5px;
padding-bottom:5px;
background-color: #a7d0e0;
margin-bottom: 3%;
margin-left: 1.5%;
width: 96.75%;
border: 1px solid #106386;
font-weight: bold;
}

#onglet2
{
padding-top:5px;
padding-bottom:5px;
background-color: #a7d0e0;
margin-bottom: 3%;
margin-left: 1.5%;
width: 96.75%;
border: 1px solid #106386;
font-weight: bold;
}

/* -----> Que pour IE <----- */

* html .login
{
background-image: url("image/login.jpg");
background-repeat: no-repeat;
width:207px;
height: 40px;
margin: auto;
margin-top:-3px;
padding-top:0px;
}

* html #menugauche
{
list-style-type: none;
float:left;
margin-top: 0px;
width:51px;
}

* html #menugauche a img
{
border-bottom:0px;
margin-top:-4px;
}	

* html #conteneur
{
float:none;
position:absolute;
margin-left:15px;
width: 94%;
background-color:#7fb1d0;
text-align:justify;
text-indent:10px;
padding-top:5px;
border: 1px solid #8d8d8d;
}


* html .tableaudetails
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0.5%;

font-size:10px;

}

* html #blocbouton
{
background-color:#ffffff;
border-top:1px solid #8d8d8d;
width: 100%;
text-align: right;
padding-right:0.8%;
padding-top:5px;
padding-bottom:5px;
}


* html #pieddepage
{
background-color:#e0f4fb;
border-top: 1px solid #8d8d8d;
height:0px;
}


* html #onglet2
{
padding-top:5px;
padding-bottom:5px;
background-color: #a7d0e0;
margin-bottom: 3%;
margin-left: 1.5%;
width: 96.75%;
border: 1px solid #106386;
font-weight: bold;
}

* html #coordonees
{
background-color:#b8cfde;
border: 1px solid #8d8d8d;
color: #4078ad;
padding-top:8px;
padding-bottom:5px;
font-weight: bold;
font-size: 13px;
}

Voila j'espère que ce n'est pas trop bordélique comme explication. Mais si vous avez une idée de ce qui ne va pas pour cette <Div> et ce tableau merci de me filer un coup de main.

Bonne journée.

Modifié le 20 avril 2009 par lomaster

Dylav · le 19 avril 2009

Bonjour Lomaster,

Les liens que tu nous fournis branchent tous deux sur la page ci-dessous. Il serait donc préférable que tu postes, directement par copier/coller entre des balises [code] [/code], le code de ta page HTML et celui de ta feuille de style.

lomaster · le 19 avril 2009

bonjour Dylav

j'ai édité mon premier message, j'ai changer les photos pour enlever les informations tel que le numéro de téléphone et l'adresse et je crois que j'avais mis les deux même image aussi ..

Si tu pouvais mettre un scroller pour le code je ne sais pas le mettre et cela allonge beaucoup le post, sauf si cela ne dérange pas.

Modifié le 19 avril 2009 par lomaster

Dylav · le 19 avril 2009

Pour ton tableau "tablemenu",

il semble que le remplacement des attributs cellpadding="0" et cellspacing="0" de la balise <table> par des clauses de style CSS soit assez simple si j'en crois cette solution, et assez délicat selon cette spécification. Ceci dit, je ne réussis pas complètement la mise en œuvre
pour les images, ce ne peut être qu'une histoire de chemin relatif : vérifie qu'elles portent bien ces noms-là, et sont situées dans le sous-répertoire image du répertoire qui contient ta page,
pour la dernière cellule, tu as commis une erreur dans le nom de la classe, que tu nommes spacerdadministation dans ta page, et pacerdadministation dans ta feuille de style.

Pour ton imprimante, elle est définie dans un bloc <div> indépendant et, en toute logique, se situera donc toujours en bas à droite de ta page, en-dessous de tout autre bloc.

lomaster · le 19 avril 2009

J'ai un peu honte de n'avoir pas trouver tout seul pour le background-color de la cellule ...

Pour l'icône je pense avoir résolut le problème sauf pour un affichage de 800x600....Mais bon je verrais ça plus tard.

Pour les bordures des cellules ton liens m'a bien aidé j'ai donc plus de border c'est top ^^

le problème qui me reste c'est le calage des images (les arcs de cercle blanc) elle s'affiche bien donc pas de problème d'url des images. cependant je veux quel soient collées sur les angles supérieure des cellules, à droite et a gauche selon leur positionnement afin de donner l'illusion d'un arrondie.

Et relever le texte afin qu'il empiète pas sur le menu inférieur, j'ai bien mis un "vertical-align : top;" mais ce n'est pas assez haut.

je n'ai pas trouvé comment faire.

Voici le résultat pour le moment:

Enfin déjà merci pour le coup de main

Modifié le 19 avril 2009 par lomaster

Dylav · le 19 avril 2009

Pour tes coins arrondis, ça ressemble à une histoire de padding. Tu pourrais essayer d'ajouter l'attribut padding:0; à chacune de tes classes coing1, coind1, coing2, coind2, coing3 et coind3.

Autre solution : définis plutôt tes images de coin arrondi comme images de fond de tes cellules (propriété background), et tu ne devrais plus avoir de problème de positionnement. Mais il te faudra dimensionner tes cellules, car l'image de fond ne s'attribue pas d'espace. Attention, ceci suppose que ta page HTML et ta feuille de style CSS sont dans le même répertoire (l'image du background est, cette fois, en chemin relatif à partir de la feuille de style, et non de la page HTML). Exemple :

.coing1 {
width:10px;
height:10px;
background:#D1D1D1 url(image/coingauche.png) no-repeat top left;
}
.coind1 {
width:10px;
height:10px;
background:#D1D1D1 url(image/coindroit.png) no-repeat top right;
}

Avec :

<td class="coing1"></td>
<td class="sapceraccueil"></td>
<td class="coind1"></td>

Ceci dit, ne serait-il pas plus simple de représenter chaque onglet par une image unique aux coins arrondis, et qui contiendrait le texte du choix de menu ? Tu n'aurais alors plus besoin de tableau, il te suffirait de placer les trois images côte à côte dans un bloc <div> (affublées d'un hspace="2" séparateur ou, plus protocolairement, d'un margin-right:4px; dans la feuille de style). Et ce bloc <div> résoudrait très certainement ton problème de chevauchement des deux menus horizontaux

lomaster · le 19 avril 2009

Bonsoir ou bonjour selon l'heure ou tu liras le post

Enfaite c'est bon j'ai tout réglé avec des margin-top left/right négatif pour casé correctement les images de bord arrondi. Le padding:0 ne fonctionner pas... j'avais déjà essayé.

Moi aussi j'aurai mis des images, mais ce n'est pas moi qui décide..... je dépanne une amie et son client et comment dire heu assez c*** il veut pouvoir changer la couleur des menu et il veut le moins d'image...

Personnellement je pense que le mieux était de faire cela en php... mais il ne veut pas.

En tout cas un GRAND MERCI !!!!!! il me reste plus cas le faire valide pour IE...

Dylav · le 20 avril 2009

Tu devrais tout de même essayer ma seconde proposition, avec les coins en images de fond, c'est de loin la plus élégante… en CSS (mais pas en HTML, où tu détournes la fonctionnalité d'énumération de la balise <table>).

Content de t'avoir été utile…

lomaster · le 20 avril 2009

Re

Pour le temps que cela va me prendre, je ferai une autre version avec cette méthode pour montrer que le rendu est déjà bien mieux. Il choisira celle qui veut.

Bonne journée.

Connexion

Pas encore inscrit ?

[Résolu] <Div> qui ne veut pas se placer correctement et

Messages recommandés

lomaster

Dylav

lomaster

Dylav

lomaster

Dylav

lomaster

Dylav

lomaster

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer