18041 sujets

Questions générales et questions de débutants

Image mal placé par rapport à mon texte

Bonjour,

C'est la première fois que je poste sur ce forum, car d'habitude j'arrive a me débrouiller grâce à google !

J'ai un petit soucis de placement d'image, je m'explique, je code en html5 / css3 (pour le plaisir, mon site sera en xhtml strict) et j'ai voulu inséré une image qui apparait en décalé (un peu plus haut) par rapport à mon texte. J'ai lu plein de tutoriel qui explique comment palier à ce problème, j'en ai suivi un qui donne toutes les astuces pour placer n'importe ou mais cela ne marche pas !


<header role="banner">

<h1><a href="http://www.neoclickservices.fr"><img src="img/logo.png">Neo Click Services</a></h1>

<nav role="navigation">
   <a href="index.html">Accueil</a>
   <a href="prestations.html">Prestations</a>
   <a href="outils.html">Outils</a>
   <a href="telechargements.html">Téléchargements</a>
   <a href="divers.html">Divers</a>
   <a href="contact.html">Contact</a>
</nav>

</header>


Donc voila si vous pouviez m'éclairer à ce sujet, je vous en serai vraiment très reconnaissant ! [/code=html]
Modifié par micky90 (31 Mar 2010 - 14:49)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour et bienvenu sur le forum,

Comme te l'a fait remarqué Laurie-Anne, ce serait sympa de mettre un peu d'ordre dans ton premier post. Smiley cligne

Ensuite, le code css déjà en place serait un plus pour qu'un débuggage puisse être effectué.

Enfin, sache que les titres <h1> dans ton cas ont un rendu de type block.
Ils occupent donc toute la largeur disponible et poussent les éléments suivants dans le code html en-dessous d'eux.
Bonjour,

Premièrement, je tiens à m'excuser de ne pas avoir colorier mon code html. Je n'avais effectivement pas lu les règles de bases du forum Smiley confused mais maintenant c'est chose faite !

Deuxièmement, je suis désolé de ne répondre qu'aujourd'hui mais ma box est tombée en panne environ 2 heures après que j'ai posté ce message... Maintenant il n'y a plus de problème, j'ai une belle box neuve, je pourrai vous répondre plus rapidement ! Smiley ravi

Voila le code CSS déjà mis en place (et en couleur ce coup la ! Smiley langue ) :


/*       Mise en page de base       */

@font-face 
{
	font-family: 'NewRegular';
	src: local('NewRegular'), local('HittheRoad'), url('fonts/HITROAD.ttf') format('truetype');
}

html 
{ 
  font-size: 100%;
} 

body 
{ 
  margin: 0; 
  padding: 0; 
  font-family: "Century Gothic", Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.4;
  color: white; 
  background-color: black; 
} 

/* Liens */ 

a 
{ 
  text-decoration: none; 
} 
a:link 
{ 
  color: #fff; 
} 
a:visited 
{ 
  color: #ddd; 
} 
a:hover, a:focus, a:active 
{ 
  text-decoration: underline;
} 
a:focus, a:active 
{ 
  outline: none; 
} 

a img 
{ 
  border: none; 
} 
 
h1 
{ 
  display: inline-block;
  margin-top: 0;
  font-family: "NewRegular", Tahoma, Arial, sans-serif;
  font-weight: normal;
  font-size: 80px; 
  text-align: right;
  line-height: 0.5;
  color: white;
  text-shadow: 0px 0px 5px #fff; 
} 
h1 span 
{ 
  display: block;
  font-weight: normal;
  font-size: 50px; 
  color: black;
  text-shadow: 0px 0px 5px #666; 
} 
h1 a, h1 a:visited 
{
  color: white;
  text-decoration: none;
}
h1 a:hover, h1 a:focus 
{
  text-decoration: none;
  outline: none;
  text-shadow: 0px 0px 15px #fff; 
}


Si jamais vous trouvez des erreurs, ben corrigez moi ! Je n'ai pas été plus loin dans le code CSS, car je ne fais que me donner une idée générale pour l'instant, la page n'est pas codé en html (le texte, placement des blocks section : un pour le corps l'autre pour des news) entièrement pour l'instant
Modifié par micky90 (31 Mar 2010 - 15:07)
Sujet clos
Aller à