[presque résolu] images alignées certes, mais pas assez
Publié : 09 oct. 2007, 23:28
Bonsoir,
Une bonne heure que je m'échine sur ma feuille de style pour faire ce que je voudrais et bien sûr, je n'y arrive pas.
Mon problème, je voudrais créer un site horizontal (oui, j'en ai vu sur Zen Garden, ça me botte). Pour que ce soit complet, il faut que ma galerie d'images soit elle aussi affichée sur une seule ligne, or je n'y arrive pas.
Alors, je suis consciente du fait qu'une fois alignées, elles dépasseront la limite de l'image de fond de ma page, mais ce que je veux avant tout, c'est qu'elles soient alignées.
Je trouverai toujours un moyen après d'adapter l'image de fond.
Je vous passe donc le code de ma page HTML et ma feuille de style.
Je ne vous coupe pas les passages intéressants, parce qu'il y a sûrement un tout petit truc que je n'ai pas pigé dans tout ce que vous pourrez lire.
Merci d'avance pour l'aide que vous pourrez me fournir.
Ah si, je vous fais grâce du menu déroulant, lui il fonctionne. :p
Donc, ma feuille de style:
Ma page HTML:
PS.: il va sans dire que sous IE6 et sous Opera, ça merde chacun à sa façon... Je n'ai pas installé IE7
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Une bonne heure que je m'échine sur ma feuille de style pour faire ce que je voudrais et bien sûr, je n'y arrive pas.
Mon problème, je voudrais créer un site horizontal (oui, j'en ai vu sur Zen Garden, ça me botte). Pour que ce soit complet, il faut que ma galerie d'images soit elle aussi affichée sur une seule ligne, or je n'y arrive pas.
Alors, je suis consciente du fait qu'une fois alignées, elles dépasseront la limite de l'image de fond de ma page, mais ce que je veux avant tout, c'est qu'elles soient alignées.
Je trouverai toujours un moyen après d'adapter l'image de fond.
Je vous passe donc le code de ma page HTML et ma feuille de style.
Je ne vous coupe pas les passages intéressants, parce qu'il y a sûrement un tout petit truc que je n'ai pas pigé dans tout ce que vous pourrez lire.
Merci d'avance pour l'aide que vous pourrez me fournir.
Ah si, je vous fais grâce du menu déroulant, lui il fonctionne. :p
Donc, ma feuille de style:
Code : Tout sélectionner
body#Lecartonadollz {
margin: 0px auto;
width: 2100px;
height: 800px;
font-family: Andy;
font-size: large;
background-repeat: no-repeat;
background-position: left top;
background-color: #3694d4;
background-image: url(../img/fond-site-2100-herbes.jpg);
}
body#Lecartonadollz > div#extraDiv1 {
/*margin: 660px 1400px 0 0;*/
background-image: url(../img/herbes.gif);
/*background-position: left bottom;*/
position: fixed;
height: 140px;
width: 700px;
z-index: 0;
bottom: 0px;
background-repeat: no-repeat;
}
body#Lecartonadollz > div#extraDiv2 {
/*margin: 0 0 600px 1495px;*/
right:0px;
background-image: url(../img/Nuages.png);
/*background-position: right top;*/
position: fixed;
background-repeat: no-repeat;
height: 200px;
width: 605px;
z-index: 0;
}
body#Lecartonadollz h2 {
border: 1px dotted #ffffff;
font-family: Monotype Corsiva;
font-size: large;
color: #ffffff;
background-color: #3366ff;
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body#Lecartonadollz h3 {
font-family: Monotype Corsiva;
font-size: small;
color: #ffffff;
text-align: center;
}
body#Lecartonadollz p {
margin: 3%;
text-align: justify;
font-family: Monotype Corsiva,Courier New;
}
div#pageHeader {
position: absolute;
left: 10px;
width: 400px;
}
div#pageHeader p {
display: inline;
}
div#pageHeader h1 {
border: 2px dotted #ffffff;
left: 10px;
font-family: Monotype Corsiva;
font-size: x-large;
color: #ffffff;
background-color: #3366ff;
text-align: center;
width: 350px;
padding: 10px;
}
div#pageHeader2 {
padding: 5px;
position: absolute;
left: 450px;
width: 1450px;
top: 10px;
}
div#description {
position: absolute;
left: 10px;
top: 100px;
bottom: 100px;
width: 350px;
text-align: justify;
z-index: 1;
}
div#galery {
position: absolute;
/*float: right;*/
z-index:1;
text-align: justify;
left: 400px;
top: 100px;
/*right: 10px;*/
}
div#footer1 {
position: absolute;
top: 550px;
bottom: 0px;
left: 1750px;
width: 350px;
height: 75px;
}
div#footer2 {
position: absolute;
bottom: 0px;
right: 400px;
width: 300px;
height: 75px;
}
div#footer1 p, div#footer2 p {
font-family: Monotype Corsiva,Courier New;
text-align: center;
}
#galery img{
display: inline;
margin: 0px 40px 0px 0px;
}Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>
dollz base edit
</title><!--style type="text/css">@import url(./../styles/style horizonb.css);</style-->
<link rel="stylesheet" href="../../../styles/style%20horizonb.css" type="text/css" media="screen">
<script type="text/javascript" src="../../../styles/menuderoulant.js">
</script>
</head>
<body id="Lecartonadollz">
<div id="pageHeader">
<h1>
Dollz - Base edit
</h1>
</div>
<div id="description">
<h2>
Antichambre
</h2>
<p style="text-align: center;">
<br>
. . . : Mes base edits : . . .
</p>
<p>
La plupart des dolls que je fais le sont pour des concours. En effet, c'est le challenge, la compétition avec
d'autres dolleuses, souvent talentueuses, bien plus que moi, qui me motive.<br>Vous trouverez la base de la doll en cliquant dessus.
</p>
</div>
<div id="pageHeader2">
<ul id="menuDeroulant3">
<li>
<a href="#">Dollz</a>
<ul class="sousMenu">
<li>
<a href="#">Base edit</a>
</li>
<li>
<a href="#">Battles</a>
</li>
<li>
<a href="#">Line</a>
</li>
<li>
<a href="#">Palette</a>
</li>
<li>
<a href="#">Thème</a>
</li>
<li>
<a href="#">Inspired by</a>
</li>
<li>
<a href="#">FD specials</a>
</li>
<li>
<a href="#">Adoptions</a>
</li>
</ul>
</li>
<li>
<a href="#">Pixel Art</a>
<ul class="sousMenu">
<li>
<a href="#">Mes Créations</a>
</li>
<li>
<a href="#">Achats pixels</a>
</li>
</ul>
</li>
<li>
<a href="#">Gifts</a>
<ul class="sousMenu">
<li>
<a href="#">Gifts été</a>
</li>
<li>
<a href="#">Gifts Halloween</a>
</li>
<li>
<a href="#">Gifts Noël</a>
</li>
<li>
<a href="#">Gifts spéciaux</a>
</li>
</ul>
</li>
<li>
<a href="#">Sisters</a>
<ul class="sousMenu">
<li>
<a href="#">Paradise</a>
</li>
</ul>
</li>
<li>
<a href="#">Concours</a>
<ul class="sousMenu">
<li>
<a href="#">"Matriochka" - clos</a>
</li>
<li>
<a href="#">"Déployez vos filets" - clos</a>
</li>
<li>
<a href="#">"Le Cartable Maudit" - attente des réservistes</a>
</li>
</ul>
</li>
<li>
<a href="#">Awards</a>
<ul class="sousMenu">
<li>
<a href="#">1st</a>
</li>
<li>
<a href="#">2nd</a>
</li>
<li>
<a href="#">3rd</a>
</li>
<li>
<a href="#">Plus Original</a>
</li>
<li>
<a href="#">Participation</a>
</li>
<li>
<a href="#">FD Specials</a>
</li>
<li>
<a href="#">Choice</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="galery">
<h2>
dolls
</h2>
<img alt="premier base edit" src="img/bubs-base-contest.gif"><img alt="second base edit" src="img/aelenil-edit.gif"><img alt="trois base edit" src="img/Furry-base-edit.gif"><img alt="quatre base edit" src="img/concours-medea-bryony.gif"><img alt="cinq base edit" src="img/medea-bryony-2.gif"><img alt="six base edit" src="img/Loue-base-edit.gif"><img alt="sept base edit" src="img/base-edit-kimiko.gif"><img alt="huit base edit" src="img/louchka-base-edit.gif"><img alt="neuf base edit" src="img/louchka-base-edit-baw.gif"><img alt="dix base edit" src="img/kisspix-edit.gif"><img alt="onze base edit" src="img/aurelia-edit.gif"><img alt="douze base edit" src="img/scarlet-escort-girl.gif"><img alt="treize base edit" src="img/dedale_base_edit.gif">
</div>
<div id="footer1">
<h2>
Crédits
</h2>
<p>
C'est Mag qui l'a fait avec <a title="Document fait avec KompoZer" href="http://kompozer.net/"><img alt=
"Document fait avec KompoZer" src="http://kompozer.sourceforge.net/images/kompozer_80x15.png" border=
"0"></a><br>
Avril - août 2007<br>
<img style="width: 80px; height: 80px;" alt="tropcoolpouIE" src="../img/too_cool_badge_fr.png">
</p>
<div id="footer2">
<h2>
Liens/links
</h2>
<p>
<a href="Liens/Index.htm#forumdolls">Forums de dolls</a><br>
<a href="Liens/Index.htm#creaweb">Sites d'aide à la création web</a><br>
<a href="Liens/Index.htm#creainfo">Sites de création infographique</a><br>
<a href="Liens/Index.htm#melier">Me lier? Mais bien sûr</a>
</p>
</div>
</div>
<!--div id="extraDiv1"></div-->
<div id="extraDiv2"></div>
</body>
</html>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
