28220 sujets

CSS et mise en forme, CSS3

Ebauche de site

Bonjour tout le monde.

Bon, voilà le topo : j'ai entièrement refait le design, pour ce faire, une image photoshop (http://www.lemondestarcraft.com/ElementsDivers/anichiban.psd).

Je suis donc passé à son élaboration niveau code, et j'éprouve quelques difficultés sur certains points Smiley smile
Je vous donne le code complet et je vous dit là ou j'ai des problèmes, au fur et à mesure.

Le css : 

BODY
{
    font-FAMILY: Miriam;
    scrollbar-face-color: #931493;
    scrollbar-shadow-color: #c489ff;
    scrollbar-highlight-color: #c489ff;
    scrollbar-3dlight-color: #c489ff;
    scrollbar-darkshadow-color: #c489ff;
    scrollbar-track-color: #c489ff;
    scrollbar-arrow-color: #c489ff; backstyle=fixed;
    scrollbar-base-color: #c489ff;
    scrollbar-track-color: #c489ff;
}


A
{
    border-top-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    text-decoration:none;
}




A:link
{
    font-weight: red;
    border-left-width: 1px;
    border-bottom-width: 1px;
    text-transform: none;
    color: #9100d0;
    border-right-width: 1px;
}





A:hover
{
   text-decoration:underline;
}




A:visited
{
    color: #1d186d;
}



                         

IMG
{
    border-right: 0px;
    border-top: 0px;
    border-left: 0px;
    border-bottom: 0px

}




input {
  border:#e0d3ff 1px dashed;
}


Rien de spécial ici.



La page principale. Alors, oui, je sais, la méthode de tout mettre en une seule variable n'est pas la bonne, mais on m'a appris comme ca, et tout changer serait extremement laborieux Smiley ohwell 

<?php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
session_start;
include ("config.php");
            

$Theme .= '

<html>

<head>


<link href="Anichiban.css" rel="stylesheet" type="text/css">



<style type="text/css">

.contenucentral {
  background-color : #00167c;
  float: center;
  padding: 0px;
  width: 95%;
}


.secondcontenu {
  float:center;
  width:91%
}


.menu {
  margin: 2px;
  float: left;
  width: 100px;
  text-align: center;
  font-family: Cheri Liney;
  font-size: 20pt;
  font-weight: bolder;
  color:#1d186d;

}




hr {
clear: both;
visibility: hidden;
}




.milieu {
  background-image:url(Elements/ani/images/anichiban_11.jpg);
  background-repeat:repeat-y;
  background-color : #c0bbf3;
  float: left;
  padding: 1px;
  width: 79%;
  border: 1px solid;
}


.conteneurmenus {
  background-color:#bdbaf1;
  padding:0px;
  width:100%;
}


.droite {
  margin-left: 79%;
  padding: 1px;
  text-align:left;
}


.droitebas {
  margin-left: 79%;
  padding: 1px;
  text-align:left;
}



.droitecomble {
  float:center;
  border:1px solid;
}







.bas {
  background-color : #9f9be8;
  width: 100%;
  text-align: center;
  clear:both;
}

//déjà, là, je sens que j'ai trop de div [ohwell]
</style>

<title>

Anichiban

</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" Content="bla bla bla">

<meta name="keywords" Content="bla">

<meta name="author" CONTENT="Sha-ka">

<meta name-equiv="Content-Language" content="fr">

</head>
<font face="Miriam"></font>
<body bgColor="#9f9be8">

';



    $Theme.= '
    <div align="center">
    <div class="contenucentral">
    <img src="Elements/Anichiban.jpg" title="Anichiban" alt="Anichiban" usemap="#anichiban" />

    <MAP NAME="anichiban">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="828,141, 850,202">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="820,46, 850,105">

     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,1, 850,44">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,203, 849,250">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,105, 849,140">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="0,0, 761,252">
     <AREA SHAPE="RECT" HREF="?page=Membres&num=1" COORDS="762,141, 827,201">
     <AREA SHAPE="RECT" HREF="?page=Contacts" COORDS="762,45, 818,104">
     </MAP>


     <div class="secondcontenu">

    ';



    $Theme.= '
/*là, pour des éventuels futurs changement(s), j'ai preferé mettre des liens normaux, sans image. Ca rend moins bien, est-ce possible de faire un effet du même type que sur l'image ?*/
         <div class="milieu">
         <p class="menu"><a href="?page=Index2">Index</a></p>
         <p class="menu"><a href="?page=News&num=1">News</a></p>
         <p class="menu"><a href="?page=Forums">Forum</a></p>
         <p class="menu"><a href="?page=Liens">Liens</a></p>

         <hr />
         ';
         $page = isset($_GET['page']) && $_GET['page'] != '' ? $_GET['page'] : ';

             $page = htmlentities($page)';

             

             if(file_exists($page . '.php') || file_exists($page . 'htm')) {

                 include($page . '.php'); 

             } 

             else{
                 include('News.php');
             }

         $Theme.= '

         </div>

         <div class="conteneurmenus">

         <div class="droite">
         <img src="Elements/ani/images/anichiban_06.jpg" title="anichiban_06" alt="" />
         ';
/*aucune des images éléments n'est nommée, mais comme rien n'est définitif hein ^^*/



         if(isset($_COOKIE['Membre'])) {

         include("Controle.php");

         if($SuperAdmin=="O") {
           $Theme.= '<a href="?page=Admins">Admin</a><br />';
         }
         else {}
         }
         else {}



         $Theme.= '
         <img src="Elements/ani/images/anichiban_10.jpg" title="anichiban_10" alt="" />
         ';

         /*
Gros problème : au lieu de l'image, j'aimerais des liens textes, pour pouvoir plus facilement faire des changements. De plus, pour le menu membres, je suis obligé de faire autrement, puisque si le visiteur n'est pas enregistré, il doit voir d'autres renseignements (que j'ai sur une autre page, mais pas du tout actualisée, elle est en rapport avec la précédente version, mais de toutes facons il n'y a que 2 liens : un pour s'inscrire, l'autre pour pouvoir directement se connecter). 
Comment faire ? Si j'enlève l'image de fond, l'image est coupé (par rapport au texte), et surtout, je n'arrive pas à bien aligner l'image par rapport au reste...

<a href="?page=Index2">Index</a><br />
         <p class="menusdroite">
         <a href="?page=News&num=1">News</a><br />
         <a href="?page=Forums">Forum</a><br />
         <a href="?page=Liens">Liens</a><br /><br /><br />



         <a href="?page=ListeSites">Liste des sites</a><br />
         <a href="?page=SiteCreer">Créer un site</a><br />
         <a href="?page=Musiques">Section musiques</a><br />
         <a href="?page=Videos">Section vidéos</a><br />
         <a href="?page=Rechercher">Rechercher</a><br />
         <a href="?page=Images&num=1">Images diverses</a><br />
         </p>


         */
         $Theme.= '
         <img src="Elements/ani/images/anichiban_13.jpg" title="anichiban_13" alt="" width="166" height="24" border="0" />
         </div>

         <div class="droitebas">
         <img src="Elements/ani/images/anichiban_14.jpg" title="anichiban_14" alt="" width="166" height="224" border="0" />
         <img src="Elements/ani/images/anichiban_14.jpg" title="anichiban_15" alt="" />
   <div class="droitecomble"></div>
         </div>

         </div>




    <div class="bas">
    <table width="90%" border="0" align="center"><tr><td>
    <br /><div align="center">Webmaster : <a href="mailto:devil-star@caramail.com">Sha-ka </a>
    <a href="#top">
    <img src="Elements/fleche_024.gif" title="Haut de page" alt="Haut de page" /></a>



    <br />
    </div></td></tr></table>
    </div>

    </div>
    </div>
    </div>


';
/*Le menu du bas n'a pas encore été remanié. 
De plus, concernant ce bas de page, 2 problèmes (qui n'en est en fait qu'un seul) : si le contenu est plus long que le menu, le menu se coupe, j'aimerais que l'image 15 (qui est en fait 2 traits verticaux entouré et entourant du violet) se prolonge jusqu'à ce qu'elle touche le menu du bas. 
De même, si le menu de droite est plus long que le contenu, le border coupe le div, et même si ca, ce n'est pas très grave (puisque le reste du contenu est à peu près de la même couleur), c'est quand même gênant dans une certaine mesure*/



$Theme .= "</body>

</html>";




echo "$Theme";
mysql_close();

?>


Voilà, donc, récapitulons : les liens que je n'arrive pas à rendre aussi joli que sur l'image, le texte sur les images des menus, le menu du bas et le code en lui même (à mon avis, je pourrais arriver à quelque chose de plus facile). Ah oui, et en même temps, vous pouvez me dire si vous aimez ce design, tant qu'à faire ;p
Merci d'avance Smiley smile
Juste en passant :

Si tu as la chance/les moyens de t'offrir pour noël une licence Photoshop c'est super pour toi ! Smiley lol

Mais ce n'est pas le cas de tout le monde et pas besoin de citer Gimp ni MS Paint Smiley lol

Donc une image aurait suffi au format PNG (libre vs propriétaire) pour qu'elle soit visible au plus grand nombre c'est bien là ton objectif ! Smiley cligne Smiley smile
Administrateur
Bonjour et bienvenu sur ce Forum,

je t'invite à venir te présenter sur le [Topic unique] Le sujet des présentations dans le Bar du Forum.

Pour ce qui est du fichier au format PSD, un *lien* vers une image aurait été effectivement préférable, mais Photofiltre ou IrfanView l'ouvrent sans problème. Par contre ce n'est pas garanti que tout y soit et qu'il ne manque pas un calque ou des transparences à l'affichage et surtout ça demande un programme supplémentaire que tous n'auront pas ...
Oups là, en effet, désolé.
Voici un autre lien pour l'image, qui cette fois donne sur un .png Smiley smile : http://www.lemondestarcraft.com/ElementsDivers/anichiban.png

Pour la présentation, je suis Sha-ka, il me semble que je m'etais déja présenté auparavant mais il se trouve que je n'arrive plus à récupérer mon mot de passe (et impossible de les faire renvoyer via caramail ou hotmail... Heureusement j'ai encore une autre adresse ^^), mais si je ne l'ai pas fait, je vais donc aller le faire Smiley smile

edit : désolé, j'ai donné un mauvais lien, cette fois c'est la bonne ;p
Modifié par Sha-kaperdusonpass (04 Aug 2005 - 16:52)
Sha-kaperdusonpass a écrit :

Le css : 

BODY
{ font-FAMILY: Miriam;


Rien de spécial ici.


Typo Miriam utilisée pour la langue indienne ?

Or sur l'image "Photoshop" de ton site les liens-images du menu sont en caractère occidental. Smiley lol

Précise par défaut le choix de la police : serif / sans-serif c'est encore mieux Smiley cligne
Modifié par Rea (04 Aug 2005 - 17:39)
Ok merci, et en même temps je viens de comprendre pourquoi on me faisait des remarques du genre "change cet horrible times new roman" alors que je l'avais fait il y'a longtemps : si Miriam n'est pas installé chez l'utilisateur, ben ca met la police par défaut ^^
Sujet clos
Aller à