Tom's Guide > Forum > Programmation > Probleme html/css sur une decoupe photoshop Message

Probleme html/css sur une decoupe photoshop Message

Forum Programmation : Probleme html/css sur une decoupe photoshop Message

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Rapporter le message Répondre en citant le message Editer le message Supprimer le message
Ben voila mon probleme est dans le titre voici l'image du site tel que je le voudrai (le menu continue jusqu'au footer, le corp de la page aussie)

Et voici le site tel quel une fois en ligne :

je vais vous donnez mon code source si sa peut vous aidez :

index.php:

Code :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
</head>
<body>
<div id="contenu">
<img src="./images/header.jpg" alt="Header" />
<div class="menu_gauche">
<div class="menu_gauche">
<img src="./images/menu_haut5.jpg" alt="" />
<center><ul class="menus">
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
</center>
<img src="./images/menu_bas.jpg" alt="" />
<img src="./images/menu_haut5.jpg" alt="" />
<center>
<ul class="menus">
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
</center>
<img src="./images/menu_bas.jpg" alt="" />
</div>
</div>
<div id="texte">
<img src="./images/texte_haut.png" alt="" />
<center>
<div class="contentBox">
Why do I call them "CSS Scrollbars"? The <i>CSS Overflow</i>
property tells the browser what to do if the box's contents is larger
than the box itself. It behaves similar to inline frames and creates
scrollbars if required. That is why I call them CSS Scrollbars!
</div>
</center>
<img src="./images/texte_bas.png" alt="" />
</div>
<div class="clear"></div>
<div id="footer">
<img src="./images/footer.jpg" alt="" />
</div>
</div>
</body>
</html>

et le CSS:

Code :

body {
background-color:#cfcfcf; /*Couleur de fond de la page Web*/
color:#ADABAC; /*Couleur du texte*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
font-size:11px; /*Taille d’écriture*/
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
border:0px
}
div#contenu {
width:877px; /*Largeur du design*/
margin:0 auto 0 -438px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
position:absolute;
top:10px; /*25px entre le coin supérieur de l’écran et le design*/
left:50%;/*50% de marge ( cela centrera le design )*/
background-image:url('./images/background.png'); /*Motif si il y’en a un*/
border:0px solid #000000; /* Bordure encadrant le design */
}
div.menusuite {
background-repeat:repeat-y;
background-image:url('./images/menu_suite.jpg') ;
width:XXpx;
margin-top:XXpx;
margin-left:XXpx !important;
margin-left:XXpx;
}
div.menu_gauche {
background-image:url('./images/menu_font.jpg') ;
background-repeat:repeat-y;
width:XXpx;
float:left;
margin-top:XXpx;
margin-left:XXpx !important;
margin-left:XXpx;}
div.separateur {
height :6px ;
}
.contentBox {
display:block;
border-width: 1px;
border-style: solid;
border-color: 000;
padding:5px;
margin-top:5px;
width:600px;
height:480px;
overflow:scroll
}
img {
margin:0;
padding:0;}
div#texte p {
padding :5px ;
}
div#texte {
background-image:url('./images/texte_font.jpg') ;
background-repeat:repeat-y ;
width :XXpx ;
float :right ;
margin-top :XXpx ;
margin-right: XXpx !important;
margin-right:XXpx;
}
div#footer {
background-image:url('./images/footer.jpg');
width:XXpx;
height:XXpx;
}
/* Reglages personnels : */
ul , li { margin:0; padding:0; list-style-type:none; } /* Pas de marges automatique dans les listes, ni de puces */
a { color:#2375BF; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/
h1 { text-align:center; margin:0; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */
div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
img { display:block ; border:0; }/*Aucune bordure sur les <img>*/

Je remercie d'avance ceux qui pourront m'aider

cordialement aikaze

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Tu as mixé un peux partout du css, afin de te facilité la tâche je te conseil de suivre se plan :

Ton fichier CSS :

Code :

body {
background:url(TonImagesDeFond) ;
}
/* Centre est définis la largeur max de ton site */
#global {
margin: auto;
width:80%;}
/* L'entête de ton site */
#header {
margin-top:20px;
background:transparent url(TaBanniere) no-repeat ;
height:180px; /* Hauteur de ta bannière */
width:80%; /* Largeur de ta bannière en concordance avec la largeur de ton site */ }
/* La "marge" contenant tes menus */
#Menu{
float: left; /* Le menu flottera à gauche */
width: 224px; /* Très important : donner une taille au menu */ }
/* Ton premier menu */
.menu_1 {
background:url(TonImagesDuMenu1);
background-repeat: no-repeat;
width:224px; /* largeur de ton menu */
}
/* Ton deuxième menu */
.menu_2 {
background:url(TonImagesDuMenu2);
background-repeat: no-repeat;
width:224px; /* largeur de ton menu */
}
#corps {
background:url(TonImagesDuCorps);
width: 80%; /* largeur du corps, si tu met la même largeur que la largeur global,
les menus seront intégrés au corps*/
}
#footer {
background:url(TonImagesDupiedDePage);
}

Et ta page html/php :

Code :

<div id="global ">
<div id="Header">  </div>
<div id="Menu">
<div class="menu_1">
<ul>
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
</div>
<div class="menu_2">
<ul>
<li> <a href="#">Menu1</a> </li>
<li> <a href="#">Menu2</a> </li>
<li> <a href="#">Menu3</a> </li>
<li> <a href="#">Menu4</a> </li>
<li> <a href="#">Menu5</a> </li>
</ul>
</div>
</div>
<div id="Corps">
</div>
<div id="footer"> </div>
</div>

Dans le css j'ai mis le principale, ensuite à toi de définir la taille de ton text , les couleurs etc...
Il y a peut être des erreurs dans mes codes...

Message édité par M@cduf le 18-08-2009 à 21:28:29

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

(à supprimer double poste désolé.)

Message édité par M@cduf le 18-08-2009 à 21:25:32

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

merci de ta réponse je comté de toutes façon nettoyer mon code donc ton post va m'aider, mais la je pense que une balise css suffirai pour que le corps et le menus se suivent .....non?
enfin si quelqu'un a une idée merciiiiiiiiii

Répondre à aikaze

Citation :

une balise css suffirai pour que le corps et le menus se suivent .....non?

Il y a toujours une possibilité, mais le code que je t'ai proposé est utilisé sur la plupart des sites voir tous.
Ce code permet de placer à volonter à l'endroit voulu ses menus, sa bannière, sont pied de page, sont corp, tous ça en faisant que quelques modifications.

Car si tu as un soucis sur un menu, ou si tu veux le changer, le mettre à droite par exemple, tu as juste à aller sur ton fichier css et à changer quelque lignes, au lieu de tous refaire.

C'est vrai de mettre à chaque page html/php tous ces DIV c'est un peux embêtant, mais j'ai dévier ce problème en utilisant des includes; voici à quoi ressemble une de mes pages de mon site avec tous le design :

Code :

<?php include("../Includes/Entete.php" ); ?>
<?php include("../Includes/Codepremier.php" ); ?>
<div id="corps_top"><h1>Bienvenue</h1></div>
<div id="corps_contenu">
<p>TEXT/IMAGES/CONTENU DE MA PAGE</p>
<?php include("../Includes/Codefin.php" ); ?>

Et voci un l'exemple de ce que contient mon include "entete" :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
<title>GamerZ</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<link rel="shortcut icon" href="../Images/favicon.png" />
</head>
<body>

Mon design tiens sur 5 lignes à chaque pages.

Message édité par M@cduf le 19-08-2009 à 14:22:05

------------------------------ Besoin d'aide?
Je suis là!

Répondre à M@cduf

non tinkiete notre site na qu'une seule page tout est appelé en php donc pas trop de souci a ce niveau la mais moi je veu juste arriver a les faire ce suivrent

Répondre à aikaze

Double post sorry

Message édité par aikaze le 19-08-2009 à 15:55:01

Répondre à aikaze

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > Probleme html/css sur une decoupe photoshop Message

Aller à :

Aide |
Règles du forum

Il y a 212 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,429 secondes

Liens