Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
988 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  (HTML) Alignement d'image.

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

(HTML) Alignement d'image.

n°2196307
mlleatlant​is
Posté le 02-07-2013 à 20:33:34  profilanswer
 

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&eacute;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&eacute;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&eacute;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&eacute;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&egrave;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&egrave;re mise &agrave; 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&egrave;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&eacute;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&egrave;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.

mood
Publicité
Posté le 02-07-2013 à 20:33:34  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  (HTML) Alignement d'image.

 

Sujets relatifs
[HTML/CSS/Javascript] Vidéo YoutubeCtrl+ affecté à un bouton sur page HTML
Faire interpréter par jquery un contenu html mis à jourCentrer une image par rapport à un texte
[HTML/CSS/Javascript] Nombreuses Images avec mignatureConflit au niveau des CSS ? Image qui ne s'affiche pas
Problème changement d'image lors d'un onclickmenu déroulant au dessus de la page HTML
Effet filter sur une image 
Plus de sujets relatifs à : (HTML) Alignement d'image.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR