Positionnement html

Fermé

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 - 15 juil. 2012 à 11:25
Utilisateur anonyme - 23 juil. 2012 à 14:05

Bonjour,

sur mon site :
ile-du-bien-etre.com

j'ai bien réussi à positionner mes éléments.
Seulement, j'ai utilisé des POSITION : RELATIVE

Mais que pour réussir à placer mes SPAN, j'ai meme du utiliser des TOP et LEFT en NÉGATIF !!

JE TROUVE ceci pas normal, et je fais donc appel à vos lumières pour me dire si je peux y remedier ou si c'est normal ?

je vous remercie !

Voyez mon code au niveau du BOUTON 1 :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Plénitude Beauté 06 Cannes - Soins esthétiques à domicile</title>
<meta name = "description" content = "sur Cannes et environs. Massages, épilations, soins visage, maquillage et manucure-pédicure."/>
<meta name="Identifier-URL" content ="www.plenitude-beaute06.com"/>
<meta name="keyboards" content ="massage, massages, masseuse épilation, soin visage, maquillage, maquilleuse, manucure, pédicure, à domicile, cannes, antibes, la bocca, 06, 83, alpes maritimes, var "/>

<link href="style.css" rel="stylesheet" type="text/css">
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  
<script>
$(document).ready(function() {
  $("#toggler").click(function() {
    event.preventDefault();
    $(this).next('.expand').slideToggle("slow");
  });
});
</script>

<style type="text/css">
 
#logo { float: right; top:0px; width:370px; height:90px; z-index:1;}

#accueil { position:absolute; top:170px; width:860px; height:30px; z-index:1;}

#carrousel {
	width: 845px;
	height: 360;}

#defilement { float: left; top:615px; width:261px; height:436px; z-index:1;}

#cadeau { position:absolute; top:1055px; width:829px; height:167px; z-index:2;}


.ombrage {
  box-shadow: 1px 1px 12px #555;
}

</style>

</head>

<body>

					<div class="container">
 					 <div class="header">
  
      <!-- LOGO -->

  
     <div id="logo">
<a href="http://plenitude-beaute06.com" style="color:#9E2A95;text-decoration:none;font-size:48px;float: right;">Plénitude Beauté</a><br>

<a href="http://plenitude-beaute06.com" style="color:#9E2A95;text-decoration:none;font-size:25px;line-height:10px;float: right;">Esthétique et bien-etre à domicile</a><br>

<a href="http://plenitude-beaute06.com" style="color:#BED58E;text-decoration:none;font-size:32px;line-height:50px;float: right;">Soins aux produits de la mer</a>
 </div>
 

     <!-- BOUTONS ACCUEIL -->


  <div id="accueil" class="font1">
  <center>
  
  <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">ACCUEIL</a> &nbsp;
  
  <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">BLOG</a> &nbsp;
  
 <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">CONTACT</a> &nbsp;
 
 <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">PARRAINAGE</a> &nbsp;
 
 <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">PRODUITS</a> &nbsp;
 
 <a href="http://plenitude-beaute06.com" style="color:black;;text-decoration:none">PARTENAIRES</a>
   </center>
  </div>
  </div>
    					<div class="content"> 

    <!-- CAROUSEL -->

  
<span id="carrousel" style="position: relative; top: 0px;left:5px;">
   <param name="movie" value= "carrousel/index.html" />
   <param name="quality" value="high" />
   <embed src="carrousel/index.html" width="845px" height="360px" quality="high">
</span>
 
 
     <!-- BIENVENUE -->


         <div id="bienvenue" class="bienvenue" style="position: relative; top: 0px;left:5px;">
 <table><tr><td background="images/bienvenue.png" style="background-repeat: no-repeat;">
         <center>
            <p class="font2">Bienvenue</p>
                       
                <a class="font3">Plénitude Beauté vous propose des prestations de qualité à<br> domicile sur Cannes et environs<br><br>
Sur rendez-vous, tous les jours <br>de 9h à 20h.<br><br>
Téléphone : 06 61 87 83 65<br>
plenitude-beaute@laposte.net<br>
Rejoignez-nous sur <br></a>

<a href="https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2Fplenitudebeaute"><img src="images/facebook.png" width="44px" height="44px" alt="facebook"/></a>
</center>
</td></tr></table
        ></div>
    
    

    <!-- BOUTON 1 -->


        <div class="ombrage" style=" width:87px;height:87px; position: relative; top: -350px; left:300px;">
    <span><param name="movie" value= "icone/index1.html" />
     <embed src="icone/index1.html" quality="high"></span>
</div>    
    
    
    <!-- BOUTON 2 -->

        <!--<div style=" width:87px;height:87px; position: relative; top: -320px; left:300px;">
           <div class="ombrage">
    <a><param name="movie" value= "icone/index2.html" />
     <embed src="icone/index2.html" quality="high"></a>
</div>    
    </div>    



    <!-- BOUTON 3 -->


       <!-- <div style=" width:87px;height:87px; position: relative; top: -290px; left:300px;">
           <div class="ombrage">
    <a><param name="movie" value= "icone/index3.html" />
     <embed src="icone/index3.html" quality="high"></a>
</div>    
    </div>
    


    <!-- CADEAU -->

<span id="cadeau" class="cadeau" style="position: relative; top: -90px;left:5px;"><IMG SRC="images/cadeau.png"></span>

<span id="cadeau" class="font2" style="position: relative; top: -250px;left:60px;height:50px;">Carte cadeau</span>

<span id="cadeau" class="font3" style="position: relative; top: -225px;left:120px;height:70px;width:520px;" >Pour un événement ou simplement pour faire plaisir, pensez à <br> offrir une carte cadeau. Elle est valable sur toutes les prestations <br> pendant 6 mois.</span>

A voir également:

4 réponses

Réponse 1 / 4

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
17 juil. 2012 à 14:34

pas d'idée ?

Réponse 2 / 4

Utilisateur anonyme
19 juil. 2012 à 10:27

Créé une page vide et place tes divs correctement en leur donnant des couleurs.
Ensuite, tu copies/colles le contenu.

En gros, je pense que tu es mal parti...

Réponse 3 / 4

ickyknox Messages postés 1157 Date d'inscription jeudi 13 décembre 2007 Statut Membre Dernière intervention 17 mars 2024 48
22 juil. 2012 à 09:17

bonjour

merci, mais comment on donne une couleur à une div ?

Réponse 4 / 4

Utilisateur anonyme
23 juil. 2012 à 14:05

dans ton code css, tu rajoutes ceci :

background-color: red;

T'as toutes les couleurs en anglais.
Si toutefois la div ne s'affiche pas, c'est sûrement parce que tu ne lui a pas donner d'hauteur ( "height: 200px;" par exemple ).

Discussions similaires

la balise ou

ou ou

&nbsp ; Quelle Fonction ?

positionner une image dans une page html

Espace en HTML