XHTML / CSS et Photoshop
Hors ligneWAR10CK Le 04/11/2007 à 18:03 Profil de WAR10CK Configuration de WAR10CK

Salut à tous ;

Aujourd'hui, j'ai eu l'idée de me créer un nouveau design, une fois ce design terminé, je l'ai découpé avec photoshop, et cela m'a créé un fichier image avec toutes mes découpes et une page HTML.

Ce que je cherche à faire :

_ Organiser mes images dans l'ordre.
_ Etendre mon design à 100%, pour qu'il puisse prendre toute la taille de la page web.

Voici mon design : www.linorg.net/design.jpg

Je suis allé visité le Site du Zéro, j'ai trouvé comment faire pour l'étendre, mais organiser mes images ...

Voici mon code HTML :

<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Tableau_01" width="1000" height="892" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/barre_menu.gif" width="1000" height="49" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/espace_haut_blanc.gif" width="1000" height="5" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/wallpaper_gauche.gif" width="150" height="784" alt=""></td>
<td>
<img src="images/header.gif" width="702" height="166" alt=""></td>
<td rowspan="2">
<img src="images/wallpaper_droit.gif" width="148" height="784" alt=""></td>
</tr>
<tr>
<td>
<img src="images/corps.gif" width="702" height="618" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/espace_blanc_bas.gif" width="1000" height="5" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/footer.gif" width="1000" height="49" alt=""></td>
</tr>
</table>
</body>
</html>

J'ai fais une feuille CSS et une page XHTML avec des <div id=""></div> mais en vin, rien n'a fonctionné

Je m'en remet à vous

Voici les images :

http://www.linorg.net/Th0F0x/ tout les noms de parties du design sont en gras dans le code html au dessus :)


Voilou


Th0F0x
Hors ligneAnthony Le 04/11/2007 à 19:49 Profil de Anthony Configuration de Anthony

Fou du volant
Salut Th0fox,

Bon voilà ce que ça donne chez moi :


<html>
<head>

<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
     margin:0;
     background:#FFF;
     width:100%;
}
#header{
     height:49px;
     width:1000px;
     background:url(http://www.linorg.net/Th0F0x/barre_menu.gif) no-repeat;
}
#conteneur_general{
     width:1000px;
     margin:0 auto 0 auto;
}
#barre_header{
     height:5px;
     width:1000px;
     background:url(http://www.linorg.net/Th0F0x/espace_haut_blanc.gif) no-repeat;
}
#conteneur{
     width:852px;
}
#menu{
     float:left;
     height:766px;
     width:150px;
     background:url(http://www.linorg.net/Th0F0x/wallpaper_gauche.gif) no-repeat;
}
#sous_header_droite{
     float:left;
     width:702px;
     height:166px;
     background:url(http://www.linorg.net/Th0F0x/header.gif) no-repeat;
}
#droite{
     width:148px;
     height:600px;
     float:right;
     background:url(http://www.linorg.net/Th0F0x/wallpaper_droit.gif) no-repeat;
}
#e_bas,#bas{
     clear:both;
     width:1000px;
}
#e_bas{
     height:5px;
     background:url(http://www.linorg.net/Th0F0x/espace_blanc_bas.gif) no-repeat;
}
#bas{
     height:49px;     
     background:url(http://www.linorg.net/Th0F0x/footer.gif) no-repeat;
}
</style>
</head>

<body>
     <div id="conteneur_general">

          <div id="header"></div>
          <div id="barre_header">
</div>
          <div id="conteneur">

               <div id="menu">

               </div>
               <div id="sous_header_droite">


               </div>
               <div id="contenu">


               </div>
               <div id="droite">


               </div>
          </div>

          <div id="e_bas">

          </div>
     </div>

</body>
</html>



a +
--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels