Aide pour faire une mise en page :-)

Aide pour faire une mise en page :-) - HTML/CSS - Programmation

Marsh Posté le 14-08-2006 à 16:22:12    

Salut a tous
 
 Je suis novice et après avoir essayé de créer un site web avec Namo Editor 6, j’ai décidé de le laisser tomber et d’apprendre le XHTML et CSS afin de suivre les conseils que j’ai vu sur le forum :-)
Donc mon problème est le suivant, au départ j’allais utiliser un tableau pour faire ma mise en page MAIS j’ai lu que les tableaux sont à éviter pour faire une mise en page, donc ma question est : comment faire la mise en page en xhtml et css et avoir le même résultat que mon fichier (tester le code)
En bref, comment feriez vous pour obtenir le même résultat que le fichier?
 
Merci d’avance
 
<html>
 
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Bienvenue</title>
<meta name="generator" content="Namo WebEditor(Trial)">
</head>
 
<body bgcolor="#333333" text="black" link="blue" vlink="purple" alink="red" topmargin="40" marginheight="40">
<table align="center" border="1" width="950" height="550">
    <tr>
        <td width="210" height="112" align="center" valign="middle" bgcolor="white">IMAGE</td>
        <td width="530" height="112" align="center" valign="middle" bgcolor="white">IMAGE</td>
        <td width="210" height="112" align="center" valign="middle" bgcolor="white">
            <p>IMAGE</p>
        </td>
    </tr>
    <tr>
        <td width="210" height="30" bgcolor="white">&nbsp;&nbsp;<b><font color="#333366">&nbsp;&nbsp;Présentation</font></b></td>
        <td width="530" rowspan="4" valign="top" bgcolor="white">
            <p>&nbsp;</p>
            <p align="center">IMAGE</p>
            <p>&nbsp;</p>
            <p align="center">La largeur de la fenetre est de 950</p>
            <p align="center">La hauteur de la fenetre est de 550</p>
            <p>&nbsp;</p>
            <p><b><u><span style="font-size:14pt;">Titre</span></u></b></p>
            <p align="justify" style="text-indent:20; line-height:150%;">2 PARAGRAPHES DE TEXTE</p>
        </td>
        <td width="210" rowspan="4" bgcolor="white">
            <p align="center">IMAGE</p>
        </td>
    </tr>
    <tr>
        <td width="210" height="211" valign="middle" nowrap bgcolor="#333399" style="font-weight:bold; color:white;">
            <table border="0" width="210" cellspacing="5" style="font-weight:bold; color:white;">
                <tr>
                    <td width="204">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 1 + sous menu</td>
                </tr>
                <tr>
                    <td width="204">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 2</p>
                    </td>
                </tr>
                <tr>
                    <td width="204">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 3</p>
                    </td>
                </tr>
                <tr>
                    <td width="204">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 4</p>
                    </td>
                </tr>
                <tr>
                    <td width="204">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 5</td>
                </tr>
                <tr>
                    <td width="204">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 6</td>
                </tr>
                <tr>
                    <td width="204">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 7</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="210" height="30" bgcolor="white">&nbsp;&nbsp;&nbsp;&nbsp;<b><font color="#333366">Information</font></b></td>
    </tr>
    <tr>
        <td width="210" height="130" bgcolor="#333399">
            <table align="center" border="0" width="210" cellspacing="5">
                <tr>
                    <td width="204" style="font-weight:bold; color:white;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 8</p>
                    </td>
                </tr>
                <tr>
                    <td width="204" style="font-weight:bold; color:white;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 9</p>
                    </td>
                </tr>
                <tr>
                    <td width="204" style="font-weight:bold; color:white;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 10</p>
                    </td>
                </tr>
                <tr>
                    <td width="204" style="font-weight:bold; color:white;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 11</p>
                    </td>
                </tr>
                <tr>
                    <td width="204" style="font-weight:bold; color:white;">
                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Item 12</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<p>&nbsp;</p>
</body>
 
</html>

Reply

Marsh Posté le 14-08-2006 à 16:22:12   

Reply

Marsh Posté le 14-08-2006 à 18:27:44    

ca serait mieux que tu files directement l'adresse de ton site, car comme ça on en ferait qu'une bouchée de ta mise en page :D

Reply

Marsh Posté le 14-08-2006 à 18:41:37    

Justement, j'essai de faire un site et donc il est tres loin d'etre en ligne  :) meme tres tres loin :)
Tu peux tester le code dans wordpad ou autre pour faire le fichier html pour avoir une idée de ce que je souhaite
Merci a celui qui pourra m'eclairer :??:

Reply

Marsh Posté le 15-08-2006 à 12:02:59    

C'est si difficile que ca a faire?
 
Je pensais qu'il y avait des boss en XHTML et CSS sur ce forum!! Peut etre sont ils tous en vacance?
Je suis en train d'essayer avec des blocs a l'aide de div mais je me demande si je dois aussi ajouter des div a l'interieur de mon menu pour faire les blocs de titre?
 
Merci a ceux ki ne sont pas en vacance :)


Message édité par Teddyted le 15-08-2006 à 12:04:05
Reply

Marsh Posté le 15-08-2006 à 14:14:45    

Ya des boss en xHTML/CSS ici, mais 1 ils sont en vacances ou occupé comme moi pour l'instant
mais il manque des choses dans ta charte
par exemple les cases ou il y a marqué "image"
on ne sait pas exactement ce que ça sera, et une mise en page xHTML/CSS peut changer selon le choix fait ici
 
tu aurais au minimum un visuel

Reply

Marsh Posté le 15-08-2006 à 17:31:00    

Ok, ou c'est indiqué image, je vais mettre des images au format jpg ou gif qui seront centrés au milieu des blocs.
Donc, j'ai essayé de refaire la meme mise en page en utilsant des "div" et j'ai rencontré les problemes suivant :
 
- Je n'arrive pas a centrer la page horizontalement et verticalement
-Quand je rajoute mon menu de gauche tout les blocs se decalent
 
 
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed