Un tableau dans un autre tableau??

Sujet résolu

5 janvier 2006 à 14:48:11

Hello tout le monde.
J ai lu les cours de m@teo sur le Html / Css et j ai essaye quelques trucs mais quand je veux mettre un tableau dans un autre tableau ca foire...
Je m explique. Si on regarde l exemple de design de m@teo vous voyez qu il y a un tableau pour l en tete un tableau pour le menu un tableau pour le corps et un tableau pour le bas de page. Moi J aimerais mettre un tableau dans le corps du texte qui est lui meme deja un gros tableau... Mais ca ne marche pas...
Repondez moi vite pls...
Merci beaucoup
(tableau = cadre si vous voulez... J ai pas encore tout le langage...

)

Nyro Xeo

5 janvier 2006 à 14:49:58

Tu te trompes. Si on regarde le design de M@teo, il n'utilise de tableau nulle part (regarde donc la source). Tu devrais suivre son exemple, et utiliser une mise en page en CSS. Seul le forum est fait de tableau, mais le menu, l'en-tête, le pied de page, rien de tout ça n'est tableau (ni même le contenu, hors du forum).

http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html

Heskan

5 janvier 2006 à 14:52:30

Oui c est vrai je me suis mal explique...
Il mets des cadres. il y a le fond de page (sur son exemple en gris je crois) et la dessus il nous place un cadre ou il incorpore le corps du site etc...

jp949

5 janvier 2006 à 14:53:14

il suffit du code html
<div id="corps"><div></div></div>
ton cadre est inseré dans #corps pas plus dur

Nyro Xeo

5 janvier 2006 à 14:56:53

En l'occurence, un seul <div> suffit, d'ailleurs. Le fond de page qui est gris, c'est la page en elle-même (si nous voyons la même chose) :

body
{
background-color: gray; /* ou autre couleur */
}

...et le <div> est simplement placé comme tel, avec une bordure, et une autre couleur de fond (par exemple) :

#corps
{
border: 1px solid black; /* par exemple */
background-color: skyblue; /* par exemple (même si cette couleur n'est pas de toute beauté) */
}

Heskan

5 janvier 2006 à 14:59:20

Ok bon ca marche mais pas totalement. Il me met le cadre mais il m entoure chaque ligne en plus de les superpose un petit peu... :euh:

Nyro Xeo

5 janvier 2006 à 15:00:57

Comment ça chaque ligne ? Cela signifie-t-il que tu as déjà un code XHTML un peu plus développé !? Colle le voir ici (sans oublier la balise <code>).

Heskan

5 janvier 2006 à 15:19:37

Bon j ai coupe pratiquement tout le texte pour voir si c etait vraiment un pb de texte et non ce n est pas le cas. Voila le "Code" avec peu de texte qui ne fonctionne toujours pas... Il y a bien le cadre autour du "ici" mais le cadre je voudrais qu il soit un tout petit peu plus petit que le cadre du "corps"...

<!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" >
<head>
<title>Le site de Saint-Louis (blog)!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="c.s.s.css" href="c.s.s.css" />

</head>
<body>

<div id="en_tete">
<h1>Blog!!</h1></br></br>
<h2>Bienvenu sur mon blog!!</h2></br>
</div>

<div id="menu">
<h3>Menu:</h3>
<ul>
<li><a href="http://www.google.com">lien1...</a></li>
<li>Pour me contactez, <a href="esa@yahoo.com">cliquez ici</a> !</li>
</ul></br></br>
   </div>

<div id="corps">

   <p><center>Essayez de vous rappelez cette belle epoque qu etais le temps ou nous etions encore a St-Louis...</br>
   Les bombes a eaux dans les couloirs, les profs qui vous courraient apres...</br>
   les toilettes du premier etage qui on failli cramer...</br>
   A mais quelle belle epoque c etait...</center></p>

<span class="cadre">ici</span>

</div>

<div id="pied_de_page">
<p>Copyright "AGIB Corporation" 2005, tous droits réservés</p>
</div>

</body>
</html>

Et le Css qui va avec: (j ai mis le <span class="cadre"> En premier. C est ca qui merdouille...

.cadre
{
height: 10px;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 10px;
text-align: center;
border: 2px solid black;
color: #B3B3B3;
background-color: #626262;

}

h1
{
text-align: center; /* Le texte est centre */
color: red; /*Le texte est rouge */
font-size: 40px; /*Le texte est de 40 pixel*/
font-weight: bold; /*Le texte est en gras*/
font-family: "Times New Roman ", Arial; /* Le texte essayera de s afficher en premier en Times news roman si ca ne marche pas il choisira le deuxieme */
text-decoration: underline; /*Le texte est souligne */

}
h2
{
text-align: center;
color: blue;
font-style: italic;
font-family: "Times New Roman ", Arial;
text-decoration: underline;
}
body
{
background-color: silver;
}
a
{
text-decoration:none;
font-style: italic;
color: red;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
color: red; /* Le lien sera écrit en rouge (chage pas (exemple)) quand on pointera dessus */
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: underline;
}

#en_tete
{
border: 2px solid black;
color: #B3B3B3;
background-color: #626262;
height: 100px;
margin-bottom: 10px;
}

#menu
{
height: 10px;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 10px;
text-align: center;
border: 2px solid black;
color: #B3B3B3;
background-color: #626262;
}

#corps
{
margin-bottom: 20px;
padding: 5px;
margin-left: 20px;
margin-right: 20px;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
}

Le "ici" n est pas au milieu... Et le reste des "pb" est au debut...
Merci d avance... :euh:

Nyro Xeo

5 janvier 2006 à 15:47:03

Pour que le "ici" soit au milieu, il faut le mettre dans un bloc, et mettre un text-align:center sur ce bloc.

Ensuite, c'est <br /> et non pas </br>, et puis les <br /> sont des balises de type inline, il faut donc les mettre dans des blocs.

Ensuite, pour la position des blocs en général, je crois que tu devrais relire attentivement le TP de M@teo (voire les chapitres précédents).

Heskan

5 janvier 2006 à 15:51:20

Ok merci beaucoup.
@++