Titre: CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: AVL le le 22-10-2006 a 19:35:28
Bonjour,
voilà mon probleme,je commence seulement dans la création de site web, et j'ai eu beau lire beaucoup de chose sur le centrage des sites web, je n'y arrive pas avec le mien. J'explique, je fais mon site avec publisher 2003 et je modifie le html avec notepad ( je sais ça va faire rire mais comme je vous l'ai dit je commence) pour vous donnez une idée voila l'adresse de mon site : http://perso.orange.fr/av.lignieres.foot/index.htm
Si je vous donne le code html d'une page d'acceuil toute simple que je viens de faire, pourriez vous me montrer comment faire avec un exemple concret pour que je puisse comprendre ?
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=File-List href="accueil_fichiers/filelist.xml">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
b\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Feuille blanche</title>
<style>
<!--
/* Définitions du style */
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:.25in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:.25in;}
@page
{size:8.2673in 11.6923in;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="4098" fill="f" fillcolor="white [7]"
strokecolor="black [0]">
<v:fill color="white [7]" color2="white [7]" on="f"/>
<v:stroke color="black [0]" color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow color="#ccc [4]"/>
<v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
<o:colormru v:ext="edit" colors="yellow"/>
</o:shapedefaults><o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1"/>
<o:regrouptable v:ext="edit">
<o:entry new="1" old="0"/>
</o:regrouptable>
</o:shapelayout></xml><![endif]-->
</head>
<body link="#0066FF" vlink="#6633CC" bgcolor=yellow style='margin:0'>
<div style='position:absolute;width:7.9319in;height:6.4736in'>
<!--[if gte vml 1]><v:shapetype id="_x0000_t136" coordsize="21600,21600" o:spt="136"
adj="10800" path="m@7,l@8,m@5,21600l@6,21600e">
<v:formulas>
<v:f eqn="sum #0 0 10800"/>
<v:f eqn="prod #0 2 1"/>
<v:f eqn="sum 21600 0 @1"/>
<v:f eqn="sum 0 0 @2"/>
<v:f eqn="sum 21600 0 @3"/>
<v:f eqn="if @0 @3 0"/>
<v:f eqn="if @0 21600 @1"/>
<v:f eqn="if @0 0 @2"/>
<v:f eqn="if @0 @4 21600"/>
<v:f eqn="mid @5 @6"/>
<v:f eqn="mid @8 @5"/>
<v:f eqn="mid @7 @8"/>
<v:f eqn="mid @6 @7"/>
<v:f eqn="sum @6 0 @5"/>
</v:formulas>
<v:path textpathok="t" o:connecttype="custom" o:connectlocs="@9,0;@10,10800;@11,21600;@12,10800"
o:connectangles="270,180,90,0"/>
<v:textpath on="t" fitshape="t"/>
<v:handles>
<v:h position="#0,bottomRight" xrange="6629,14971"/>
</v:handles>
<o:lock v:ext="edit" text="t" shapetype="t"/>
</v:shapetype><v:shape id="_x0000_s1035" type="#_x0000_t136"
href="http://perso.orange.fr/av.lignieres.foot/index.htm" style='position:absolute;
left:222.1pt;top:423pt;width:139.5pt;height:41.25pt;z-index:3;
mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' o:regroupid="1"
fillcolor="yellow" strokecolor="black [0]" o:cliptowrap="t">
<v:stroke>
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow on="t" type="perspective" color="#c7dfd3" opacity="52429f" origin="-.5,-.5"
offset="-26pt,-36pt" matrix="1.25,,,1.25"/>
<v:path insetpenok="f"/>
<v:textpath style='font-family:"Times New Roman";v-text-kern:t' trim="t"
fitpath="t" string="ENTRER"/>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:3;
left:261px;top:516px;width:233px;height:104px'><map name=MicrosoftOfficeMap0><area
shape=Polygon
coords="0, 0, 0, 2, 4, 16, 4, 48, 0, 66, 0, 68, 37, 80, 32, 102, 33, 102, 222, 102, 223, 102, 217, 96, 210, 80, 233, 67, 233, 65, 230, 64, 221, 48, 221, 32, 225, 20, 226, 13, 219, 2, 215, 0, 0, 0"
href="http://perso.orange.fr/av.lignieres.foot/index.htm"></map><img border=0
width=233 height=104 src="accueil_fichiers/image317.gif"
usemap="#MicrosoftOfficeMap0" alt=ENTRER v:shapes="_x0000_s1035"></span><![endif]><!--[if gte vml 1]><v:rect
id="_x0000_s1036" href="http://perso.orange.fr/av.lignieres.foot/index.htm"
style='position:absolute;left:195pt;top:135pt;width:193.71pt;height:282pt;
z-index:4;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt'
o:preferrelative="t" o:regroupid="1" filled="f" fillcolor="white [7]"
stroked="f" strokecolor="black [0]" o:cliptowrap="t">
<v:fill color2="white [7]"/>
<v:stroke color2="white [7]">
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:imagedata src="accueil_fichiers/image312.gif" o:title="Fanion-de-l'-Av-FOOTBALL"/>
<v:shadow color="#ccc [4]"/>
<v:path o:extrusionok="f" insetpenok="f"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:rect><![endif]--><![if !vml]><span style='position:absolute;z-index:4;
left:260px;top:180px;width:258px;height:376px'><a
href="http://perso.orange.fr/av.lignieres.foot/index.htm"><img border=0
width=258 height=376 src="accueil_fichiers/image3121.gif" v:shapes="_x0000_s1036"></a></span><![endif]><!--[if gte vml 1]><v:shape
id="_x0000_s1037" type="#_x0000_t136" style='position:absolute;left:172.6pt;
top:81pt;width:238.5pt;height:51pt;z-index:5;mso-wrap-distance-left:2.88pt;
mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
mso-wrap-distance-bottom:2.88pt' o:regroupid="1" fillcolor="yellow"
strokecolor="#33c" strokeweight=".35269mm" o:cliptowrap="t">
<v:stroke>
<o:left v:ext="view" color="black [0]" color2="white [7]"/>
<o:top v:ext="view" color="black [0]" color2="white [7]"/>
<o:right v:ext="view" color="black [0]" color2="white [7]"/>
<o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
<o:column v:ext="view" color="black [0]" color2="white [7]"/>
</v:stroke>
<v:shadow on="t" color="#99f" offset="3pt"/>
<v:path insetpenok="f"/>
<v:textpath style='font-family:"Arial Black";v-text-kern:t' trim="t"
fitpath="t" string="BIENVENUE"/>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:5;
left:229px;top:107px;width:324px;height:72px'><img width=324 height=72
src="accueil_fichiers/image315.gif" alt=BIENVENUE v:shapes="_x0000_s1037"></span><![endif]>
</div>
</body>
</html>
Je vous en remercie d'avance
AVL |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: OKKO le le 23-10-2006 a 11:38:11
:-X j'ai mal à la tête avec tout ce code !
Regarde ici :
http://css.alsacreations.com/ |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: Zed2006 le le 23-10-2006 a 11:47:54
Hello,
Moi aussi je débute dans la création de site, un petit conseil "offres" toi Dreamweaver...t'as des modèles de base tout à fait potables. |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: AVL le le 23-10-2006 a 11:58:02
Je viens d'avoir dreamweaver et j'essaye actuellement de comprendre comment il fonctionne.
je vais persister.
J'attend quand meme toujours une réponse
AVL |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: OKKO le le 23-10-2006 a 14:02:19
Un début de réponse ( il faudra que tu cherches de ton coté):
Pour centrer ton site il faut qu'il tienne dans un "Conteneur".
C'est à dire un calque (DIV) qui sera formaté par ta feuille de style, a qui on donnera un "id" et qui recevra les info suivantes :
exemple pour un écran de 700X400:
déla le style css :
#Monconteneur {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px; /* moitié de la hauteur */
margin-left: -350px; /* moitié de la largeur */
border: 1px solid #000;
}
dans le body
<div id="Monconteneur">
<!-- et là tes éléments --->
</div>
et la source ce trouve là, il faut aussi savoir chercher un peu:
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
Tchao ! |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: AVL le le 23-10-2006 a 15:14:17
Je vous remercie, les liens que tu m'a donné OKKO je les avais bien lu, mais pas comprise. Alors que la je comprends déja mieux et je vais essayé.
Merci bien |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: OKKO le le 23-10-2006 a 15:47:30
Oui excuse, je comprends que l'on soit perdu
Bon courage ;) |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: AVL le le 23-10-2006 a 15:48:24
Je suis ravi ;D merci bien OKKO ta façon simple de m'expliquer a fait que j'ai réussi.
Bye :D |
Titre: Re:CENTRER SON SITE WEB HORIZONTALEMENT
Posté par: OKKO le le 23-10-2006 a 15:54:23
Parfait !
Merci pour le retour ;)
@+ ici |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|