(HTML) Alignement d'image.

Marsh Posté le 02-07-2013 à 20:33:34

Bonjour, je me débrouille très à peu près en html et avec l'aide de divers tuto j'ai fait mon site perso.Mais deux problèmes.
1) Sous galerie (http://diane.georges.voila.net/galerie.html) et conte chinois (http://diane.georges.voila.net/contechinois.html)
La dernière ligne de timbre d'image est tout aglutinée et ne s'aligne pas aux autre et je ne comprend pas pourquoi.
Qu'est ce qui ne vas pas ??

ma page de style css:

Spoiler :

/* Définition des polices personnalisées */

@font-face
{
font-family: 'Dayrom';
src: url('polices/dayrom.eot');
src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
url('polices/dayrom.woff') format('woff'),
url('polices/dayrom.ttf') format('truetype'),
url('polices/dayrom.svg#Dayrom') format('svg');
font-weight: normal;
font-style: normal;
}

/* Eléments principaux de la page */

body
{
background: url("images/fond_fixe.png" ) fixed no-repeat top right, url("images/fond_noir.png" ) fixed;
font-family: Arial, 'Trebuchet MS', sans-serif;
color: #999999 ;
}

#bloc_page
{
width: 900px;
margin: auto;
}

section h1, footer h1, nav a
{
font-family: Dayrom, serif;
font-weight: normal;
text-transform: uppercase;
}

/* Header */

header
{
background: url('images/separateur.png') repeat-x bottom;
}

#titre_principal
{
display: inline-block;
}

header h1
{
font-family: Dayrom, serif;
font-size: 2.5em;
font-weight: normal;
}

#logo, header h1
{
display: inline-block;
margin-bottom: 0px;
}

header h2
{
font-family: Dayrom, serif;
font-size: 1.1em;
margin-top: 0px;
font-weight: normal;
}

/* Navigation */

nav
{
display: inline-block;
width: 520px;
text-align: right;
}

nav ul
{
list-style-type: none;
}

nav li
{
display: inline-block;
margin-right: 15px;
}

nav a
{
font-size: 1.3em;
color: #663366;
padding-bottom: 2px;
text-decoration: none;
}

nav a:hover
{
color: #993399;
border-bottom: 3px solid #993399;
}

/* Bannière */

#banniere_image
{
margin-top: 15px;
height: 200px;
border-radius: 5px;
background: url('images/banniere_image.jpg') no-repeat;
position: relative;
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px;
}

#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 99.5%;
height: 33px;
padding-top: 15px;
padding-left: 4px;
background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
background-color: rgba(24,24,24,0.8);
color: white;
font-size: 0.8em;

}

.bouton_rouge
{
display: inline-block;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url('images/fond_degraderouge.png') repeat-x;
border: 0px solid ;
border-radius: 5px;
font-size: 1.2em;
text-align: center;
padding: 3px 8px 0px 8px;
color: white;
text-decoration: none;
}

.bouton_rouge img
{
border: 0;
}

/* Corps */

article, aside
{
display: inline-block;
vertical-align: top;
text-align: justify;
}

article
{
width: 850px;
margin-right: 15px;
}

.ico_categorie
{
vertical-align: middle;
margin-right: 15px;
}

article p
{
font-size: 0.8em;
}

/* Footer */

footer
{
background: url('images/separateur.png') repeat-x top;
padding-top: 25px;
}

footer p, footer ul
{
font-size: 0.8em;
}

footer h1
{
font-size: 1.1em;
}

#miseajour, #mes_photos, #mes_amis
{
display: inline-block;
vertical-align: top;

}

#miseajour
{
width: 28%;
}

#mes_photos
{
width: 41%;
vertical-align: top;

}

#mes_amis
{
width: 25%;
}

#mes_photos img
{
border: 0px ;
margin-right: 200px ;
}

#mes_amis ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 48%;
list-style-image: url('images/ico_liensexterne.png');
padding-left: 2px;
}

#mes_amis a
{
text-decoration: none;
color: #663366;

}

/* Correctifs pour les vieilles versions d'Internet Explorer */

/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie #titre_principal, .old_ie #logo, .old_ie header h1, .old_ie nav, .old_ie nav li, .old_ie .bouton_rouge, .old_ie article, .old_ie aside, .old_ie #tweet, .old_ie #mes_photos, .old_ie #mes_amis, .old_ie #mes_amis ul
{
display: inline;
zoom: 1;
}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1
{
font-size: 1.1em;
}

.old_ie footer div, .ie8 footer div
{
margin-top: 30px;
background: url('images/separateur.png') repeat-x top;
}

Le code html de la galerie

Spoiler :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Le site de l'illustratrice Diane Georges. Images, galeries, illustrations, peintures.... ">
<meta name="keywords" content="diane, georges, atlantisdesetoiles, atlantis, atlantis_des_etoiles, illustrations, illustration, image, images, pictures, fantasy, fantastic, fantastique, dragon,, creature, charachter, design, dessin, science-fiction, science, fiction, sci-fi, ">
<meta name="language" content="Fr">
<meta name="robots" content="ALL">
<meta http-equiv="reply-to" content="dianeillustration@gmail.com">
<link rel="stylesheet" href="style.css" />
<title>Diane Georges - galerie</title>

<link rel="stylesheet" href="http://diane.georges.voila.net/lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/lightbox.js"></script>

</head>

<body id="haut">
<div id="bloc_page">
<header>
<div id="titre_principal">

<h1>Diane Georges</h1>
<h2>Illustratrice et dessinatrice</h2>
</div>

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<div id="banniere_image">
<div id="banniere_description">
5 contes chinois illustrés
<a href="contechinois.html" class="bouton_rouge">Voir le dossier <img src="images/flecheblanchedroite.png" alt="" /></a>
</div>
</div>

<section>
<article>
<h1><img src="images/ico_pinceau.png" alt="Catégorie illustration" class="ico_categorie" />Illustration</h1>

<p>
<a href="illustration/abeille.jpg" rel="lightbox"><img src="illustration/timbre/tn_abeille.jpg" alt="abeille" /></a>
<a href="illustration/battlesister.jpg" rel="lightbox"><img src="illustration/timbre/tn_battlesister.jpg" alt="battle sister" /></a>
<a href="illustration/bloodletters.jpg" rel="lightbox"><img src="illustration/timbre/tn_bloodletters.jpg" alt="sanguinaire" /></a>
<a href="illustration/centaure.jpg" rel="lightbox"><img src="illustration/timbre/tn_centaure.jpg" alt="centaure"/></a>
<a href="illustration/characdragon.jpg" rel="lightbox"><img src="illustration/timbre/tn_characdragon.jpg" alt="dragon" /></a>

<a href="illustration/coloquinthe.jpg" rel="lightbox"><img src="illustration/timbre/tn_coloquinthe.jpg" alt="coloquinthe" /></a>
<a href="illustration/demon.jpg" rel="lightbox"><img src="illustration/timbre/tn_demon.jpg" alt="demon" /></a>
<a href="illustration/dragonnuit.jpg" rel="lightbox"><img src="illustration/timbre/tn_dragonnuit.jpg" alt="dragon de nuit" /></a>
<a href="illustration/foret.jpg" rel="lightbox"><img src="illustration/timbre/tn_foret.jpg" alt="foret" /></a>
<a href="illustration/jekyll.jpg" rel="lightbox"><img src="illustration/timbre/tn_jekyll.jpg" alt="dr jeckyll" /></a>

<a href="illustrationlausanne.jpg" rel="lightbox"><img src="illustration/timbre/tn_lausanne.jpg" alt="lausanne" /></a>
<a href="illustration/maisondetruite.jpg" rel="lightbox"><img src="illustration/timbre/tn_maisondetruite.jpg" alt="maison détruite" /></a>
<a href="illustration/maisonjaponentier.jpg" rel="lightbox"><img src="illustration/timbre/tn_maisonjaponentier.jpg" alt="maison japonaise" /></a>
<a href="illustration/poulpy.jpg" rel="lightbox"><img src="illustration/timbre/tn_poulpy.jpg" alt="poulpe" /></a>
<a href="illustration/scarabe.jpg" rel="lightbox"><img src="illustration/timbre/tn_scarabe.jpg" alt="scarabée" /></a>

<a href="illustration/sister.jpg" rel="lightbox"><img src="illustration/timbre/tn_sister.jpg" alt="soeur de bataille" /></a>
<a href="illustration/spaceartaurora.jpg" rel="lightbox"><img src="illustration/timbre/tn_spaceartaurora.jpg" alt="planète" /></a>
<a href="illustration/tudedocos.jpg" rel="lightbox"><img src="illustration/timbre/tn_tudedocos.jpg" alt="ossements" /></a>
<br>
</p>
<br><br>

</article>

<aside>

</aside>
</section>

<footer>

<div id="miseajour">
<h1>Dernière mise à jour</h1>
<p>le 02 juillet à 19h00.</p>
</div>
<div id="mes_photos">
<a href="#">
<img src="images/ico_top.png" alt="Haut de page" >
</a>
</div>
<div id="mes_amis">
<h1>Mes collègues</h1>
<ul>
<li><a href="http://illudelia.canalblog.com/">Delia Farwagi</a></li>
<li><a href="http://crazysmile.kegtux.org/?paged=14">Crazy smile</a></li>

</ul>
<ul>
<li><a href="http://evanyia.deviantart.com/">Evaniya</a></li>

</ul>
</div>
</footer>
</div>

</body>
</html>

et celle de la page des contes chinois:

Spoiler :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Le site de l'illustratrice Diane Georges. Images, galeries, illustrations, peintures.... ">
<meta name="keywords" content="diane, georges, atlantisdesetoiles, atlantis, atlantis_des_etoiles, illustrations, illustration, image, images, pictures, fantasy, fantastic, fantastique, dragon,, creature, charachter, design, dessin, science-fiction, science, fiction, sci-fi, ">
<meta name="language" content="Fr">
<meta name="robots" content="ALL">
<meta http-equiv="reply-to" content="dianeillustration@gmail.com">
<link rel="stylesheet" href="style.css" />
<title>Diane Georges - les contes chinois</title>

<link rel="stylesheet" href="http://diane.georges.voila.net/lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/prototype.js"></script>
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://diane.georges.voila.net/lightbox/lightbox.js"></script>

</head>

<body id="haut">
<div id="bloc_page">
<header>
<div id="titre_principal">

<h1>Diane Georges</h1>
<h2>Illustratrice et dessinatrice</h2>
</div>

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="cv.html">CV</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<section>
<article>
<h1><img src="images/ico_pinceau.png" alt="Catégorie illustration" class="ico_categorie" />Illustration-5 contes chinois</h1>

<p>
<a href="conte/brisuredevent1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_brisure1.jpg" alt="double page-brisure de vent" /></a>
<a href="conte/brisuredevent2_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_brisure2.jpg" alt="grande vignette-brisure de vent" /></a>
<a href="conte/brisuredevent3_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_brisure3.jpg" alt="petite vignette-brisure de vent" /></a>
<a href="conte/delacarpeaudragon1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_carpe1.jpg" alt="double page-de la carpe au dragon"/></a>
<a href="conte/delacarpeaudragon2_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_carpe2.jpg" alt="grande vignette-de la carpe au dragon" /></a>

<a href="conte/delacarpeaudragon3_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_capre3.jpg" alt="petite vignette - de la carpe au dragon" /></a>
<a href="conte/foudesinge1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_singe1.jpg" alt="double page-fou de singes" /></a>
<a href="conte/foudesinge1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_singe2.jpg" alt="grande vignette-fou de singes" /></a>
<a href="conte/foudesinge1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_singe3.jpg" alt="petite vignette-fou de singes" /></a>
<a href="conte/tonneaumagique1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_tonneau1.jpg" alt="double page- le tonneau magique" /></a>

<a href="conte/tonneaumagique2_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_tonneau2.jpg" alt="grande vignette-le tonneau magique" /></a>
<a href="conte/tonneaumagique3_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_tonneau3.jpg" alt="petite vignette- le tonneau magique" /></a>
<a href="conte/madamepoule1_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_poule1.jpg" alt="double page- madame poule aux fines plumes" /></a>
<a href="conte/madepoule2_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_poule2.jpg" alt="grande vignette- madame poule aux fines plumes" /></a>
<a href="conte/madamepoule3_dianegeorges.jpg" rel="lightbox"><img src="conte/tn_poule3.jpg" alt="petite vignette- madame poule aux fines plumes" /></a>

<br>

</p>

</article>
<br><br>
<br>
<aside>

</aside>
</section>

<footer>

<div id="miseajour">
<h1> Derniere mise a jour </h1>
<p>le 02 juillet à 19h00.</p>
</div>
<div id="mes_photos">
<a href="#">
<img src="images/ico_top.png" alt="Haut de page" >
</a>
</div>
<div id="mes_amis">
<h1>Mes collègues</h1>
<ul>
<li><a href="http://illudelia.canalblog.com/">Delia Farwagi</a></li>
<li><a href="http://crazysmile.kegtux.org/?paged=14">Crazy smile</a></li>

</ul>
<ul>
<li><a href="http://evanyia.deviantart.com/">Evaniya</a></li>

</ul>
</div>
</footer>
</div>

</body>
</html>

2. comment faire pour avoir une light box d'ou l'on peut passer d'une image à l'autre via des flèches sur le côté???

Merci d'avance.

Marsh Posté le 02-07-2013 à 20:33:34

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *