[HTML] Problème avec TABLEAU

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML] Problème avec TABLEAU

rainckill

Bonjours, j'ai un problème avec un tableau :-/

J'ai fait une maquette du site pour que vous comprenez plus facilement :

Voila, il y a donc un menu de talle x déterminée, avec à sa droite, le contenu du site, qui lui, a une hauteur variable, et beaucoup plus grande que le menu. En dessous du module se trouve donc une cellule qui a pour fonction de s'agrandir lorsque le contenu devient plus grand que le menu.
Ceci, parce que le site génère une bordure, que à gauche. (alors que le menu génère une bordure à gauche et à droite).

Voila le rendu voulu :

Mais un problème persiste. Lorsque le contenu grandit, et dépasse donc la taille du menu, ce n'est pas la cellule prévu pour qui s'agrandi, mais la cellule du menu :-/

Ma question ets donc : comment faire pour que la cellule du menu reste à la même hauteur, tandis que la cellule "bord+ vide" s'adapte suivant la taille du contenu ?

Merci ^^

Rainckill

Publicité

cyp en forsse

Toggenburg enthusiast

Me dis pas que tu as tapé les balises HTLM dans ton message !

rainckill

cyp en forsse a écrit a écrit :

Me dis pas que tu as tapé les balises HTLM dans ton message !

Pas compris la :??: :pt1cable:

Si tu parles des image,s c'était une blague ?

wax09

pas sûr d'avoir compris, mais c'est p-e parce ton menu & contenu font partie de la même balise <tr> ?! non ?

gm_superstar

Appelez-moi Super

rainckill a écrit a écrit :

Ma question ets donc : comment faire pour que la cellule du menu reste à la même hauteur, tandis que la cellule "bord+ vide" s'adapte suivant la taille du contenu ?

Ne pas utiliser de tableau. On peut faire ça simplement avec 3 DIV : un pour le Titre, un pour le menu (en flottant) et un pour le contenu.

<div id="titre">...</div>
<div id="contenu">
<div id="menu">...</div>
...
</div>

Avec comme propriétés pour le menu :

div#menu {
float: left;
width: ...;
height: ...;
}

Message édité par gm_superstar le 05-12-2002 à 16:12:52

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

wax09 a écrit a écrit :

pas sûr d'avoir compris, mais c'est p-e parce ton menu & contenu font partie de la même balise <tr> ?! non ?

Oui, c'est ca ! mais, chuis obligé de faire comme ca ! non ?

rainckill

gm_superstar a écrit a écrit :

Ne pas utiliser de tableau. On peut faire ça simplement avec 3 DIV : un pour le Titre, un pour le menu (en flottant) et un pour le contenu.

<div id="titre">...</div>
<div id="contenu">
<div id="menu">...</div>
...
</div>

Avec comme propriétés pour le menu :

div#menu {
float: left;
width: ...;
height: ...;
}

On pourrait avoir ce rnedu facilemnt avec cette technique ? (que je ne connais aps)

http://www.hellfire.firstream.net/GOGO/copas02.html

gm_superstar

Appelez-moi Super

rainckill a écrit a écrit :

On pourrait avoir ce rnedu facilemnt avec cette technique ? (que je ne connais aps)

http://www.hellfire.firstream.net/GOGO/copas02.html

Oui pour l'ossature générale seulement. Pas pour les tableaux internes car tu utilises des images pour les bordures. Et qui dit bordures avec des images dit tableaux. On ne peut pas faire autrement pour l'instant.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

Oki,

Mais le blem, c'est que je voit aps trop comment on utilise els balise <div> comme toi tu les utilises O_o

Pour moi, les balises div, c'est juste pour centrer, aligné à gauche, à droite, ou justifier

gm_superstar

Appelez-moi Super

Ben poste l'URL de ton tableau on verra ensuite.

C'est toujours le même tablau qui traîne depuis cet été ? :whistle:

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Publicité

rainckill

MDR !!!!!

Tu te souviens :lol: :lol: :lol: :lol: :lol:

Oui, c'est toujours ca qui traine :whistle: (mais ct aps de ma faute, si ca a trainé )

Donc voila une url : http://www.hellfire.firstream.net/copas/

Profil supprimé

rainkil ta maquette de copas tu l'as fait avec quelle logiciel?

rainckill

chacal_one333 a écrit a écrit :

rainkil ta maquette de copas tu l'as fait avec quelle logiciel?

pq cette question ? O_o :sweat:

Pour répondr,e je l'ai faite sous photoshop, mais les manip sous mgi photosuite =)

Profil supprimé

ben jle trouve super et moi tochop je sais faire que des sale truc :cry:

rainckill

chacal_one333 a écrit a écrit :

ben jle trouve super et moi tochop je sais faire que des sale truc

Lol, merci, mais elle reste quand meme assez simple

Sinon, pour ce qui est de mon blem ?

Profil supprimé

ben il te suffit de specifier le width and heigh si je comprend bien

gm_superstar

Appelez-moi Super

Bon j'ai fait cet essai

Il te reste à :

- mettre les tableaux à la place des "plop"
- supprimer les bordures à gauche des images boutons parce que du coup ça fait une bordure double pas terrible
- découper l'image qui est en haut à droite en 3 boutons distincts
- tester avec IE (j'ai testé qu'avec Mozilla et Opera)

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

gm_superstar a écrit :

Eyh Mais c super

enfin, sous ie, a une chose pres : la barre ou il doit i avoir els raccourcis est en dessous du logo, et non à côté... sous mozilla et opera ca le fait bien ??

Sinon, merci bien =)

gm_superstar

Appelez-moi Super

rainckill a écrit :

Heu j'ai testé aujourd'hui avec IE 6 et c'était tout bon. Tu testes avec quelle version de IE ? Sinon essaye de rajouter un peu de largeur histoire que tout rentre sur la même ligne.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

ah wi ? moi, j'ai ie 5.50... je suis en 1024*780, mais g essayer d emettre en 1280 et c'est la même...

c'ets bizarre qu'il y ai de schangements comme ca d'une version à une autre...

peuvent pas interpreter le code de la meme maniere ces navigatuers ! ca faciliterai rolalala =)

rainckill

dis...

vraiment, je comprend rien avec tes div enfait :-/

:cry: :cry: :cry: :cry:

Tu pourrais aps me donner une ptit explication la ? car, je remarque que a peine je fait un "enter" dans la ligne de code (pas un <br>, juste un "enter" dans le code) pour organisé le code, qu'il soit plus lisible, ben tout aprt en couille ! argh

rainckill

up :whistle:

gm_superstar

Appelez-moi Super

rainckill a écrit :

ah wi ? moi, j'ai ie 5.50... je suis en 1024*780, mais g essayer d emettre en 1280 et c'est la même...

Non quand je disait de donner un peu de largeur, je parlais du DIV conteneur. Je l'ai passé à 782 pixels au lieu de 780 et ça passe bien avec IE 5 maintenant.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

gm_superstar

Appelez-moi Super

rainckill a écrit :

Si les tags <img> sont collés dans la partie titre c'est normal. Il ne faut pas les séparer car une image est considérée comme du texte. Donc si tu ajoutes un espace entre 2 tags <img> tu auras un espace entre tes images sur la page. Ils doivent restés collés car la largeur du DIV conteneur fait exactement la somme des images du titre.

Après si tu as d'autres questions...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

gm_superstar a écrit :

oki, je vais analysé d eplus pres now ke g les informations ^^

merci

rainckill

décidément...

est ce que tu pourrais me donner le code source pour lequel tu as généré la page stp ? (rainckill@free.fr)

car la, je capte pas trop, quand j'enregistre la page sur mon pc, ia pas le bas qui s'affiche (enfin, l'image bas.gif), ni b_menu_v.gif ... Je sais que qu'and je fais enregistrer sous, elles viennet aps dans le fichier images, car elles sont mise en fond ?) mais je els enreigstre amnuellement, je els fou la ou ils faut (images/decors), pis elles aparaissent tjs aps O_o

Flyman30

rainckill a écrit :

Sous IE affichage --> source
Sous netscape afficher -->source de la page :sarcastic:

rainckill

FlyMan30 a écrit :

Sous IE affichage --> source
Sous netscape afficher -->source de la page :sarcastic:

Wé non, je sais, ou alors je fais enregistrer la page sous, mais :
J'ai fait enregistrer sous, et voila le problem rencontré : (voir mess précédent)

Et quand je fais affiché la source, c'est carrément pas ca kil me sort il me sort un code, ki lorsque je le réutilise (copi collé dans mon éditeur html) me sort un truc tres bizar (enfin ia tout, mais tout désarticulé )

Donc merci de vouloir m'aider, mais pas avec ce grand air

gm_superstar

Appelez-moi Super

Tu dois enregistrer la page Web complète c'est pour ça que ça foire. Enregistre seulement la page HTML et sa feuille de style (styles.css qui est dans le même répertoire).

Fichier > Enregistrer Sous > Page Web HTML uniquement

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

gm_superstar a écrit :

Oula non, ca merde au possible

ca fait le meme blem que si je fais affiché la source (premeir blem : tous els bouton sont aligné sur la meme ligne O_o )

gm_superstar

Appelez-moi Super

Bon, on va faire simple. Voici l'arborescence utilisée :

Le fichier index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Copas : Conseil en Pratiques et Analyses Sociales</title>

</head>

<body>
<div id="main">
<div id="titre"><img src="images/decors/logo.gif" height="105" width="206" alt="Logo Copas" /><img src="images/decors/recherche.gif" height="105" width="263" alt="Fond recherche" /><img src="images/decors/raccourcis.gif" height="105" width="311" alt="Boutons divers" />
<form id="recherche" action="recherche">
<div>
<input id="texte" type="text" name="champRecherche" title="Rechercher..." /> <input id="ok" type="submit" value="OK" />
</div>
</form>

</div>

<div id="menu">
<img class="decorationMenu" src="images/decors/b_menu_h.gif" height="40" width="134" alt="Bordure supérieure du menu" />
<div id="maj"><b>MAJ</b> : 24 septembre</div>
<a href="#"><img src="images/decors/b_quisommesns.gif" width="134" height="30" alt="Qui sommes nous ?" /></a>
<a href="#"><img src="images/decors/b_intervention.gif" width="134" height="30" alt="Interventions" /></a>
<a href="#"><img src="images/decors/b_enquestion.gif" width="134" height="30" alt="En questions" /></a>

<a href="#"><img src="images/decors/b_bonnespages.gif" width="134" height="30" alt="Bonnes pages" /></a>
<a href="#"><img src="images/decors/b_encours.gif" width="134" height="30" alt="En cours" /></a>
<a href="#"><img src="images/decors/b_references.gif" width="134" height="30" alt="Références" /></a>
<a href="#"><img src="images/decors/b_publications.gif" width="134" height="30" alt="Publications" /></a>
<a href="#"><img src="images/decors/b_equipe.gif" width="134" height="30" alt="Équipe" /></a>
<p><b>Tel</b> 03 28 04 54 24<br /><b>Fax</b> 03 28 04 54 25</p>

<p>2 bis, rue des Jardins 59800 LILLE</p>
<img class="decorationMenu" src="images/decors/b_menu_b.gif" height="19" width="134" alt="Bordure inférieure du menu" />
</div>
<div id="contenu">
<p>plop</p>
<p>plop</p>
<p>plop</p>

<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>

<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>

<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>

<p>plop</p>
<p>plop</p>
<p>plop</p>
<p>plop</p>
</div>
<div id="piedDePage">
<div id="auteur">Design et code Rainckill</div>

Copyright <b>COPAS</b> ©
</div>
</div>

</body>

</html>

La feuille de styles, styles.css :

body {
background-color: white;
color: black;
text-align: center;
font-family: Verdana, Arial, helvetica, sans-serif;
font-size: small;
}

div#main {
margin-left: auto;
margin-right: auto;
width: 782px;
border-left: 1px solid gray;
border-right: 1px solid gray;
text-align: left;
}

div#titre {
position: relative;
line-height: 0;
}

div#titre form {
position: absolute;
margin: 0;
top: 30px;
left: 335px;
}

div#titre input {
height: 18px;
border: 1px solid silver;
background-color: #eee;
line-height: 1em;
color: #36c;
font-weight: bold;
}

input#texte {
width: 80px;
}

input#ok {
width: 25px;
}

div#menu {
float: left;
width: 135px;
color: #808080;
font-size: x-small;
background-image: url(images/decors/b_menu_v.gif);
background-repeat: repeat-y;
}

div#menu a {
display: block;
}

div#menu b {
text-decoration: underline;
}

div#menu div, div#menu p {
padding-left: 2px;
width: 120px;
}

img.decorationMenu {
display: block;
}

div#maj {
padding-top: 30px;
padding-bottom: 10px;
}

div#contenu {
margin-left: 135px;
text-align: center;
}

div#piedDePage {
height: 19px;
padding-top: 5px;
background-image: url(images/decors/bas.gif);
background-repeat: repeat-x;
color: white;
font-size: x-small;
}

div#auteur {
float: right;
}

a img {
border: 0;
}

Je peux pas faire mieux là...

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

rainckill

Je m'excuse... Car je viens de me rendre compte de ou été le probleme...

La feuille de style n'été aps placé au bon endroit O_o ... Elle été placé dans Copas Conseil en Pratiques et Analyses Sociales_fichiers ce qui est normal, alors que le code disait quelle devait se trouver à la meme racine que index.htm...

J'avais ne pas avoir assuré sur ce coup là

Je m'en excuse...

/me s'en va heureux tout de meme car tout marche maintenant :pt1cable:

Merci encore gm_superstar :jap: :jap: :jap:

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML] Problème avec TABLEAU

Sujets relatifs
J'arrive pas à retrouver le code html d'une couleur...le vieux vert!	Pb tableau et contenu dynamique
Probleme de dimension et de ligne sur un TD	Html / dreamweaver
Utilisation d'un tableau dynamique	Deux declarations de tableaux de caracteres = probleme
[HTML] Problème de bordure sur un tableau (vite résolu :))	[HTML] Probleme de tableau
[ HTML ] SVP , j'ai un gros problème avec un tableau :(((((	[HTML] Problème avec bordure de tableau sous Netscape
Plus de sujets relatifs à : [HTML] Problème avec TABLEAU

Page générée en 0.064 secondes