28173 sujets

CSS et mise en forme, CSS3

Pourquoi dois-je positionner mon calque 5 cm au dessus du bouton ?

Bonjour tout le monde,

J'ai placé un calque au dessus d'un bouton, la bordure de ce calque est rouge et épaisse (afin d'attirer l'attention).

Je ne comprends pas pourqoui j'ai du mettre le calque au moins 5 cm au dessus du bouton (en mode création de Dreamweaver 8) pour qu'il apparaisse au dessus du bouton dans IE7 ou Firefox.

Voici les infos de ce calque :

Position : absolute
Top : 133px
Width : 91px

Je vous mets une image du mode création c'est peut être plus parlant.

Le calque devrait aller sur le bouton Etudiants, en DW, il se positionne comme sur la photo, en IE7, il se positionne correctement, mais ce n'est pas normal quand même ?

Merci d'avance pour votre aide.

beegees upload/8457-CALQUEROUGE.jpg
Modifié par beegees (26 Aug 2007 - 09:00)
Modérateur
Salut,

Les moteurs de rendu sont différents que ce soit dans Dreamweaver, dans IE, Firefox ou encore Safari. Vu que tu ne crées pas un site pour qu'il passe sur Dreamweaver, mieux vaut ne pas t'y fier ; il est préférable de regarder directement le résultat au sein des navigateurs. Smiley cligne

Par ailleurs, un positionnement absolu seul ne veut rien dire. Si un élément englobant est déjà positionné, ça se comporte d'une toute autre manière que si ce n'était pas le cas.

Voir ici : http://openweb.eu.org/articles/initiation_absolue/
Salut Koala,

a écrit :
Si un élément englobant est déjà positionné, ça se comporte d'une toute autre manière que si ce n'était pas le cas.


Tu as raison, il y'a déjà des autres calques.

Donc je dois laisser le calque comme cela au deuss de rien ?

Merci encore pour ton aide.

beegees
Modérateur
beegees a écrit :
Tu as raison, il y'a déjà des autres calques.
Positionnés en relatif ou en absolu ?

a écrit :
Donc je dois laisser le calque comme cela au dessus de rien ?
C'est à dire ? Je n'ai pas compris. Smiley murf

Si tu indiques ta structure html et ton code css, ce sera plus facile pour te répondre. Smiley cligne
Re,

Milles excuses pour l'oubi de mon code.

Mon layer s'appelle Layer2.

Voici le code.

Merci sincèrement pour tout.

Beegees

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

  <!-- **** layout stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/style.css" />

  <!-- **** colour scheme stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/green.css" />

  <style type="text/css">
<!--
.Style1 {color: #0000FF}
#Layer1 {
	position:absolute;
	width:317px;
	height:91px;
	z-index:1;
	left: 514px;
	top: 3px;
}
.Style2 {
	color: #FF0000;
	font-weight: bold;
}
#Layer2 {
	position:absolute;
	width:91px;
	height:35px;
	z-index:2;
	left: 63px;
	top: 133px;
	border: thick dashed #FF0000;
}
-->
  </style>
</head>

<body>
  <div id="main">
    <div id="links_container">
      <div id="logo">
        <h1>INSTITUT DE PHARMACIE </h1>
        <h2><span class="Style1"><a href="http://www.ulb.ac.be">UNIVERSITE LIBRE DE BRUXELLES</a><br />
          </span>Boulevard du Triomphe<br />
B-1050 Ixelles<br />
Tel.:  Fax:  </h2>
        <h2>email g&eacute;n&eacute;ral:  <br />
        </h2>
      </div>
      <div id="links">
        <p><br />
        </p>
        <div id="Layer1">
          <table width="200" border="0">
            <tr>
              <td colspan="3"><img src="../images/Institut 01.jpg" alt="immeuble" width="300" height="127"/></td>
            </tr>
          </table>
        </div>
        <p>
        <!-- **** INSERT LINKS HERE **** --></p>
        <p> | <a href="http://www.index.html">INSCRIPTION</a> |<a href="http://">ANNUAIRE</a></p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div id="Layer2"></div>
        <p>&nbsp; </p>
      </div>
    </div>
    <div id="menu" >
	
      <ul>
        <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
        <li><a id="selected" href="#">home</a></li>
        <li><a href="http://www.ebay.be">etudiants</a></li>
        <li><a href="#">futurs etudiants</a><a href="#">NOS ATOUTS </a><a href="#">DEBOUCHES</a></li>
        <li><a href="#">HISTORIQUE </a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
    <div id="content">
      <div id="column1">
        <div class="sidebaritem">
          <h1>latest news</h1>
          <p>
            <!-- **** INSERT NEWS ITEMS HERE **** -->
          </p>
          <h2>01.09.2007</h2>
          <p><span class="Style2">Bienvenue sur notre tout nouveau site internet. </span></p>
          <p><a href="#">read more ...</a></p>
          <p>&nbsp;</p>
          <h2>01.09.2007</h2>
          <p><span class="Style2">Nouveau</span> : MASTER 1 en pharmacie... </p>
          <p><a href="#">read more ...</a></p>
          <p></p>
          <h2>01.09.2007</h2>
          <p><span class="Style2">Nouveau</span> : Notre salle informatique est maintenant &eacute;quip&eacute;e d'un data-projecteur....</p>
          <p><a href="#">read more ...</a></p>
          <p><strong><br />
          01.09.2007</strong></p>
          <p><span class="Style2">Nouveau</span> : Une salle informatique suppl&eacute;mentaire pour nos &eacute;tudiants....</p>
          <p><a href="#">read more ...</a></p>
        </div>
        <div class="sidebaritem">
          <h1>additional links</h1>
          <div class="sbilinks">
            <!-- **** INSERT ADDITIONAL LINKS HERE **** -->
            <ul>
              <li><a href="http://musees/mpmp/index.html" target="_blank">Le Mus&eacute;e de l'institut de Pharmacie </a></li>
            </ul>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <ul>
              <li><a href="http://www.w3schools.com/xhtml/default.asp">L'&eacute;cole doctorale </a></li>
              <li><a href="http://www.w3schools.com/css/default.asp">UMH</a></li>
			  
            </ul>
           
            <ul>
              <li><a href="http://homepages.ulb.ac.be/~jmkauf/">Le site </a></li>
            </ul>
          </div>
        </div>
        <div class="sidebaritem">
          <h1>other information</h1>
          <!-- **** INSERT OTHER INFORMATION HERE **** -->
          <span class="Style2">Nouvel &eacute;tudiant ?</span> N'oubliez pas de transmettre votre dipl&ocirc;me ou l'&eacute;quivalence au secr&eacute;tariat.
          <p>&nbsp;</p>
        </div>
      </div>
      <div id="column2">
        <h1>Lkk </h1> <div><img src="../images/J_MK.jpg" alt="Prof. Kauffmann" width="150" height="182" class="imageFlottante" /> </div>
        <!-- **** INSERT PAGE CONTENT HERE **** -->
        <p><br />
          <br />
            <br />
  </p>
        <p>alt="example graphic" width="125" height="240" /></span>        </h1>
        <p>&nbsp;</p>
        <span class="center"><img src="../images/mortier pilon.jpg" alt="muse01" width="101" height="120" /></span><span class="right"><img src="../images/suppos.jpg" alt="example graphic" width="160" height="130" /></span>
        <p>&nbsp;</p>
      </div>
    </div>
    <div id="footer">
      copyright &copy; 2007| WEBMASTER | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">design by dcarter</a>    </div>
  </div>
</body>
</html>
Modérateur
D'après le code que tu donnes (il en manque visiblement un bout vu les deux feuilles de style situées dans les balises link), le #layer2 n'est pas compris dans un élément positionné. Ici, il sort du flux et se place par rapport au body.

As-tu lu le lien que je t'ai indiqué ? Smiley smile
Je pense que c'est cela que tu souhaîtes : (si c'est pas ça, dis le moi Smiley cligne )

Merci encore pour tout.

beegees

/* global */
html{height: 100%;}

body
{ font-family: arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .78em;
}

p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1
{ font-size: 108%;
  letter-spacing: .1em;
}

h2
{ margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 100%;
  letter-spacing: .1em;
}

img{border: 0px;}

a{outline: none;}

/* image positioning - left, right and center */
.left
{ float: left; 
  padding: 0px 8px 0px 0px;
}

.right
{ float: right; 
  padding: 0px 0px 0px 8px;
}

.center
{ display: block;
  text-align: center;
  margin: 0 auto;
}

/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
}

/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
  padding: 0px;
}

ul li
{ list-style-type: square;
  margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* widths */
#main, #links_container, #menu, #content, #footer
{ width: 100%; 
  margin-left: auto; 
  margin-right: auto;
}

/* links / footer */
#links_container
{ border-top: 1px solid; 
  border-bottom: 1px solid;
  overflow:hidden;

}

#links, #footer
{ height: 80px;  
  padding: 18px 0px 0px 0px;
  font-size: 88%;
  text-transform: uppercase;
  
}

#links
{ text-align: right;
  padding: 10px 10px 0px 0px;
}

#footer
{ text-align: center; 
  border-top: 4px solid;
}

#links a, #footer a, #links a:hover, #footer a:hover{text-decoration: none;}

/* logo */
#logo
{ padding-left: 19px;
  float: left;
}

#logo h1
{ font-family: verdana, arial, sans-serif;
  margin: 0px;
  padding: 18px 0px 0px 0px;
  font-size: 160%;
  letter-spacing: .2em;
  text-transform: uppercase;
}

#logo h2
{ font-family: verdana, arial, sans-serif;
  margin: 0px;
  padding: 5px 0px 0px 0px;
  font-size: 108%;
  letter-spacing: .2em;
}

/* navigation menu */
#menu
{ height: 40px; 
  border-bottom: 1px solid;
  clear:both
 
}

#menu ul{margin: 0px auto;} 

#menu li
{ float: left; 
  margin: 0px 0px 0px 0px; 
  padding: 0px;
  list-style: none;
} 

#menu li a 
{ display: block; 
  float: left; 
  height: 27px;
  text-decoration: none; 
  padding: 11px 19px 2px 19px;
  text-transform: uppercase;
  font-size: 88%;
  border-right: 1px solid;
} 

/* main content */
#content
{ height: auto;
  padding: 20px 0px 0px 0px;
  overflow: hidden;
}

/* column 1 - contains sidebar */
#column1
{ float: right;
  width: 220px;
  padding: 4px 15px 15px 19px;
}

.sidebaritem
{ text-align: left;
  float: left;
  margin: 0px 0px 25px 0px;
}

.sidebaritem h1
{ padding: 0px; 
  margin: 0px 0px 14px 0px; 
  font-weight: bold;
  text-transform: uppercase;
}

.sidebaritem p
{ line-height: 16px; 
  padding: 0px 0px 8px 0px;
}

.sbilinks{padding: 0px 0px 0px 0px;}

.sbilinks ul{margin: 0px auto;} 

.sbilinks li 
{ margin: 0px; 
  float: left; 
  list-style: none; 
} 

.sbilinks li a , .sbilinks li a:hover
{ float: left; 
  height: 16px;
  text-decoration: none; 
  padding: 5px 0px 4px 19px;
  width: 169px;
  border: 0px;
} 

.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 19px;
  text-decoration: none;
}

/* column 2 - page content */
#column2
{ text-align: justify;
  padding: 0px 0px 15px 20px;
  margin: 0px 270px 0px 0px;
}

#column2 h1
{ font-family: arial, sans-serif;
  margin: 0px 0px 12px 0px; 
  font-size: 150%;
  text-transform: uppercase;
  font-weight: normal;
}

#column2 a, #column2 a:hover
{ padding: 0px 0px 2px 0px;
  text-decoration: none;
}

/* additional colour scheme selections */
#colour{margin: 0px 0px 20px 0px;}

#colour a, #colour a:hover{border: 0px;}

.blue
{ background: #FFFFFF url(blue.png) no-repeat left center;
  color: #109CEF;
  padding: 0px 40px 0px 20px;
}

.green
{ background: #FFFFFF url(green.png) no-repeat left center;
  color: #94C65A;
  padding: 0px 40px 0px 20px;
}

.purple
{ background: #FFFFFF url(purple.png) no-repeat left center;
  color: #CE5AEF;
  padding: 0px 40px 0px 20px;
}

.orange
{ background: #FFFFFF url(orange.png) no-repeat left center;
  color: #FF9C21;
  padding: 0px 40px 0px 20px;
}
/*permet d'entourger une image par du texte, je l'utilise par exemple avec la photo de */
.imageFlottante
{
   float: left;
}

Modifié par beegees (26 Aug 2007 - 10:16)
Modérateur
Que ce soit #main, #links_container ou #links, aucun des trois conteneurs n'est positionné en relatif ou en absolu donc on reste dans le même cas que ce que je t'ai dit précédemment.

Ce que je souhaite avant tout, c'est plus que tu comprennes par toi-même d'où ma dernière question. Smiley cligne
Merci pour ta réponse Koala,

Je pense que ta dernière question était :

a écrit :
As-tu lu le lien que je t'ai indiqué ?


Je vais essayer de relire attentivement tes messages et essayer de trouver par moi-même.

Merci pour la piste, c'est vraiment très gentil.

beegees
Sujet clos
Aller à