Bonjour à tous.
J'essayes d'intégrer à mon site des images. J'ai toutefois un soucis: mon texte chevauche l'image. Sous ie cela s'affiche correctement mais pas sous FireFox, ni Opera et pas plus sous Netscape.
Un soucis surement basique mais incompréhensible à mon niveau.
J'ai cherché sur la f.a.q qui m'a déjà permis de pas mal avancée ( au départ mon texte se positionnait SOUS l'image) mais je n'ai pas réussi à tout résoudre.
La " Recherche" ne s'est pas montré d'un grand secours ( mais je l'utilise peut être mal!)
Voici ce que j'obtiens: http://lagardedamakna.free.fr/blason
Mon code html:
Ma feuille CSS:
Si au passage vous avez des commentaires à me faire sur mon html et ma CSS je suis preneur
Par avance merci de votre aide et je profite de l'occassion pour vous souhaitez à tous mes meilleurs voeux pour 2006
Modifié par Artno (19 Jan 2006 - 18:23)
J'essayes d'intégrer à mon site des images. J'ai toutefois un soucis: mon texte chevauche l'image. Sous ie cela s'affiche correctement mais pas sous FireFox, ni Opera et pas plus sous Netscape.
Un soucis surement basique mais incompréhensible à mon niveau.
J'ai cherché sur la f.a.q qui m'a déjà permis de pas mal avancée ( au départ mon texte se positionnait SOUS l'image) mais je n'ai pas réussi à tout résoudre.
La " Recherche" ne s'est pas montré d'un grand secours ( mais je l'utilise peut être mal!)
Voici ce que j'obtiens: http://lagardedamakna.free.fr/blason
Mon code html:
<!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" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue</title>
<meta name="author" content="ArtNo" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="keywords" lang="fr" content="Dofus,MMORPG,MMOG,Ankama,jeux PC, jeux massivement multi-joueurs,jeu en ligne, rpg, flash, artno, guilde, garde" />
<meta name="Category" content="Games" />
<meta name="description" content="Dofus - Site et forum de discussion sur le MMORPG (jeux massivement multi-joueurs)" />
<meta name="Robots" content="index,follow,all" />
<meta name="Revisit-after" content="3 days" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script language="JavaScript">
/* Feuille de JavaScript */
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="conteneur">
<p id="easy-access">
<a href="/Politique-accessibilite" accesskey="0">Politique d'accessibilité</a> <a href="http://lagardedamakna.free.fr/accueil" accesskey="1">Accueil du site</a> <a href="#centre" accesskey="2">Aller au contenu</a> <a href="http://lagardedamakna.free.fr/plan" accesskey="3">Aller au plan du site</a> <a href="mailto:lagardedamakna@no-log.org" accesskey="4">Nous contacter</a>
</p>
<div id="header">
<span>
<h1>Bannière de l'Ordre de la Garde d'Amakna</h1>
</span>
</div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="http://lagardedamakna.free.fr/accueil" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">L'Ordre</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="http://lagardedamakna.free.fr/origines">Les origines</a></li>
<li><a href="http://lagardedamakna.free.fr/charte">La charte</a></li>
<li><a href="http://lagardedamakna.free.fr/rangs">Les rangs</a></li>
<li><a href="http://lagardedamakna.free.fr/blason">Blason et devise</a></li>
<li><a href="http://lagardedamakna.free.fr/membres">Les membres</a></li>
<li><a href="http://lagardedamakna.free.fr/candidature">Candidature</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">La Milice</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="http://lagardedamakna.free.fr/milice">Le bras armé</a></li>
<li><a href="http://lagardedamakna.free.fr/chartemilice">La charte</a></li>
<li><a href="http://lagardedamakna.free.fr/candidature">Candidature</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Dofus?!</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="http://lagardedamakna.free.fr/jeu">Le jeu</a></li>
<li><a href="http://lagardedamakna.free.fr/univers">L'univers Dofus</a></li>
<li><a href="http://lagardedamakna.free.fr/fanart">Le FanArt</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">L'Antre</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="http://lagardedamakna.free.fr/forum/viewtopic.php?t=224">Les news du site</a></li>
<li><a href="http://lagardedamakna.free.fr/liens">Les liens</a></li>
<li><a href="http://lagardedamakna.free.fr/livre">Le livre d'or</a></li>
<li><a href="http://lagardedamakna.free.fr/plan">Le Plan du site</a></li>
<li><a href="mailto:lagardedamakna@no-log.org">Nous contacter</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="http://lagardedamakna.free.fr/forum" title="Le forum">Le forum</a></dt>
</dl>
</div>
<div id="centre">
<h1>Le blason et la devise de l'Ordre</h1><br/>
<h2>Notre blason:</h2>
<div class="gauche" style="width:225px; float:left;">
<p class="image"><img src="images/images/blasondelaguilde.jpg" alt="Le blason de l'Ordre de la Garde d'Amakna" width="225" height="223" /></p></div>
<p>Description: De Sénople à un Tofu d’Or… ( juste histoire de frimer en héraldique, genre…)<br/>
En clair, le blason de l’Ordre de la Garde d’Amakna est un écu dofusien de couleur verte évoquant les verts pâturages et les forêts de notre belle et éternelle Province, rehaussé d’un tofu de couleur jaune, emblème d’Amakna.</p><br/>
<p>A ce propos, une légende raconte également qu’à l’origine du monde était le tofu ( on n’a toujours pas éclairci d’ailleurs la question de l’œuf et du tofu… Qui était le premier ? !) et nous en serions tous en quelque sorte un cousin éloigné.<br/>
Certains habitants en ont d’ailleurs conservé parfois le côté jovial ou l’intelligence, les Iops en étant un bon exemple !</p><br/>
<p>Le vert est également la couleur de la joie, de l’espérance et de la liberté…<br/>
Ce sont là des valeurs d’Amakna et celle de notre Ordre : joie de vivre, d’être ensemble ; espoir d’un avenir radieux pour notre Ordre mais aussi pour notre belle Province dans cette période troublée de son histoire ; de liberté face à la tentation d’annexion des deux royaumes voisins.</p><br/>
<p>Le jaune évoque pour sa part l’éternel soleil d’Amakna ( un plus pour les agences de voyage, la nuit n’a pas cours par chez nous! Au passage, les membres de l’Ordre profite de 10% de réduction chez tout les tour-opérateurs de la Province), mais également l’intelligence ( de notre Meneuse!), la grandeur de notre éternelle Province, la vertu de chacun des membres de l’Ordre ( en particulier de la Meneuse!) et le prestige ( ouai! C’est tout nous quoi!)</p><br/>
<h2>Notre devise:</h2>
<h3>" Tatah Yo-yoh!"</h3>
<p>Si tout le monde a aujourd’hui oublié la signification exacte de ces mots, les écrits des anciens l’évoquent comme étant un signe de ralliement au combat des premiers Gardes de l’Ordre.<br/>
Ils semblent chargés d’une puissante magie protégeant les guerriers au combat.</p><br/>
<p>Un voyageur revenu de lointaines contrées raconte avoir entendu cette même devise dans la bouche d’une diva de cabaret emplumée laquelle, imbibée d’alcool frelaté de tofu, se produirait dans des tavernes.<br/>
Cela confirmerait la théorie d’Isargin Leridé selon laquelle les Anciens avaient envoyé des missionnaires par delà le monde connu afin de promouvoir l’Ordre. La diva doit en être une descendante.</p><br/>
</div>
<div id="pied">Réalisation du site <a href="mailto:lagardedamakna@no-log.org">ArtNo</a> © 2005 <a href="mailto:lagardedamakna@no-log.org">La Garde d'Amakna</a>. Tous droits réservés.<br/>
Les images et textes issus de <a href="http://www.dofus.com/fr/">Dofus</a> sont © 2004 <a href="http://www.ankama-studio.com/fr/accueil.html">Ankama Studio</a>.Tous droits réservés.
</div>
</div>
</body>
</html>Ma feuille CSS:
body {
margin: 0;
padding: 0;
background-color: #D8C8A8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #980000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#conteneur {
margin: 0 auto;
width: 750px;
left: 50%;
}
#header {
height: 143px;
background-image: url(/images/boutons/bandeaufinal.jpg) ;
}
#header span {
display: none ;
}
#centre {
background-color:#F0E4C0;
text-align: justify ;
text-indent: 2em ;
line-height: 1.3em ;
padding: 2em 2em 2em 2em;
}
#pied {
height: 40px;
text-align: center;
font-size: 0.75em;
line-height: 1.3em;
background-color: #F0E4C0;
}
p {
margin: 0 10px 0;
}
h1{
margin-top: 40px;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
h2{
margin-top: 35px;
font-size: 1em;
font-weight: bold;
}
h3{
text-align: center;
font-size: 1em;
}
h6{
text-align: center;
font-size: 1em;
}
a {
color: #980000;
text-decoration: none;
}
a:hover {
color: #980000;
text-decoration: underline;
}
#menu {
position: absolute;
margin: 0 auto 0 -375px;
height: 24px;
background-color:#F0E8D8;
top: 158px;
left: 50%;
z-index:auto;
width : 750px
}
#menu dl {
float: left;
width: 9.4em;
margin: 1px 2.5px 1px 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E8DCC8;
border: 1.5px solid #A08060;
}
#menu dd {
position:absolute;/*supprime le problème d'étirement*/
width:9.4em;/*du coup il faut repréciser la largeur*/
border: 1.5px solid #A08060;
}
#menu li {
text-align: center;
background: #F0E8D8;
}
#menu li a, #menu dt a {
color: #980000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #F0F4E0;
}
#gauche
{
text-align: right;
padding: 0px 0px 0px 0px;
}
#image
{
margin: 0px;
padding: 0px;
}
Si au passage vous avez des commentaires à me faire sur mon html et ma CSS je suis preneur
Par avance merci de votre aide et je profite de l'occassion pour vous souhaitez à tous mes meilleurs voeux pour 2006
Modifié par Artno (19 Jan 2006 - 18:23)
