Bonjour à tous, toutes

Je suis débutant en HTML, je ne connais quasiment rien même,

J'ai récupéré une page HTML et son fichier style.CSS, pour le modifier un peu.
Actuellement la page ne comporte qu'une image de fond, un entête et des liens hypertexte renvoyant vers des fichiers stockés sur des emplacements réseaux.
Le tout est centré sur la page.

Je dois mettre une image à gauche de la page, par dessus l'image de background tout en gardant les lignes de lien hypertexte centré sur la page:

Du coup j'ai copié d'internet ces lignes de code:

Dans le fichier style.CSS:

div.photogauche {
float: left;
width: 100px; /* largeur en pixel de ta photo */
height: 300px; /* hauteur en pixel de ta photo */
margin-right: 0px; /* marge en pixel à droite de la photo */
}

Dans le fichier HTML dans la section <body>, après le code du background:

<div class="photogauche"><img src="photo/image.jpg" width="100" height="300" align="top" /></div>

L'image s'affiche bien, mais les liens hypertextes sont décalés tout à droite de la page, voir renvoyés en dessous de l'image de background si je zoom un peu dans la page HTML.

pouvez vous m'aider à trouver une solution pour recentrer les lignes de texte sur la page, s'il vous plaît ?

2 réponses


Curvata
Réponse acceptée

Tu peux faire sortir ton image du flux de la page en la positionnent sur position:absolute et pour la placer en haut à gauche tu rajoutes top:0; left:0;, elle se placera en haut à gauche du premier élément parent en position:relative. Il faut que tes liens soient bien centrés sur la page sinon ils passeront sous l'image.

samsoon
Auteur

Merci, ça fonctionne bien.