[RESOLUE]Coller trois tableaux

Bonjour

Dans l'optique de faire un menu qui ressemble à ca:

<table width="200" border="1">
  <tr>
    <td colspan="3">image titre </td>
  </tr>
  <tr>
    <td width="15">col1</td>
    <td width="140">col2</td>
    <td width="15">col3</td>
  </tr>
</table>

- les liens se trouveront dans la colonne col2 qui a une bordure en pointillé "border: dotted black 2px;"
- dans col1 et col3 ca sera "le gros bordure" où j'ai mis un fond (image de 1px de hauteur) qui se répète "background-repeat: repeat-y"


J'aimerai savoir comment on fait pour que ces col1 et col3 s'allonge en même temps que col2 s'allonge car lorsque je rajoute des liens dans col2, elle s'allonge en hauteur mais col1 et col3 ne s'allonge pas.



Voici ce que j'ai réussi à faire pour l'instant.

Déjà je met entre div l'ensemble du menu regroupant tous les tableaux (voir ci-dessus le menu en html)
à l'intérieur de ce div, j'ai mis plusieurs sous div qui représente tout simplement "image titre", "col1", "col2", et "col3".

Voici donc le code xhtml:

<!-- VOICI LE HEADER -->
<div id="header">
</div>

<!-- VOICI LES MENUS DE GAUCHE ET DE DROITE -->
<div id="menugauche">
        <div class="image_titre">
        </div>
        <div class="col1">
        </div>
        <div class="col2">
             <ul>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                        <li>Lien</li>
                </ul>
        </div>
        <div class="col3">
        </div>
</div>


<!-- VOICI LE CENTRE DE MA PAGE -->
<div id="centre">
</div>


<!-- VOICI LE BAS DE MA PAGE -->
<div id="footer">
</div>

Et voici le code css

.image_titre
{
        height:27px;
        background-image: url("images/15_05.gif");
        background-repeat: no-repeat;
        margin-bottom: 0px;
}
.col1
{
        width: 9px;
        background-image: url("images/15_62.gif");
        background-repeat: repeat-y;
        float:left;
}
.col2
{
        width: 124px;
        background-image: url("background2.jpg");
        background-repeat: repeat;
        border: 2px dotted black;
        float: left;
}
.col3
{
        width: 9px;
        background-image: url("images/15_62.gif");
        background-repeat: repeat-y;
        float:left;
}

Donc voilà, si quelqu'un peut m'aider, MERCI
Modifié par Lune (25 Sep 2006 - 22:51)

Salut Lune,

Plutôt que d'agencer ton menu dans un tableau compliqué qui te pose des problèmes à mettre en place, que dirais-tu d'aller jeter un oeil aux gabarits de menus proposés dans la bibliothèque ?

Ils sont beaux, fonctionnent, et en plus tu as même le SAV dans le forum dédié...
Elle est pas belle la vie ?!?
Modifié par Cygnus (25 Sep 2006 - 19:27)

bonjour cygnus,

oui je suis tout à faire d'accord que les gabarits de menus sont jolie.

Mais vois-tu j'ai déjà réalisé l'interface graphique de mon site.

D'ailleurs je te montre l'image du menu en question.
http://img158.imageshack.us/img158/9642/test2xz2.jpg

La seul solution que j'ai trouvé pour ce menu était de le découper en quatre morceau. col1 et col3 représentant la bordure de gauche et de droite après les pointilles afin qu'au millieu je puisse faire moi-même le tableau avec un jolie border: dotted black 1px;



Bon j'ai remodifier le code CSS, malheureusement je n'arrive pas à coller à gauche ma liste à puce. (svp me conseillez pas un position-absolute je trouve que ca fait trop bricolage).

Code html

<h2></h2>
<div id="menugauche">
   
  <div>

    <ul>
      <li><a href="un.html">un</a></li>
      <li><a href="deux.html">deux</a></li>
      <li><a href="trois.html">trois</a></li>
      <li><a href="quatre.html">quatre</a></li>
    </ul>
  </div>
</div>

#menugauche {
  width: 144px;
  
  background: url("images/15_62.gif") repeat-y left;
  padding-left: 9px;
}

h2 {
  height: 27px;
  width: 200px;
  background-image: url("images/15_05.gif");
  background-repeat: no-repeat;
  margin-bottom: 0px;
  margin-top: 0px;
}


#menugauche div {
  background: url("images/15_62.gif") repeat-y right;
  width: 124;

}

#menugauche ul {
list-style-type: none;
  border: 2px dotted black;
  
  paddin-left:0;
}

#menugauche li {
  background-image: url("images/background2.gif");
}	

Avec ce code, j'obtiens ca;
http://img178.imageshack.us/img178/9495/testke8.jpg
Modifié par Lune (25 Sep 2006 - 19:54)

Non tu peux très bien le découper en deux morceaux seulement

> http://img.noklio.org/lune/

Deux images une pour le fond, une pour le titre
> http://img.noklio.org/lune/sidebar-bg.gif
> http://img.noklio.org/lune/h2-dossier.gif

[EDIT]
CSS :

#sidebar {
width:142px;
background:#edecce url(sidebar-bg.gif) repeat-y;
}
h2 {
height:25px; width:142px; margin:0;
}
h2 span {
/*Ca permet de cacher le texte compris entre les span dans les h2
(texte nécéssaire pour une bonne accéssibilité*/
display:none; position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;
}
h2.dossier {
background:url(h2-dossier.gif) no-repeat;
}
#sidebar ul {
border:1px #000 dashed; margin:10px; padding-left:20px;
}
#sidebar ul li a {
color:#000; text-decoration:none;
}

HTML :

<div id="sidebar">

			<h2 class="dossier"><span>Dossier</span></h2>
			<ul>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>

				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
			</ul>
			<h2 class="dossier"><span>Dossier</span></h2>
			<ul>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>

				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
				<li><a href="#">Bla bla</a></li>
			</ul>
		</div>

Modifié par noklio (25 Sep 2006 - 22:21)

ouai c'est la solution simple. Le problème étant que je voulais optimisé au maximum la vitesse de chargement de mon site.

Bon alors je vais faire comme tu dis alors.

je devrai utilisé un position-absolue pour placé mon tableau en pointillé ?
Modifié par Lune (25 Sep 2006 - 20:58)

"Le problème étant que je voulais optimisé au maximum la vitesse de chargement de mon site."

Tu sais des fois à vouloir chercher à optimiser tout tout le temps on en finit par allourdir le tout. Ici par exemple si t'avais du definir une bordure noire etc au lieu de l'incorporer au fond, tu aurais allourdi ta css et ton code html alors qu'avec un png/gif comprenant le tout, tu optimise au contraire (Dans ce cas précis, d'habitude c'est souvent l'inverse)

"je devrai utilisé un position-absolue pour placé mon tableau en pointillé"

Bien sur que non... Regarde comme j'ai fait, le tableau c'est "<ul>" et les lignes c'est "<li>", le titre quand à lui est hors du tableau il est dans <h2>.

Si tu cherches à tout prix à optimiser, tu devrais éviter les <table> tu allergerais énormément ton code

ok ca marche du tonerre.

merci beaucoup noklio


sinon tu peux me dire si ca optimise le fait de tout imbriquer comme tu le fait.

par exemple au lieu de faire


background-image
background-position


toi tu fais
background: url(.....) left

?
Modifié par Lune (25 Sep 2006 - 21:59)

Lune a écrit :
sinon tu peux me dire si ca optimise le fait de tout imbriquer comme tu le fait.
par exemple au lieu de faire :
background-image
background-position

toi tu fais
background: url(.....) left

Effectivement, ça optimise le tout comme tu dis ...
D'ailleurs voici un lien sur un sujet abordant la question ... pas plus tard qu'hier...

De plus, pour la prochaine fois, te serait-il possible d'éditer ton code comme cela est demandé dans les règles du forum ? C'est quand même vachement plus pratique à lire, et on a plus envie d'y jeter un oeil...

Et enfin...
N'oublie pas si ton problème est [Résolu] de l'indiquer comme tel

Ok pas de probleme
Modifié par Lune (25 Sep 2006 - 22:50)