Forums Développement Multimédia

Aller au contenu

Besoin d'aide position.

CODE HTML CSS

2 réponses à ce sujet

#1 Fing3rRr

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 122 messages

Posté 13 April 2012 - 10:03 AM

Hello tout le monde,

Voilà mon problème, je n'arrive pas a placer mon background noir au dessus de mon diaporama.
Pour que ce soit plus clair je vous envoie un screen !

Voici également mes code html/css :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Abbaye Notre Dame de l'étoile</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" lang="fr" content="Thomas Quantin" />
  <meta name="description" content=""/>
  <meta http-equiv="imagetoolbar" content="no"/>
  <meta name="keywords" content=""/>

  <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  <script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="js/carrousel.js" type="text/javascript"></script>
</head>
<body>
  <div id="top"></div>
   <div id="wrapper">
        <div id="header">
 
         <div id="slider1">
           <div class="slide">
          <img src="images/slide1.png"/>
           </div>
           <div class="slide">
          <img src="images/slide2.png"/>
           </div>
           <div class="slide">
          <img src="images/slide3.png"/>
           </div>
         </div>
       
         <div id="nav">
          <ul>
           <li class="separateur"><a href="index.html">accueil</a></li>
           <li class="separateur"><a href="#">animations</a></li>
           <li class="separateur"><a href="#">visites</a></li>
           <li class="separateur"><a href="#">histoire</a></li>
           <li><a href="#">liens</a></li>
          </ul>
         </div>
       
       
         <div id="titre">
          <h1>Abbaye cicstercienne Notre Dame de l'
étoile</h1>
          <img src="images/titre.png" alt="titre Abbaye cicstercienne Notre Dame de l'étoile"/>
         </div>
 
       
         <div id="logo">
          <img src="images/logo.png" alt="logo abbaye"/>
         </div>
       
        </div>
 
        <div id="content">
 
         <div id="contentP">
       
         </div>
       
         <div id="contentS">
       
         </div>
 
        </div>
 
   </div>
   <div id="bckTitre">
 
   </div>
  </div>
</body>

</html>
 


*{
margin : 0;
padding : 0;
}
body{
position:relative;
background:url("../images/bck_body.png");
}
div#top{
height:316px;
background:url("../images/bck_header.jpg") center top;

}
li{
list-style:none;
}
a{
text-decoration:none;
}
/****************/
/* WRAPPER  */
/****************/
div#wrapper{
margin : 0 auto;
width : 940px;
}
/****************/
/* HEADER  */
/****************/
div#header{
position:absolute;
top:0px;
width:940px;
height:220px;
padding:0px;
margin:0px;
}
/********************/
/* NAVIGATION  */
/********************/
div#nav{
position:absolute;
top:9px;
right:0;
font-size:20px;
background:url("../images/bck_menu.png");
background-repeat:repeat-x;
height:42px;
}
div#nav ul{
}
div#nav ul li{
text-align:center;
display:inline;
float:left;
width:180px;
line-height:42px;
}
.separateur{
width :2px;
height : 42px;
background-image: url("../images/separation_menu.png");
background-repeat:no-repeat;
background-position:right;
}
div#nav ul li a{
color:#FFF;
}

/* SLIDER  */

div#slider1{
z-index:0;
position:absolute;
top:0px;
right:0px;
width:875px;
}
.slide{
position:absolute;
top:0px;
right:0px;
height:316px;
width:875px;
margin-left:40px;
}
.slide img{

}
/* TITRE */
div#titre h1{
text-indent:-9999px;
position:absolute;
top:270px;
right:65px;
}
/*A Vérifier titre et bcktitre */
div#titre img{
position:absolute;
top:270px;
right:65px;
}
div#bckTitre{
z-index:2;
width:58%;
float:right;
margin-top:-55px;
background-image: url("../images/bck_titre.png");
background-repeat:repeat-x;
height:55px;

}
div#logo{
position:absolute;
top:190px;
right:-20px;
}
 

Merci d'avance à ceux qui prendront du temps pour me donner un petit coup de pouce ! :)

Fichier(s) joint(s)



#2 Xiimao

    Ceinture Orange

  • Members
  • PipPipPip
  • 35 messages

Posté 17 April 2012 - 14:59 PM

je te conseil de creer une image noir en 50*50 et d'utiliser dans ton css

exemple
{
background: url('image.png');
}

si j'ai bien compris ta question ça devrait fonctionner... enfin j'espere :)

#3 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 24 April 2012 - 11:30 AM

Bonjour Fing3rRr,

je n'ai pas compris ta demande, peux-tu préciser un peu ?
Par exemple en expliquant un peu les deux images jointes ou en donnant des informations sur le code (id, class) pour qu'on puisse repérer l'endroit qui te pose problème ;)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP