Besoin d'aide PHP et CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Besoin d'aide PHP et CSS

wilou26

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

Publicité

Profil supprimé

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

wilou26

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

Profil supprimé

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;
}

wilou26

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

Profil supprimé

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;
}

wilou26

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

FORUM HardWare.fr

Graphisme

Web design

Besoin d'aide PHP et CSS

Sujets relatifs
aide pour retouche photo	salut j ai besoin de conseil pr entre a l ecole arc en ciel svp
besoin d'aide pour l'ouverture d'un fichier .c3	Demande d'aide avec 3DS MAX 9
Aide pour amélioration de logo	salut a tous j ai besoin de conseil pour entrer a l ecol arc en ciel
Aide pour un logo animé.	bouton de navigation!!! à l'aide svp
aide pour modifier un document
Plus de sujets relatifs à : Besoin d'aide PHP et CSS

Page générée en 0.066 secondes