28212 sujets

CSS et mise en forme, CSS3

Positionnement et z-index

Bonjour
je profite du fait que l'on me donne de bonnes explications pour rebondir sur un probleme que je n'arrvie pas a resoudre
je n'arrive pas a placer ma balise #texte
voici la page

 <div id="container">
      <div id="menu">
        <ul> 
        <li>Présentation * </li> 
        <li><a href="#">1</a> * </li> 
        <li><a href="#">2</a> * </li> 
        <li><a href="#">3</a></li> 
        </ul> 
        </div>
        <div class="logo"><img src="images/logo.png" width="320" height="160" /></div>
   	  	<div class="photo"><img src="images/sable.png" width="284" height="188" /></div>
      	<div class="ruban" ></div>
      	<div class="texte>ici le texte</div>
    </div>


l'ideal serait que le texte commence sur la balise ruban mais là chez moi c'est en dessous
voici le css

body{
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	background-attachment:fixed;
	background-position: center bottom;
	background-color: #B6A987;
	background-image: url(images/fond.jpg);
	background-repeat: no-repeat;
	text-align:center;
}
#container {
	width: 980px;
	margin: 0 ;
	text-align: left;
	position: relative;
}
.logo {
	height: 165px;
	width: 320px;
	margin-left: 70px;
	margin-top: 35px;
	z-index:2;
	position:absolute;
}
#menu {
	font-size: 21px;
	color: #FFFFFF;
	text-align:left;
	width:600px;
	height:22px;
	z-index:2;
	left:373px;
	margin-left: 70px;
	margin-top: 25px;
}
#menu ul { padding:0; margin:0; list-style:none; }
#menu ul li { display:inline; text-decoration:underline; }
#menu ul li a {
	color: #302A1C;
	text-decoration:none;
}
#menu ul li a:hover {
	text-decoration:underline;
}
.photo{
	width: 236px;
	float: right;
	margin-right: 15px;
}
.ruban {
	width: 1002px;
	height: 238px;
	background: url(images/ruban.png) no-repeat bottom center;
	z-index: 0;
}

.texte{
	display:block;
	font-size: 12px;
	color: #100E07;
	text-align: justify;
	width: 450px;
	margin-left: 380px;
	z-index:3;
	position:relative;
}



n'hesitez pas ame dire si des choses vous paraissent inutle dans le code, que je puisse corriger et comprendre
merci de votre aide
nadège
merci
en fait ce sur quoi je bloque emme en lisant les tutoriaux c'est a quoi sert simplement la posistion absolut et relative et quand est il utile de mettre l'un ou l'autre ou aucun
Nad21 a écrit :
en fait ce sur quoi je bloque emme en lisant les tutoriaux c'est a quoi sert simplement la posistion absolut et relative et quand est il utile de mettre l'un ou l'autre ou aucun
Effectivement ce n'est pas évident. Smiley murf

C'est d'ailleurs pour cela que plusieurs tutoriels expliquent dans le détail le positionnement CSS. Le plus simple est de lire le Guide de survie du positionnement CSS (en prenant bien le temps de suivre chacun des liens proposés).

Cela peut prendre un peu de temps mais ce ne sera pas perdu. Smiley smile

PS : concernant le z-index il se trouve que pour que cela fonctionne il faut que l'élément soit positionné.
Sujet clos
Aller à