Besoin d'aide PHP et CSS

Marsh Posté le 22-03-2009 à 20:52:41

Bonjour,

J'ai télécharger un kit-graphique car je n'y connais pas grand chose en php, voici le lien :
http://wilou26.free.fr/ressources/kits%20graphique/
C'est le kit appelé trash website.

J'aimerais mettre les menu qui se trouve sur la gauche aussi sur la droite. mais avec le fichier en .css je ne comprend pas trop !

Quelqu'un peut m'aider ?

Merci d'avance

Reply

Marsh Posté le 22-03-2009 à 20:52:41

Reply

Marsh Posté le 22-03-2009 à 21:00:36

1. Tu édites le fichier CSS:
2. Tu recherches le bloc suivant:

/* Corp */
/* ---- */

#left {
width: 226px;
float: left;
}

3. Tu remplaces le paramètre "float" en right

/* Corp */
/* ---- */

#left {
width: 226px;
float: right;
}

Message édité par Profil supprimé le 22-03-2009 à 21:01:07

Reply

Marsh Posté le 22-03-2009 à 21:08:32

Merci sa marche ! et si je les veut des 2 cotés ? je fait comment ?

Reply

Marsh Posté le 22-03-2009 à 21:29:12

voilà une idée qui demande quelques améliorations:

Le fichier index.html

<!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" lang="fr">
<head>
<title>Kit graphique By AKIRA-K47 pour Graphiques-Kits.com</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="style.css" />
<link rel="icon" type="image/gif" href="images/favicon1.gif" />
</head>

<body>

<div id="site">
<div id="header">
<ul id="navbar">
<li><a title="Lien" href="http://www.graphiques-kits.com/">Graphiques-Kits</a></li>
<li><a title="Lien" href="http://www.graphiques-kits.com/kits/fiche-XX.html">Télécharger ce kit</a></li>
<li><a title="Lien" href="#">Nom de la rubrique</a></li>
<li><a title="Lien" href="#">Nom de la rubrique</a></li>
<li><a title="Lien" href="#">By AKIRA-K47</a></li>
</ul>
</div>

<div id="left">
<div class="left-bloc">
<div class="left-titre"><h3>Démonstration</h3></div>
<ul>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
<div class="left-bloc">
<div class="left-titre"><h3>Du kit "Trash Website"</h3></div>
<ul>
<li>Encore un autre lien</li>
<li>Et un autre !</li>
</ul>
<ul>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>

<div id="center">
<div class="right-bloc">
<div class="right-titre"><h2>Titre du bloc</h2></div>
<div class="right-marges">
<p>Morbi lectus. Sed nulla. Aliquam consequat, odio nec luctus porttitor, velit leo pharetra velit, sagittis mattis elit erat at arcu. Vivamus magna odio, vestibulum in, nonummy nec, euismod at, odio. Sed in leo. Etiam et ligula eu turpis viverra pharetra. Cras eget velit in mauris aliquam pretium. Suspendisse potenti. Suspendisse scelerisque, erat sed blandit faucibus, ante risus aliquet ante, nec interdum magna risus et metus. Cras odio diam, porta ut, sagittis viverra, porta in, diam. Quisque egestas nisi vel arcu. Donec a ligula nec mauris ultrices eleifend. Sed eu nibh. Fusce lobortis pulvinar felis.</p>
<h3>Un sous titre ?</h3>
<p>Maecenas tortor dolor, scelerisque in, varius sed, euismod at, diam. Nunc vehicula purus in pede. Duis pharetra velit id orci. In enim dui, rhoncus ac, mollis vitae, lacinia sed, eros. Pellentesque est enim, hendrerit quis, gravida tincidunt, porttitor vitae, enim.</p>
</div>
<div class="right-bottom"></div>
</div>
<div class="right-bloc">
<div class="right-titre"><h2>Un kit graphique gratuit valide XHTML et CSS !</h2></div>
<div class="right-marges">
<p>- Kit graphique en XHTML & CSS<br />
- Un header vierge est fournis pour personnaliser votre kit<br />
- Largeur du kit : 1000px pour une navigation optimale<br />
- Ajouter, modifier ou encore supprimer des élements en quelques clics grâce à son codage en XHTML !<br />
- Formats des images : .jpg , .png , .gif , .psd<br />
- Inclut la bannière au format <strong>Photoshop PSD</strong> pour la retoucher vous meme !<br />
- Inclut un <strong>favicon</strong> ! (<a href="http://fr.wikipedia.org/wiki/Favicon" title="">?</a> )</p>
</div>
<div class="right-bottom"></div>
</div>
</div>

<div id="right">
<div class="left-bloc">
<div class="left-titre"><h3>Démonstration</h3></div>
<ul>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
<div class="left-bloc">
<div class="left-titre"><h3>Du kit "Trash Website"</h3></div>
<ul>
<li>Encore un autre lien</li>
<li>Et un autre !</li>
</ul>
<ul>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
<li><a title="Lien" href="#">Lorem ipsum dolor sit</a></li>
</ul>
</div>
</div>

<div id="footer">

<p>Votre site © 2008 - Kit graphique par <a href="http://www.graphiques-kits.com" title="Kit graphique gratuit">Graphiques-Kits</a></p>
</div>
</div>

</body>
</html>

et le fichier CSS

body {
font-family: Helvetica, Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
color: #000000;
background: black url(images/fond.jpg) repeat-x;
text-align: center;
margin: 0 auto 0;
position: relative;
}

div#site {
text-align: left;
background: url(images/site.png) repeat-y 0 0;
width: 1060px;
margin : auto;
}

/* Haut de page */
/* ------------ */

div#header {
background: url(images/header.png) no-repeat 0 0;
height : 205px;
margin : 0;
padding: 0;
}

ul#navbar li{
float: left;
width: 135px;
margin: 0 14px 0 0;
text-align: center;
font-size: 9px;
}

ul#navbar li a, ul#navbar li a:link{
font-family: Verdana;
font-size: 9px;
text-decoration: none;
color: #FFF;
}

ul#navbar li a:hover, ul#navbar li a:active, ul#navbar li a:focus {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #CCC;
}

ul#navbar{
list-style: none;
text-align: center;
padding-left: 100px;
padding-top: 180px;
font-size: 10px;
margin: 0px;
}

/* Corp */
/* ---- */

#left {
width: 226px;
float: left;
}

#right {
width: 226px;
float: right;
}

.left-bloc {
width: 211px;
background: #f0f0f0 url(images/left-bk.jpg) no-repeat bottom;
padding: 0 0 25px 0;
margin: 0 0 13px 0;
}

.left-bloc ul {
list-style: none;
padding: 0 15px 0 15px;
margin: 12px 0 5px 0;
}

.left-bloc p {
padding: 0 15px 0 15px;
margin: 0;
}

.left-titre {
background: #000 url(images/left-top.png) no-repeat;
height: 37px;
}

.left-titre h3 {
margin: 0;
padding: 11px 0 0 0;
text-align:center;
font-size: 1.2em;
color: white;
}

/* ------------- */

#center {
width: 600px;
float: left;
}

.right-bloc {
width: 659px;
background: url(images/right-bk.jpg);
padding: 0 0 0px 0;
margin: 0 0 13px 0;
}

.right-titre {
background: #000 url(images/right-top.png) no-repeat bottom;
height: 36px;
}

.right-titre h2 {
margin: 0;
padding: 11px 22px 0 22px;
text-align:left;
font-size: 1.2em;
color: #ff6633;
}

.right-bottom {
background: #000 url(images/right-bottom.jpg) no-repeat;
height: 15px;
}

.right-marges {
padding: 0 22px 12px 22px;
}

.right-bloc h3 {
font-size: 1.2em;
color: #849314;
margin: 3px 0 0 0;
padding: 0;
padding-bottom: 0.3em;
border-bottom: 1px dashed #C0C0C0;
}

/* Bas de page */
/* ----------- */

div#footer {
background:url(images/footer.png) no-repeat 0 0;
height : 101px;
clear:both;
}

div#footer p {
text-align: center;
font-size: 0.9em;
padding-top:40px;
clear:both;
color:#666666;
}

div#footer a {
color : #666666;
text-decoration:none;
}

/* Généralités */
/* ----------- */

img { border: 0; }

p {
margin: 0px;
padding: 15px 0 10px 0;
}

a {
color : #000000;
font-family:verdana;
text-decoration:none;
}

a:hover , a:active , a:focus {
color : #cccc33;
font-weight : bold;
text-decoration:none;
}

Reply

Marsh Posté le 22-03-2009 à 21:55:49

Génial merci beaucoup,

Il me reste une dernière chose comment faire pour centrer le haut du site ?

Merci déjà pour tout ce que tu as fait

Reply

Marsh Posté le 22-03-2009 à 22:22:39

Simple, remplace ton fichier CSS par ça:

body {
font-family: Helvetica, Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
color: #000000;
background: black url(images/fond.jpg) repeat-x;
text-align: center;
margin: 0 auto 0;
position: relative;
}

div#site {
text-align: left;
background: url(images/site.png) repeat-y 0 0;
width: 1060px;
margin : auto;
}

/* Haut de page */
/* ------------ */

div#header {
background: url(images/header.png) no-repeat center 0;
height : 205px;
margin : 0;
padding: 0;
}

ul#navbar li{
float: left;
width: 135px;
margin: 0 14px 0 0;
text-align: center;
font-size: 9px;
}

ul#navbar li a, ul#navbar li a:link{
font-family: Verdana;
font-size: 9px;
text-decoration: none;
color: #FFF;
}

ul#navbar li a:hover, ul#navbar li a:active, ul#navbar li a:focus {
font-family: Verdana;
font-size: 10px;
font-weight: bold;
color: #CCC;
}

ul#navbar{
list-style: none;
text-align: center;
padding-left: 180px;
padding-top: 180px;
font-size: 10px;
margin: 0px;
}

/* Corp */
/* ---- */

#left {
width: 226px;
float: left;
}

#right {
width: 226px;
float: right;
text-align:right;
}

.left-bloc {
width: 211px;
background: #f0f0f0 url(images/left-bk.jpg) no-repeat bottom;
padding: 0 0 25px 0;
margin: 0 0 13px 0;
}

.left-bloc ul {
list-style: none;
padding: 0 15px 0 15px;
margin: 12px 0 5px 0;
}

.left-bloc p {
padding: 0 15px 0 15px;
margin: 0;
}

.left-titre {
background: #000 url(images/left-top.png) no-repeat;
height: 37px;
}

.left-titre h3 {
margin: 0;
padding: 11px 0 0 0;
text-align:center;
font-size: 1.2em;
color: white;
}

/* ------------- */

#center {
width: 600px;
float: left;
}

.right-bloc {
width: 659px;
background: url(images/right-bk.jpg);
padding: 0 0 0px 0;
margin: 0 0 13px 0;
}

.right-titre {
background: #000 url(images/right-top.png) no-repeat bottom;
height: 36px;
}

.right-titre h2 {
margin: 0;
padding: 11px 22px 0 22px;
text-align:left;
font-size: 1.2em;
color: #ff6633;
}

.right-bottom {
background: #000 url(images/right-bottom.jpg) no-repeat;
height: 15px;
}

.right-marges {
padding: 0 22px 12px 22px;
}

.right-bloc h3 {
font-size: 1.2em;
color: #849314;
margin: 3px 0 0 0;
padding: 0;
padding-bottom: 0.3em;
border-bottom: 1px dashed #C0C0C0;
}

/* Bas de page */
/* ----------- */

div#footer {
background:url(images/footer.png) no-repeat 0 0;
height : 101px;
clear:both;
}

div#footer p {
text-align: center;
font-size: 0.9em;
padding-top:40px;
clear:both;
color:#666666;
}

div#footer a {
color : #666666;
text-decoration:none;
}

/* Généralités */
/* ----------- */

img { border: 0; }

p {
margin: 0px;
padding: 15px 0 10px 0;
}

a {
color : #000000;
font-family:verdana;
text-decoration:none;
}

a:hover , a:active , a:focus {
color : #cccc33;
font-weight : bold;
text-decoration:none;
}

Reply

Marsh Posté le 22-03-2009 à 22:39:10

Parfait, c'est exactement ce que je voulais !!
Merci beaucoup !

Reply

Besoin d'aide PHP et CSS

Sujets relatifs:

Leave a Replay