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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Images liens collées verticalement...

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Images liens collées verticalement...

n°2254383
bachibouzo​oo
Posté le 27-03-2015 à 19:20:33  profilanswer
 

Bonjour !  :bounce:  
Je cherche depuis quelques temps à créer mon site web. J'ai créé un menu composé d'images - liens.  
Or je n'arrive pas à coller verticalement deux images, il y a toujours un espace entre les deux :
 
http://image.noelshack.com/fichiers/2015/13/1427480281-plop.png
 
Je ne sais pas si ça vient des images ou bien des liens.
Dans mon fichier CSS, du côté des images et des liens j'ai tout essayé : margin: 0, padding: 0, border: 0 ...
 
Pouvez-vous m'aider SVP ?  
Merci d'avance !  :hello:

mood
Publicité
Posté le 27-03-2015 à 19:20:33  profilanswer
 

n°2254429
chipeauteu​r
IBM Selectric
Posté le 28-03-2015 à 19:43:18  profilanswer
 

As-tu tenté collapse ? Je ne vois que ça...


---------------
Réveillez-vous, ça fait 2 boeing par jour :fou:
n°2254432
bachibouzo​oo
Posté le 28-03-2015 à 20:40:09  profilanswer
 

Je viens d'essayer border-collapse: collapse; mais rien du tout :pfff: un vrai mystère, j'ai dû oublier un truc dans mon code  :sweat: merci quand même chipeauteur :)
Du coup je vous mets tout :  
L'apparence de mon site avec l'espace entre les images :  
http://image.noelshack.com/fichiers/2015/13/1427571433-capturesite.png
...
Mon code HTML complet :  
-----------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset = "utf-8" />
  <link rel = "stylesheet" href = "../styles/style.css" />
  <title>ACTUALITES</title>
 </head>
 <body>
 <header>
<h1>ACTUALITES</h1>
<h2>Bienvenue sur mon site !</h2>
 </header>
  <?php  
  $jour = date("d" );
  $mois = date("m" );
  $annee = date("Y" );
  $heure = date("H" ) + 1;
  $minute = date("i" );
  ?>
  <nav><a href="#"><img src = "../images/forum.jpg" /></a><a href = "#"><img src = "../images/urnepol.jpg" /></a> <!-- D'autres rubriques à venir. !--></nav>
 <div id = "ladate"><?php echo "Nous sommes le $jour/$mois/$annee et il est $heure h $minute.";?></div>
 
 <div id = "infomaintenance">Information</div><br /><br />
 <p class = "infomaintenancep">Le site est en cours de construction. Il sera en ligne cet été.<br /></p>
 
 === ZONE DE TEST === <br />
 <?php echo "LE PHP EST <strong>OPERATIONNEL</strong>!<br />";
   
  ?>
   
 <?php include ("footer.php" ); ?> <!-- Un footer très simple !-->
 </body>
 
</html>
--------------------------------------------------------------------------------------------------------------------
Ainsi que mon code CSS complet :  
________________________________________________________________________________________________
 
header
{
 background-color: rgb(112,146,190);
}
 
h1
{
 color: #ececec;
 text-shadow:1px 1px #000;
 font-size: 4em;
 margin: 0;
 text-align: center;
 
}
 
h2
{
 color: yellow;
 text-align: center;
}
 
body
{
 background-image: url(../images/superfond.png);
 margin: 0;
}
 
 #infomaintenance
{
 font-size: 1.3em;
 text-decoration: underline;
 color: navy;
 text-align: center;
}
 
.infomaintenancep
{
 text-align: center;
}
#ladate
{
 position: absolute;
 top: 97px;
 left: 10px;
 color: white;
 border: 1px solid white;
 
}
 
p
{
 margin-left: 30px;
}
 
footer
{
 background-color: rgb(3,125,186);
 color: white;
 margin: 0;
 border-top: 5px solid rgb(0,45,145);
 width: 100%;
 position: fixed;
    bottom: 0px;
 
 
}
 
img
{
 margin: 0px;
 border: none;
 padding: 0px;
}
 
a
{
 margin: 0px;
 padding: 0px;
 border: none;
}
 
br
{
 margin: 0px;
 padding: 0px;
 border: none;
}
 
nav
{
 margin: 0px;
 padding: 0px;
 border: none;
 width: 20%;
}
 
______________________________________________________________________________________________________
 
Merci d'avance, si jamais vous trouvez quelque chose qui cloche !


Message édité par bachibouzooo le 28-03-2015 à 20:41:35
n°2255052
caps lock
Posté le 06-04-2015 à 01:18:20  profilanswer
 

Tu utilises la balise nav c'est pour cela que tu as des espaces et tu ne peux pas régler ça en modifiant les photos vu que le problème est déjà hérité.
 
Remplace le contenu de ta balise nav par ce qui suit :

Code :
  1. <nav>
  2.   <ul>
  3.     <li><a href="#">
  4.       <img src="../images/forum.jpg" />
  5.     </a></li>
  6.     <li><a href="#">
  7.       <img src="../images/urnepol.jpg" />
  8.     </a></li>
  9. </ul>
  10.   </nav>


 
Ensuite dans ton CSS tu effaces tout ce que tu as mis sur :  img, br, nav, a
puis tu rajoutes ça :

Code :
  1. ul {
  2.   list-style: none; 
  3. }
  4. li {
  5. font-size : 0px;
  6. }


Message édité par caps lock le 06-04-2015 à 01:18:47

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

  Images liens collées verticalement...

 

Sujets relatifs
Aligner verticalement 2 imagesDeux images l'une en dessous de l'autre
Débutant BDD en général / liens entre tablesajout de plusieurs images en HTML/CSS
Proxytaff Images ... rehost....Macro VBA Powerpoint pour supprimer plusieurs liens sélectionnés
rafraichir plusieurs images en meme tempsLiens Hypertexte dans Listbox VBA
javascript, je n'arrive pas a faire fonctionner ma galerie d'images 
Plus de sujets relatifs à : Images liens collées verticalement...


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