Partage

comment réussir à centrer ce design ?

11 mai 2006 à 23:04:05

Hello !

Bon j'ai tenté un nouvel essai de design, seul hic tout est en absolu donc "collé" sur la gauche de la page ! Mais je souhaiterais savoir si avec le code ci dessous il est possible d'y remédier :

en fait je souhaiterais le centrer en milieu de page, pas en faire un designe xtensible juste le centrer totalement pour éviter le "collé à gauche"

De même je souhaiterais mettre du texte avec <p> et </p> à droite de la femme sur l'espace blanc sous le menu pour y faire mon corps de texte. Quelle sera la bonne manière à adopter et où le poser ?

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

<style type="text/css">

</style>

</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div class="Tableau_01">
<div class="site-eternam3-01">
<img src="site/site_eternam3_01.gif" width="1024" height="98" alt="">
</div>
<div class="site-eternam3-02">
<img src="site/site_eternam3_02.gif" width="96" height="670" alt="">
</div>
<div class="site-eternam3-03">
<img src="site/site_eternam3_03.gif" width="864" height="47" alt="">
</div>
<div class="site-eternam3-04">
<img src="site/site_eternam3_04.gif" width="64" height="670" alt="">
</div>
<div class="site-eternam3-05">
<img src="site/site_eternam3_05.gif" width="864" height="623" alt="">
</div>
</div>

</body>
</html>

l'aperçu du code en "vrai est ici :

le lien vers la page

Donc étant donné ma condition de débutant si un codeur fou possède la solution si cela existe (j'en doute mais bon :/)

merci !

PS : je sais j'ai "triché" vu que j'ai extrait mon design via image ready... mais vu la complexité des tranches :s...

gcyrillus

11 mai 2006 à 23:15:25

Bonjour,
a moins de refaire la decoupe et le codage pour toi il y a peu de solution a partir de ton code .
Reprend le tuto du site et apprend a positionné tes differentes zones sans faire usage des position absolutes, passe les images en background quand elles sont la purement pour le design, etc ...

Pour un debutant ce design est assez difficile a codé , pas le centrage de la page , mais je pense au menu en image , les zones de textes etc ...

Vraiment, le tuto te sera tres utiles et aprés quelques essais et experience tu devrais arrivé a teneter ton codage et decoupe seul, ensuite le forum pourra plus facilement t'aider sur des points que tu ne comprends pas trop ou n'arrive pas a maitriser.

++

edit, ah oui, n'oubli un doctype

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

pikachu

12 mai 2006 à 7:01:56

Ok je me doutais que cela n'alait pas être chose simple à faire

J'ai jeté un oeil au lien présent dans ta signature et je suis tombé sur :

ce modèle

C'est un peu le résultat voulu mais : je voulais savoir si il était possible de faire le même modèle en mettant deux div l'un à côté de l'autre à gauche (ex deux menus collés l'un à l'autre), le fixe sur la droite. De cette façon je pourrais revoir ma découpe pour faire rentrer la femme en deux tranches sur les deux div en question...

Idem pour le titre : mettre deux div titre l'un au dessus de l'autre pour 1 : caler mon logo/titre et celui en dessous le fractionner pour y rentrer les images de mon menu...(une fractiion = une image menu qui sera transformée en lien...

C'est une question à deux balles je le reconnais mais bon...

Les tutos ça fait un moment que je les parcoure, je les essaie mais à force je me mélange un poil les pinceaux

merci : )

mannia

12 mai 2006 à 9:09:18

le problème pour centrer ton design c'est les dimension tu a du faire un design de 1024 de large ??

Il faut ke tu le fasse sur 1000 et il sera pil poil.

jp949

12 mai 2006 à 11:52:20

il sera pil poil en 1024 pas en 1280.
de toute manier c'est vrai qu'il y a des zones que l'on peut supprimer dans ton diz , on doit pouvoir approcher les 800px de large ce qui permettra une mise en page centrée et meme fluide et extensible.

pikachu

12 mai 2006 à 13:16:43

erf bien vu j'ai tout réalisé en 1024 :-°

! Bon j'ai fouiné sur le net à la recherche d'un gabarit facile à modifier. Cela me permet d'avoir une base solide et de modifier en voyant le résultat

Je vous tiens au courant de l'avancée

edit : bon j'ai tenté avec des modèles préconçus mais j'ai beau tester je me plante enfin disons que j'y arrive plus ou moins mais le code n'est pas bon c'est du bidouillage de débutant. Donc j'ai essayé de mettre mon design sur un modèle:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer.</title>

<style type="text/css">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 162px;
background-image: url(eternam_essai_01.gif);
background-repeat: no-repeat;
}
#haut {
width: 1000px;
height: 54px;
background-image: url(eternam_essai_02.gif);
}
#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 177px;
height: 552px;
background-image: url(eternam_essai_03.gif)
}
#droite {
float:right;
width: 269px;
height: 559px;
background-image: url(eternam_essai_04.gif)
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}

/*]]>*/
</style></head><body>
<div id="conteneur">
<div id="header">
header <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
(voir tous les modèles)</a>
</div>
<div id="haut">
<ul id="menuhaut">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="gauche">
<p>
menu gauche
</p>
<p>
largeur fixe : 150px avec utilisation de la propriété float:left;
</p>
<ul id="menugauche">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="droite">
<p>
menu droit
</p>
<p>
largeur fixe : 150px avec utilisation de la propriété <code>float:right;
</p>
<ul id="menudroit">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
</li>
</ul>
</div>
<div id="centre">
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété clear:both;
sur le pied de page, permet à ce dernier de "pousser" le conteneur pour
intégrer les éléments en float. Le pied de page est correctement
positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
</div>
<div id="pied">
pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;)
</div>
</div>

</body></html>

la page est à cet endroit

Première question:
Donc comme vous pouvez le constater, j'aimerais réussir à mettre la colonne située à droite collée à celle de gauche pour réunir mon perso... J'ai tenté des float et autres mais le résultat je crois que je m'y prend mal.

Seconde question :
Le menu horizontal appelé "haut" : je souhaiterais pouvoir diviser cette partie en divers cellules afin de mettre dans chacunes la tranche d'image news, archives etc etc. La découpe n'est pas encore faite puisque le seul moyen de rentrer ce menu c'est d'un seul bloc donc pas possible de faire des tranches destinées à devenir des liens. Donc commment mettre le code pour y parvenir ?

de même ce type de modèle : fixe avec 3 colonnes impossible d'arriver à trouver le réglage pour caser mes deux colonnes avec le perso l'un à côté de l'autre et le texte à droite....

mannia

12 mai 2006 à 20:06:09

je réflechie a ton ti prob et je te tien au courant car la ma memoire est hs lol

pikachu

12 mai 2006 à 21:56:26

pas de soucis, c'est déjà sympa d'y réfléchir

! merci ; )

gcyrillus

13 mai 2006 à 0:37:11

bonjour,
pour deplacer les 2 colonnes de menus cote a cote a gauche,
quelques soit le gabarit utilisé, il te faut leur appliquer a toutes les deux un float left; et modifier les marges du #centre, 0 a droite et la largeur des 2 colonnes a gauches .
par exemple sur la base d'alsacreation que tu as mise en ligne:

#centre {
background-color:#9999CC;
margin-left: 446px;/* modif ici */
margin-right:0px;/* modif ici */
}
#gauche {
float:left;
width: 177px;
height: 552px;
background-image: url(eternam_essai_03.gif)
}
#droite {
float:left;/* modif ici */
width: 269px;
height: 559px;
background-image: url(eternam_essai_04.gif)
}

Une petite relecture/recherche sur les flottants est peut-etre a envisagé ? :).

<edit> heu, je n'ai pas trop suivi, mais ne voulait tu pas centré ta page a l'origine ?
De plus ta page en ligne supporte mal la fluidité pour le moment.
fait une recherche sur banniere fluide ...

pour ton menu, ton image peut-etre appliqué en background a ul, , ensuite tu positionne et dimensionne les li et liens dessus , puis tu "cache le texte

Bon desolé , je te renvoi sur un lien d'un de mes sites : http://gcyrillus.free.fr/trucs_css/lien-avec-image-en-roll-over.html
la technique est la et bien sur modifiable, la partie rollover ne t'interesse pas a priori .
Cette page date de quelques mois deja et il y figure une erreur dans le css : un display:block; et un float:left; ensemble, hmmm ! (en attendant que je mette a jour, le display:block est inutile, le float:left; suffit a dimensionné les balise ...).
Je risque de ne pas etre present ces prochains jours, si tu as besoins d'explications supplementaires eventuelles , envoi moi un mp, que je pense a revenir, retrouvé le topic . sinon, bah , il y a plein de monde ici et competents qui peuvent t'aider aussi comme tu l'as deja remarqué

</edit>

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

pikachu

13 mai 2006 à 12:17:42

Merci infinimment pour ces conseils, les tutos sont très utiles mais une fois que l'on rencontre des petits soucis hors sentiers ça rend les choses plus complexe je vais déjà essayer d'avancer avec ce que tu m'as donné

C'est en manipulant qu'on progresse !

WhyNot

13 mai 2006 à 12:53:26

Oui, essaie de toujours avoir le moins d'image pour ton design, quit à réfléchir un peu avant de te lancer dans le codage...

pikachu

14 mai 2006 à 0:14:46

J'ai essayé d'écouter vos conseils pour charger moins

J'ai aussi adapté un design de gcyrillus (désolé :/)pour essayer de modifier déjà un kit existant. Déjà avec ça j'ai passé du temps mais j'avais l'avantage d'avoir des repères net pour ne pas me planter. Bon j'ai tenté de mettre une jolie bordure maison mais j'ai trop galéré donc je l'ai enlevé, j'ai réussi à adapter en partie le menu horizontal (merci gcyrillus une fois de plus ^^)...

Je suis trop claqué pour en dire plus

je dépose le code css pour que vous puissiez corriger mes éventuels fautes de codes car vos avis me sont encore et toujours trsè utiles

...

La page est : à cet endroit

le code css :

html, body {margin:0; padding:0; height:100%;background-color: #d7dada;font-family:verdana;}
#global
{
width:1000px;
background-color: white; center center ;
margin: auto ;
height:auto!important;
height:100%;
min-height:100%;
}

#header
{
height: 222px;
background: url("images/header.png") center red no-repeat;
margin:0 auto;
}

#block_gauche {

width:167px;
background-image: url("images/menu2.png");
background-repeat:repeat-y;
float:left;
margin-right:0px;
margin-top:0px;
padding:0;
font-family: verdana;
font-size : 12px;
text-align:left;

}

.menu_gauche
{
width: 167px;
height:110px;
background-image: url("images/menu1.png");
background-position:top 0;
background-repeat: no-repeat;
margin:0;
line-height:30px;
font-family: verdana;
font-size : 12px;
color: black;

}

.bas
{
margin:0;
background-image: url("images/menu3.png");
background-position:0px bottom;
background-repeat: no-repeat;
height: 42px;

}

ul {
list-style-type:none;
line-height:15px;
}

a {
text-decoration:none;
color:white;
font-size:12px;

}

a:hover {
color:black;
}

#menuh {
padding:10px;
text-align:center;
background-image:url(images/menu_h.png);height:41px;
background-repeat: no-repeat;
width:787px;
margin-left: 190px;

}

#menuh ul {
float:left;
list-style-type:none;
display:block;
padding:0;
margin:0;
}

#menuh ul li {
float:left;
display:block;
margin:0;
padding:0;
}

#menuh a {
color:white;
text-decoration:none;
display:block;
float:left;
margin:0px ;
height:41px;

}
#menuh #un{width:90px;}
#menuh #deux{width:100px;}
#menuh #trois{width:90px;}
#menuh #space1{width:100px;font-size:12px;color:white;font-weight: bold;text-decoration:underline;font-size:14px}
#menuh #cinq{width:90px;font-size:12px;color:white;font-weight: bold;text-decoration:underline;font-size:14px}
#menuh #sept{width:90px;}
#menuh #six{width:90px;}
#menuh #huit:{width:90px;}

.center {
width:787px;
float:right;
margin-top:4px;
font-family:verdana;
font-size: 10px;
color:black;

}

.titre
{
background-color: white;
background-repeat: no-repeat;
background-position:right top;
margin: 0 ;
height: 43px;
line-height:30px;
padding-left: 11px;
font-family:verdana;
font-size: 14px;
text-align: center;
}

.toumy
{
background-color: white;
background-repeat:repeat-y;
margin:0 auto;
background-position:1px;
padding:0 30px;
font-size: 12px;

}
.toumy1
{
background-color: white;
background-repeat:repeat-y;
margin:0 auto;
background-position:1px;
padding:0 30px;
font-size: 12px;
text-align: center;

}

.basol
{
margin:0;
background-color: white;
background-position:1px bottom;
background-repeat: no-repeat;
height: 28px;
padding:1 15px;
}
#margepied {height: 147px;clear:both;line-height: 147px;}
#pied
{
background-image: url("images/pied.png");
background-repeat: repeat-y;
width: 1000px;
height: 147px;
margin:auto;
margin-top:-148px;
margin-bottom: 20px;

}
.lien_centre {
text-decoration:none;
color:black;
font-size:12px;

}

.lien_centre:hover {
color:#d7dada;
}

.tableau
{
text-align: center;
font-family: verdana;
font-size: 14px;
font-weight: bold;
}

Voilou ! j'attends vos critiques et conseils avec impatience... Allez y doucement hein je viens de passer 3/4 heures à trouver/adapter/réadapter etc etc ce fichu design

edit du code

gcyrillus

15 mai 2006 à 0:24:31

bonjour,

j' ai repris rapidement le html , pour le rendre un peut plus coherent (ma faute a l'origine, div transformé en h1 , div enlever et css reporter sur un ul,h5 en span etc ...)et enlever des trucs qui me semblait a prioiri inutiles ou en trop ....encore des h5 , des lien vide, etc ...

<!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>Bienvenue sur le site de la guilde Eternam- Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" href="index.css">
</head>
<body>

<div id="global">
<h1 id="header"><span>Eternam, Guilde world of warcraft, Serveur khaz modan </span></h1>

<div id="block_gauche">
<h2 class="menu_gauche">
<span>Menu</span>
<a href="#contenu" >aller au contenu.</a>
<a href="#menuh" >aller au second menu.</a>
</h2>
<ul >
<li><a href="http://pikafr.free.fr/Eternam_site/index.html">-Home</a></li>
<li><a href="http://pikafr.free.fr/Eternam_site/archives.html">-Archives News</a></li>
<li><a href="http://pikafr.free.fr/Eternam_site/notre_histoire.html">-Notre Histoire</a></li>
<li><a href="http://pikafr.free.fr/Eternam_site/tableau_de_chasse.html">-Tableau de chasse</a></li>
<li><a href="http://pikafr.free.fr/Eternam_site/recrutement_eternam.html">-Recrutement Eternam</a></li>
<li><a href="http://eternam-fr.forumactif.com/">-Forum</a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/news.asp">-Bdd Eternam</a></li>
<li><a href="http://pikafr.free.fr/Eternam_site/liens.html">-Les liens</a></li>

</ul>
<span class="bas"></span>
</div>



<ul id="menuh">
<li><a href="#" id="space1"> <span>Membres</span></a></li>
<li><a href="http://eternam.kicks-ass.net/webroster/" id="un"> <span>Webroster</span></a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/dispo.asp" id="deux"> <span>Dispo Générale</span></a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/resistance.asp" id="trois"> <span>Résistance</span></a></li>
<li><a href="#" id="cinq"> <span>DkP</span></a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/memberlist.asp" id="sept"> <span>Membres</span></a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/raidlist.asp" id="six"> <span>Raidlist</span></a></li>
<li><a href="http://eternam.kicks-ass.net/dkp/lootlist.asp" id="huit"> <span>Loot Gallery</span></a></li>

</ul>



<div class="center" id="contenu">
<h2 class="titre"> Bienvenue sur le site de la guilde Eternam ! </h2>
<p class="toumy">
Design adapté pour une résolution de 1024x768, comprenant un menu
vertical destiné au public et un menu horizontal destiné aux membres
Eternam afin de consulter le site dit "dkp".<br>
Le but de ce site est de fournir un maximum de renseignements aux
visiteurs désireux de se renseigner sur notre guilde sur la toile. </p>

</div>



<div class="center">
<h2 class="titre"> Les différentes rubriques </h2>
<p class="toumy">
- Les différentes rubriques proposées verront le jour au fur et à
mesure du temps, mais pour bien commencer il me faudrait un petit texte
de mile ou de louna afin de présenter l'histoire de la guilde Eternam :
ses débuts, pourquoi le nom eternam etc etc afin de présenter quelque
chose de viable et de présentable.</p>
<p class="toumy">
- La rubrique recrutement ne comportera que les infos disponibles sur
les post it du forum en section recrutement avec un lien vers ceux ci.</p>

<p class="toumy">
- La rubrique tableau de chasse sera dréssée sous la forme d'un
récapitulatif de notre avancée au sein du pve hl en dressant un listing
des boss par instances.</p>

<p class="toumy">
- La rubrique liens reprendra les liens classiques à wow avec en ajout
ceux plus rares et méconnus afin d'offrir le maximum d'infos diverses.
Une rubrique addon pourrait voir le jour afin de recentrer les addons
les plus couramment utilisés au sein de la guilde avec le mode
d'emploi. A voir... </p>

</div>


<div id="margepied"> </div>
<div id="pied"></div>
</div>

</body>
</html>

aprés ce petit menage (marge pied et pied replacé )j'ai ajouter quelques commentaires, mais je n'ai pas passer au validateur.

Pour le css : (je n'ai touché que peut de chose en fait et sans veritable correction, juste une mise a jour du css en fonction des changement du html comme des marge a la place de certains br , et readapté la technique du pied en bas) .
Je n'ai pas touché a tes ajouts ....

html, body {
margin:0;
padding:0;
height:100%;
background-color: #d7dada;
font-family:verdana;
}
* {
margin:0;
padding:0;
}
#global
{
width:1000px;
background-color: white;
margin: auto ;
height:auto!important;
height:100%;
min-height:100%;
position:relative;
}

#header
{
height: 222px;
background: url("http://pikafr.free.fr/Eternam_site/images/header.png") center no-repeat;
margin:0 auto;
}

#block_gauche {

width:167px;
background-image: url("http://pikafr.free.fr/Eternam_site/images/menu2.png");
background-repeat:repeat-y;
float:left;
margin-right:0px;
margin-top:0;
padding:0;
font-family: verdana;
font-size : 12px;
text-align:left;

}

.menu_gauche
{
width: 167px;
height:110px;
background-image: url("http://pikafr.free.fr/Eternam_site/images/menu1.png");
background-position:top 0;
background-repeat: no-repeat;
margin: 0;
line-height:30px;
font-family: verdana;
font-size : 12px;
color: black;
}

.menu_gauche a, .menu_gauche span, #header span { /* ici on cache le contenu de h2 et h1 , contenu justifiant la

presence du h2

*/
position:absolute;
height:0;
width:0;
overflow:hidden;
}

.bas
{
margin:0;
background-image: url("http://pikafr.free.fr/Eternam_site/images/menu3.png");
background-position:0px bottom;
background-repeat: no-repeat;
height: 42px;
display:block;
}

#block_gauche ul {
list-style-type:none;
line-height:15px;
padding-left:14px;
}
#block_gauche ul li {

}

a {
text-decoration:none;
color:white;
font-size:12px;
}

a:hover {
color:black;
}

#menuh {
text-align:center;
background:url(http://pikafr.free.fr/Eternam_site/images/menu_h.png) top ;
height:31px;
background-repeat: repeat;
width:787px;
float:left;
list-style-type:none;
padding-left:0px;
padding-top:10px;
}

#menuh li {
float:left;
display:block;
}

#menuh li a {
color:white;
text-decoration:none;
float:left;
margin:0px ;
height:31px;

}
#menuh #un{
width:90px;
}
#menuh #deux{
width:100px;
}
#menuh #trois{
width:90px;
}
#menuh #space1{
width:100px;
font-size:12px;
color:white;
font-weight:bold;
text-decoration:underline;
font-size:14px
}
#menuh #cinq{
width:90px;
font-size:12px;
color:white;
font-weight: bold;
text-decoration:underline;
font-size:14px
}
#menuh #sept{
width:90px;
}
#menuh #six{
width:90px;
}
#menuh #huit:{
width:90px;
}

.center {
width:787px;
float:right;
margin-top:4px;
font-family:verdana;
font-size: 10px;
color:black;
}

.titre
{
background-color: white;
background-repeat: no-repeat;
background-position:right top;
margin: 0 ;
height: 43px;
line-height:30px;
padding-left: 11px;
font-family:verdana;
font-size: 14px;
text-align: center;
}

.toumy
{
background-color: white;
background-repeat:repeat-y;
margin:0 auto 1em;
background-position:1px;
padding:0 30px;
font-size: 12px;
}

#margepied {
height: 80px;/* même hauteur que le pied ou superieur */
clear:both;/* pour glisser sous le dernier element flottant */

}
#pied
{
background-image: url("http://pikafr.free.fr/Eternam_site/images/pied.png");
background-repeat: repeat-y;
width: 100%;
height: 70px;
position:absolute; /* on le fixe au bas de #global qui doit-etre lui meme en position:relative; */
bottom:0;
left:0;

}
.lien_centre {
text-decoration:none;
color:black;
font-size:12px;
}

.lien_centre:hover {
color:#d7dada;
}

.tableau
{
text-align: center;
font-family: verdana;
font-size: 14px;
font-weight: bold;
}

Des erreurs subsistent surement encore et des defauts au point de vue "semantiques" malgré de rapide corrections sur les plus grosses. enfin voila une base peut-etre plus coherente .
(sinon par exemple , pour les lien horizontaux, un width:90px par defaut et une surcharge a l'aide d'une id seulement pour les autres serait plus simple, pas besoin de plusieurs id pour un seule et même regle css, .... en fait sur 8 liens seulement 2 font 100px au lieu de 90px alors une 1 regle par defaut , + une class et c'etait plus facile ..., la class toumy peut-etre annuler et le css reporte a tout les <p> de <div class="centre"> par exemple: ".centre p" au lieu de ".toumy" )

++

y' a surement d'autre "truc" et il est tard aussi pour moi

heu , j'oublié , felicitation pour ton travail

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

pikachu

15 mai 2006 à 21:59:33

mille merci pour cette correction fort utile ainsi que les commentaires qui vont avec

! Cela va m'aider à mieux voir où j'ai pu me tromper

!

Merci encore à tes gabarits qui m'ont bien aidé, j'espère qu'à force de manipuler les gabarits dans tous les sens et que les manips de codes me seront aussi familières que l'orthographe (oui je rêve ^^) je serais à même de créer tout de a à z ! Merci encore...

PS : merci aussi aux créateurs de tutos, site du zéro qui permettent à des débutants qui ne conaissent rien d'apprendre facilement

!

Je ferais pousser le lien du site une fois bien fignolé...

Ps : j'avoue que ce n'est pas chose simple de faire d'un design une réalité une fois face au gabarit ! Dur de réussir à trouver les bon réglages aux bons endroits mais je me soigne