Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

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


lomaster

Messages recommandés

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):

086c055afebd90c9fcdd0101610ca656.jpg

 

(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:

69e830cb09219cf3f70cab14b5efac86.png

 

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">[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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é par lomaster
Lien vers le commentaire
Partager sur d’autres sites

bonjour Dylav :P

 

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.

 

:P

Modifié par lomaster
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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 :P
  • 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.

Lien vers le commentaire
Partager sur d’autres sites

:P

 

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é :P 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:

7c7693677c7e849000a09785883b64c6.png

 

Enfin déjà merci pour le coup de main :P

Modifié par lomaster
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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 :P

Lien vers le commentaire
Partager sur d’autres sites

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

 

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...

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...