Bonjour,
Je désir placer dans un "div" une image d'arrière plan et lui coller du texte dessus (jusque là, pas de souci), mon texte est composé de "h1, h2, h3 et p". Mon image à pour dimension 600 x 200px, mon div à une largeur de 600px, je lui donne id="centre", je désir que la hauteur de l'image soit proportionnelle à celle du"div"qui la contient.
J'ai regardé l'exemple donné sur la FAQ http://forum.alsacreations.com/faq/#item56[/url], mais cela ne marche pas, le texte se place en dessous de l'image, j'ai beau lui donner comme position : absolute; cela ne change rien. (j'suis sous FireFox)
Voici le code de ma page:
Voici ma feuille css
Merci de votre aide.
Modifié par reman (20 Jul 2006 - 16:48)
Je désir placer dans un "div" une image d'arrière plan et lui coller du texte dessus (jusque là, pas de souci), mon texte est composé de "h1, h2, h3 et p". Mon image à pour dimension 600 x 200px, mon div à une largeur de 600px, je lui donne id="centre", je désir que la hauteur de l'image soit proportionnelle à celle du"div"qui la contient.
J'ai regardé l'exemple donné sur la FAQ http://forum.alsacreations.com/faq/#item56[/url], mais cela ne marche pas, le texte se place en dessous de l'image, j'ai beau lui donner comme position : absolute; cela ne change rien. (j'suis sous FireFox)
Voici le code de ma page:
<body>
<!--logo et bannière-->
<div id="header">
<a href="index.html"><img src="images/logo.png" alt="DesignSite.info ::: Créateur de site internet respectant les standards W3C" title="DesignSite.info ::: Créateur de site internet respectant les standards W3C" width="120"/></a>
<object type="application/x-shockwave-flash" data="swf/pub.swf" width="649" height="80">
<param name="play" value="true" />
<param name="movie" value="swf/pub.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scalemode" value="noborder" />
<p> OBJET FLASH NON AFFICHE </p>
</object>
</div>
<!--Menu Verticale-->
<div>
<dl id="menu">
<dt onclick="javascript:montre();"><a href="index.html">Accueil</a></dt>
<dt onmouseover="javascript:montre('smenu2');"><a href="#">Réalisations</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">de maquettes</a></li>
<li><a href="#">de sites</a></li>
<li><a href="#">de vidéo</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre();"><a href="#">Profil</a></dt>
<dt onmouseover="javascript:montre();"><a href="#">Contact</a></dt>
</dl>
</div>
<!--Contenu info-->
<div id="centre"><img alt="" src="fontTexte.jpg" />
<h1> What is Lorem Ipsum ?</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed velit. Quisque rutrum. Nulla eget erat. Aenean in augue. Sed odio augue, varius vitae, pellentesque vel, tristique eget, dolor. Nulla facilisis dictum augue. Sed justo nunc, dignissim eget, porttitor vitae, convallis nec, orci. Sed auctor dignissim nulla. Sed eu velit. Nulla facilisi.</p>
<p>
Nulla facilisi. Nunc suscipit risus ac magna posuere feugiat. Fusce turpis tellus, molestie non, tincidunt eget, lobortis id, mauris. Vestibulum nibh est, feugiat sit amet, volutpat at, elementum at, elit. In tempor metus eu nibh. Fusce molestie, massa id placerat nonummy, felis ante accumsan mauris, ut blandit mi est quis arcu. Nunc suscipit nonummy erat. Integer sit amet libero. Quisque lorem massa, ultricies ut, facilisis vel, egestas eget, sapien. Nunc egestas tempor nulla
</p>
<h3> Mauris scelerisque?</h3>
<p>
Nunc arcu. Pellentesque risus. Suspendisse sed arcu. Ut lacinia, neque eu pretium fermentum, lacus tortor vestibulum erat, quis ultrices tellus diam vitae tortor. Nam sed lectus ut tellus gravida laoreet. Pellentesque scelerisque fermentum lorem. Praesent mauris. Integer elit. Etiam lacus. Ut congue. Curabitur id lorem et orci iaculis venenatis. Praesent adipiscing, lacus nec pretium congue, ante sapien pellentesque libero, in tincidunt lectus mauris vel pede.</p><br />
<h2> Class aptent taciti sociosqu</h2>
<!--Pieds page-->
<div id="bas">
<p>Le code de cette page est conforme aux spécifications XHTML 1.1 du W3C
<br />
<br />
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml11"
alt="Validé XHTML 1.1!" height="31" width="88" /></a> et aux spécifications CSS 2.1
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Validé CSS!" /> </a></p>
</div>
</div>
</body>
Voici ma feuille css
body {
color: black;
background-color: #FFFFFF;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
width: 780;
}
#header {
padding: 0px;
height: 80px;
width: 780px;
left: 10px;
top: 0px;
margin-top: 0px;
margin-left: 0;
position: absolute;
bottom: 0px;
}
#centre {
width: 600px;
margin-left: 150px;
margin-top: 130px;
}
#centre img {
width : 100%
height: 100%;
}
#centre h1,h3 {
margin-top: 0px;
font-family: "Arnold Boecklin Std", "Times New Roman", sans-serif;
color: #6495ED;
background-color: #FFFFFF;
}
#centre p {
font-family: "Ashley Script MT Std", Verdana, sans-serif;
font-size: 20px;
margin-right: 3em;
margin-left: 1em;
top: 1em;
color: #00008B;
background-color: #FFFFFF;
}
#centre h2 {
font-family: "Arnold Boecklin Std", "Times New Roman", sans-serif;
color: #6495ED;
background-color: #FFFFFF;
text-align: center;
}
img { border: 0;}
#bas {
position: absolute;
width: 600px;
height: 90px;
bottom: 0px;
border-left: 0px;
padding-left: 0px;
margin-bottom: 20px;
}
#bas p {
font-size: 12px;
color: #00008B;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
left: 149px;
}
Merci de votre aide.
Modifié par reman (20 Jul 2006 - 16:48)
