18041 sujets

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

[Résolu] Quelques petites questions ...

Salut à tous, je viens de m'inscrire, et je débute avec le html.

J'ai deux petits problèmes:
- Mon texte ( h1 et p ) passe en dessous des images.


<html>
	<head>
	<title> Dino Astuces </title>
	<link rel="stylesheet" type="text/css" href= "style1.css" />
	</head>

	<body>

		<h1>Bienvenue sur Dino Astuces !</h1>
	<div id="pres">
	<p>Bienvenue sur Dino Astuces, un site entièrement consacré aux secrets de DinoRPG !<br /> Vous pourrez trouver ici les missions, les quêtes, les bons trucs à savoir et encore plein d'autres choses !<br /> Mais ce n'est pas tout, vous disposerez aussi d'un tas d'informations sur le jeu !<br /> Rendez-vous tout de suite dans les rubriques du menu !
	</p></div>

	<div id="picture">
		<a href="index.htm"><img src="images/bannière.png" alt="Dino Astuces" title="Dino Astuces"></a>
	</div>

	<div id="picture2">
		<img src="images/sidebar.png" alt="Dino Astuces">
	</div>

	<div id="winh">
		<img src="images/winh.png" alt="Dino Astuces">
	</div>

	<div id="winc">
		<img src="images/winc.png" alt="Dino Astuces" height="308" width="481">
	</div>

	<div id="winb">
		<img src="images/winb.png" alt="Dino Astuces">
	</div>

	<div id="liste1">
		<ul>
			<b><a href="index.htm"><li>Accueil</li></a>
			<li>Liste</li>
			<li>Missions</li>
			<li>Quêtes</li>
			<li>Lieux</li>
			<li>Astuces</li>
			<li>Dinoz</li>
			<li>L'équipe</li></b>
		<ul>	
	</div>
	
	</body>
</html>


Comment je peux modifier cela ? (Si vous avez besoin des images ou du fichier *.css je peux vous les donner.)

- Et, deuxieme problème, je me demande comment je pourrait mettre à ma liste, à la place des gros points, des petites images.

Merci d'avance pour vos réponse !
Modifié par Pleaser (20 Jan 2008 - 15:09)
Bonjour,

Pour ton texte qui passe sous les images, il nous faut le fichier CSS. En l'état, impossible à deviner.
En ce qui concerne les puces personnalisées, tu as la possibilité de cibler une image particulière grâce à list-style:
ul {list-style:url(ma-puce.png);}
Merci beaucoup pour le style de liste, ca marche à merveille !

Voilà le Fichier *.CSS :

body {
	background-image: url("Images/bg.png");
	font-family: "trebuchet ms", arial, sans serif;
}

#pres {
	position:absolute;
	top: 230px;
	left: 410
}

#picture {
	position:absolute;
	top: 25px;
	left: 250px;
}

#liste1 {
	position:absolute;
	top: 210px;
	left: 245px;
	color: #993300;
	list-style: url("images/element_li.gif");
}

#picture2 {
	position:absolute;
	top: 180px;
	left: 240px;
}

#winh {
	position:absolute;
	top: 196px;
	left: 380px;
}

#winc {
	position:absolute;
	top: 242px;
	left: 380px;
}

#winb {
	position:absolute;
	top: 550px;
	left: 380px;
}

---------------
-----Liens-----
---------------

a:link {
	color: #993300;
	text-decoration:none;
}

a:visited {
	color: #CC6600;
	text-decoration:none;
}

a:active {
	color: #purple;
	text-decoration:none;
}

a:hover {
	color: purple;
	text-decoration:none;
}

---------------


Encore merci !
Modifié par Pleaser (20 Jan 2008 - 12:22)
C'est bon, j'ai trouvé la solution !

Pour ceux qui se posent encore la question :

J'ai utilisé la variable z-index :
p {
               z-index: 2;
}


Elle agit en fonction de l'axe "Z", il faut donner un nombre plus élevé si on veut que notre objet soit plus près du premier plan, et il faut donner un nombre plus bas si l'on veut avoir un objet qui se rapproche de l'arrière plan Smiley cligne

Voilà !
Modifié par Pleaser (20 Jan 2008 - 15:09)
Pleaser a écrit :
J'ai utilisé la variable z-index

Ce n'est pas une variable mais une propriété.
By the way, à voir toutes ces positions absolues, j'ai un très mauvais pressentiment… Je te conseille la lecture de l'article suivant: Maîtriser le positionnement CSS dans toutes les situations et surtout, les passages concernant l'extraction d'éléments du flux, dont ceci:
a écrit :
Gardez en tête que laisser à un élément son comportement naturel est toujours à privilégier. Autrement dit, on ne sortira un élément du flux que lorsqu'on ne pourra pas faire autrement.
Sujet clos
Aller à