Positionner le texte au dessus de l'image

Yreme -  
 Yreme -
Bonjour,
J'ai débuté dans la programmation il y a maintenant 1 ans
et aujourd'hui je repart dans la création d'un nouveau site
Mais il y a toujours un "mais" Je rencontre un problème :
-J'ai mis un fond de forme fixe qui ne suit pas le texte
-Par dessus j'ai placé une image blanche de forme fixe en position absolu qui ne suit pas le texte
-Ensuite j'ai insérer du texte mais il se place automatiquement derrière cette image blanche
alors que mon but est bien sur de le placer au dessus.

Voici mon code html : 
<!DOCTYPE html>
<html>
	<head>
		<title>Accueil</title>
		<link rel="stylesheet" type="text/css]" href="style1.css" />
	</head>
<h2>Mon texte en question</h2>
		
	<body>
	<h2>Mon texte en question</h2>
	<div class="bloc-fixe">
    		<IMG src="wallpaperblanc.PNG">
	</div>
	
	</body>
</html>


Voici mon code css : 

body {
	background-image: url("wallpaper.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.bloc-fixe {
  position:fixed;
  width:100px;
  top:0px;
  left:335px;
  bottom:0px;
}
h2 {
		position:absolute;
		top: 100px;
		left: 200px;
	}

Merci de me répondre.



A voir également:

1 réponse

Réponse 1 / 1
Ysabe_l Messages postés 12717 Date d'inscription   Statut Contributeur Dernière intervention   277
 
Bonjour,

Il y a plusieurs soucis dans le code.

- type="text/css]" => il faut enlever ce crochet qui n'a rien à faire là.
- <h2>Mon texte en question</h2> => il ne doit rien y avoir entre </head> et <body> ... bizarre d'ailleurs de mettre en <h2> alors qu'il n'y a pas de <h1>.
- <IMG src="wallpaperblanc.PNG"> => pensez à bien fermer la balise : <IMG src="wallpaperblanc.PNG" /> et mettre l'attribut alt, c'est mieux de faire les choses bien au fur et à mesure.

Ensuite à quoi sert la div avec la class bloc-fixe ? Juste à mettre l'image ?

Si j'ai bien compris vous voulez :

Un fond à la page.
Un bloc de texte avec une autre image en fond.

Si c'est ça il faut procéder comme ça : 

<!DOCTYPE html>
<html>
    <head>
        <title>Accueil</title>
        <link rel="stylesheet" type="text/css" href="style1.css" />
    </head>
		
    <body>
        <div class="bloc-fixe">
            <h2>Mon texte en question</h2>
        </div>
	
    </body>
</html>


body {
    background-image: url("wallpaper.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bloc-fixe {
    background-image: url("wallpaperblanc.PNG");
    position:fixed;
    width:100px;
    top:0px;
    left:335px;
    bottom:0px;
}

h2 {
    position:absolute;
    top: 100px;
    left: 200px;
}


Et même, vu que ça semble être juste une image blanche, remplacer
background-image: url("wallpaperblanc.PNG");

par
background-color : #ffffff;
0
Rezda
 
nb: ni HTML ni CSS ne sont de la programmation ce sont des repères(balises, propriétés de styles) qui permettent d'indiquer la structure et mise en page.
La programmation c'est une structure logique(algorithme) qui permet de donner des séries d'instructions séquentielles(les séquences étant le déroulement d'un programme selon les événements) ou objet(le principe objet est-grosso modo- l'encapsulation et la fragmentation des séquences) à une machine et ainsi de faire différentes choses en fonction des événements, le plus simple des événements étant la lecture des étapes du programme mais inclut aussi des structures logiques récurrentes et tests conditionnels; les 2 étant plus ou moins proche de la logique binaire du processeur que l'on trouve dans les mathématiques de Booles et la simple arithmétique.
0
Yreme
 
Merci beaucoup de votre réponse.
oui effectivement c'est ce que je cherche à faire,
Après pour le code c'est vrai que je n'avais pas fais les choses très bien.
C'est génial ça marche merci beaucoup.
Mais si vous avez d'autre astuces je l'ai prend avec joie. =D
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse