[CSS] : Postionnement (absolute / relative

Fermé
thomas - 12 janv. 2006 à 17:17
 essono - 30 juin 2008 à 22:04
Bonjour à tous,

je débute dans le développement en css dans le but de répondre aux normes du w3c et pour profiter pleinement des avantages fournis par cette technologie.

J'ai toutefois un problème pour organiser ma page et positionner mes éléments, je vous mets le code ici et vous explique en dessous :

/* Balises génériques */

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url("../images/fond.gif");
}

img {
border:0px;
}

p {
text-align:justify;
}

/* Cadres */

div#cadre_page{
margin-left:auto;
margin-right:auto;
text-align:center;
width:800px;
border:1px solid #FFFFFF;
}

/*Header*/

div#header{
background-image:none;
height:140px;
}

p.titre, #titre{
display:none;
}

div#header_top{
height:120px;
background-image:url("../images/header.jpg");
}

/*Menu*/

div#menurxs{
top:120px;
}

div#menurxs ul{
position : relative;
margin:0px;
padding:0px;
}

div#menurxs ul li{
position : absolute;
top:0px;
margin:0px;
padding:0px;
list-style:none;
}

div#menurxs ul li A{
position: relative;
height:20px;
display: block;
overflow: hidden;
}

ul#menu span{
position:absolute;
display:block;
top:50px;
left:50px;
}

li#menuhome{
background: url("../images/home_off.gif") no-repeat 0px 0px;
width:100px;
}
li#menuhome A{
background: url("../images/home_off.gif") no-repeat 0px -20px;
}
li#menuhome A:hover{
background: url("../images/home_on.gif") no-repeat 0px 0px;
}
li#menunews{
background:url("../images/news_off.gif") no-repeat 0px 0px;
left:100px;
width:100px;
}
li#menunews A{
background:url("../images/news_off.gif") no-repeat 0px -20px;
}
li#menunews A:hover{
background:url("../images/news_on.gif") no-repeat 0px 0px;
}
li#menuteam{
background:url("../images/team_off.gif") no-repeat 0px 0px;
left:200px;
width:100px;
}
li#menuteam A{
background:url("../images/team_off.gif") no-repeat 0px -20px;
}
li#menuteam A:hover{
background:url("../images/team_on.gif") no-repeat 0px 0px;
}
li#menuwars{
background:url("../images/wars_off.gif") no-repeat 0px 0px;
left:300px;
width:100px;
}
li#menuwars A{
background:url("../images/wars_off.gif") no-repeat 0px -20px;
}
li#menuwars A:hover{
background:url("../images/wars_on.gif") no-repeat 0px 0px;
}
li#menulinks{
background:url("../images/links_off.gif") no-repeat 0px 0px;
left:400px;
width:100px;
}
li#menulinks A{
background:url("../images/links_off.gif") no-repeat 0px -20px;
}
li#menulinks A:hover{
background:url("../images/links_on.gif") no-repeat 0px 0px;
}
li#menufiles{
background:url("../images/files_off.gif") no-repeat 0px 0px;
left:500px;
width:100px;
}
li#menufiles A{
background:url("../images/files_off.gif") no-repeat 0px -20px;
}
li#menufiles A:hover{
background:url("../images/files_on.gif") no-repeat 0px 0px;
}
li#menuirc{
background:url("../images/irc_off.gif") no-repeat 0px 0px;
left:600px;
width:100px;
}
li#menuirc A{
background:url("../images/irc_off.gif") no-repeat 0px -20px;
}
li#menuirc A:hover{
background:url("../images/irc_on.gif") no-repeat 0px 0px;
}
li#menucontact{
background:url("../images/contact_off.gif") no-repeat 0px 0px;
left:700px;
width:100px;
}
li#menucontact A{
background:url("../images/contact_off.gif") no-repeat 0px -20px;
}
li#menucontact A:hover{
background:url("../images/contact_on.gif") no-repeat 0px 0px;
}

/* // Fin menu */

/* // Fin Header */

/*Contenu*/

div#contenu{
position:relative;
margin:0px;
padding:5px;
background-color:#0B31BD;
}
div#contenu_gauche{
float:left;
width:200px;
}

#contenu_gauche_top{
text-align:left;
height:20px;
background:url("../images/haut_gauche.gif");
padding-left:20px;
}

#contenu_gauche_centre{
text-align:left;
padding-left:30px;
background-color:#AFC0FF;
}

#contenu_gauche_footer{
text-align:right;
height:15px;
background:url("../images/bas_gauche.gif");
}

div#contenu_droite{
float:right;
left:219px;
padding-left:1px;
width:570px;
}

#contenu_droite_top{
text-align:left;
height:20px;
background:url("../images/haut_contenu.gif");
padding-left:20px;
}

#contenu_droite_centre{
text-align:left;
padding-left:30px;
background-color:#AFC0FF;
}

#contenu_droite_footer{
text-align:right;
height:15px;
background:url("../images/bas_contenu.gif");
}

/* // Fin contenu*/

/*Footer*/

div#footer{
width:800px;
height:20px;
background:url("../images/footer.gif");
}

/* // Fin footer*/

/* // Fin cadres*/

Problème : le div#contenu se place par dessus le cadre de ma page, je n'arrive pas à positionner correctement les éléments et ce après de multiples tentatives, voyez vous quelque chose qui ne va pas ? Est ce que j'utilise les bonnes méthodes ???

Merci d'avance pour tous ceux qui prendront un peu de leur temps précieu pour m'aider
A voir également:

2 réponses

tu dois utiliser le z-index
1
bonjour excusez moi j'ai un problème avec ma feuille de style.
mon site est completement décalé sur les autres machines
sauf la mienne, de plus l'image de mon logo ne s'affiche pas
je vous donne le lien de mon site
http://elatemeyongdakar.ifrance.com
de plus ma feuille de style est com suit


/* Body */
BODY {
margin: 0px 0px 0px 0px;
background-color : white;
color : #FFFFFF;
}




td,tr,p,div {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}




h4 {
color: Black; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px; font-weight: bold;
}




h5 {
color: Black; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 14px; font-weight: bold;
}




h6 {
color: Black; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; font-weight: bold;
}




/* Links */
a:link, a:visited {

font-size: 11px; color: Black; text-decoration: none;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}




a:hover {
color: #18A1F8; text-decoration: none;
}




/* Horizontal Line */
hr {
background: #BFCBE1; height:2px; border: 1px inset;
}




/* --Default Class Settings-- */
a.sublevel:link, a.sublevel:visited {
font-size: 11px;
color: #000000;
font-weight: bold;

height: 14;




}




a.sublevel:hover {
font-size: 11px;
color: #87CEFA;
text-decoration: none;
font-weight: bold;
height: 14;




}








a.mainlevel:link, a.mainlevel:visited {
font-size: 11px;
color: Black;
font-weight: bold;
height: 16px;

border-bottom: 0px dashed #1C90FF;
width: 94%;
line-height: 16px;
text-indent: 4px;
}




a.mainlevel:hover {
font-size: 12px;
color: Black;
text-decoration: none;
font-weight: bold;
background-color: #FF8907;
border-bottom: 0px dashed #000000;
width: 94%;
line-height: 16px;
height: 16px;
text-indent: 4px;
}
/* Content - Sections & Categories */
.contentpane {








}




.contentpaneopen {
/* border : 2px ridge #DCDCDC; */
}




.contentheading {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: Black;
text-align:left;
}





.contentdescription {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-align: left;
}




.pathway {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: Black;
font-weight: bold;
}










/* Links */
a.blogsection:link, a.blogsection:visited {
color: #075486; text-decoration: none; font-weight: normal;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}




a.blogsection:hover {
color: #000000; text-decoration: none;
}




a.pathway:link, a.pathway:visited {
color: Black; text-decoration: none; font-weight: normal; font-size: 9px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}




a.pathway:hover {
color: Black;
text-decoration: blink;
background-color: White;
}




a.weblinks:link, a.weblinks:visited {
color: #18A1F8; text-decoration: none; font-weight: normal;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}




a.weblinks:hover {
color: #000000; text-decoration: none;
}




a.readon:link, a.readon:visited {
color: #102131; text-decoration: none; font-weight: bold;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}




a.readon:hover {
color: black;
text-decoration: underline;
font-weight: bold;
}

table.pathwaytable td {
background-color: white;
margin: 0px 0px 0px 0px;
width: 100%;
border-left: solid 0px #FF8907;
border-right: solid 0px #FF8907;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;
text-align: center;
}

table.moduletable td {
background-color: #9E7B65;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}

/* table.moduletable {
margin: 0px 0px 0px 0px;
width: 100%;
border-left: solid 0px #FF8907;
border-right: solid 0px #FF8907;
border-top: solid 0px #FF8907;
border-bottom: solid 0px #FF8907;
text-align: left;
} */

table.moduletable {
margin: 0px 0px 0px 0px;
width: 100%;
border-left: solid 10px #C6B7A2;
border-right: solid 10px #AFA38D;
border-top: solid 10px #C6B7A2;
border-bottom: solid 10px #AFA38D;
text-align: left;
}






table.moduletable th {
font: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
width: 100%;
background-color: transparent;
background-image: url(../../../images/M_images/arrow.png);
background-repeat: no-repeat;
text-indent: 11px;
background-position: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: gray;
color: #FF8F04;
text-align: left;
}



.moduleheading {
font: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000
text-align: center;
height: 28px;
line-height: 22px;
white-space: nowrap;
width: 100%;
background-color: #daa520;
background-image: url(/templates/dhlmambo_bmx/images/right.gif);
background-repeat: no-repeat;
text-indent: 14px;
background-position: 1px;
border-bottom-width: 4px;
border-bottom-style: dotted;
border-bottom-color: Black;
}




.componentheading {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: Black;
text-align:left;
}




.boxheading {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}




.button {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 11px;
background: #FF8907;
color: White;
border-style: solid;
border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;
}




.inputbox {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: Black;
background: #FFFFFF;
border: 1px solid;
}

.searchbox {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: Black;
background: #FFFFFF;
border: 1px solid;
}


.slogan {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #BFCBE1;
}




.searchsite {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #ffffff;
}




/** category text format and links **/
.category {
color: #000000; font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold; text-decoration: none;
}




a.category:link, a.category:visited {
color: #000000; font-weight: bold;
}




a.category:hover {
color: #18A1F8;
}




.poll {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
line-height: 14px
}




.sectiontableentry1 {
}




.sectiontableentry2 {
background-color : #006ED7;
}




.sectiontableheader {
background-color : #006BD2;
color : #000000;
font-weight : bold;
}




.small {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
font-weight: normal;
}


.templatedate {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #18A1F8;
text-decoration: none;
font-weight: normal;
}


.createdate {

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
font-weight: normal;
}




.modifydate {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
font-weight: normal;
}




ul {
margin: 0px 0px 0px 0px;
}




li {
list-style: inside url(../../../images/M_images/arrow.png) 3px;
list-style-image: url(../../../images/M_images/arrow.png);
}




.fase4rdf {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; color: #000000; font-weight: normal;
}




a.fase4rdf:link {
font-size: 11px; font-weight: bold; color: #18A1F8;
}




a.fase4rdf:hover {
font-weight: bold; color: #9AA6BE;
}




table.searchintro {
background-color: #BFCBE1;
}




table.contact {
}




table.contact td.icons {
}




table.contact td.details {
font-size: 10px;
font-weight: bold;

font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
.pagenav {
color: Blue;

}




a.pagenav {
color: Blue;
}




.pagenavbar {
background-color: #9FAAD2;
}

a.pagenav, a.pagenav:visited {
font-weight: bold;
color: White;
}

a.pagenav:hover {
color: White;
font-weight: bold;



/* Styles for dhtml tabbed-pages */
.ontab {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #576386;
border-left: outset 2px #191970;
border-right: outset 2px #6495ED;
border-top: outset 2px #191970;
border-bottom: solid 1px #d5d5d5;
width: 14%;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
}
.offtab {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color : #e5e5e5;
/*background-color: #EEEEEE;*/
border-left: outset 2px #DADEED;
border-right: outset 2px #DADEED;
border-top: outset 2px #DADEED;
border-bottom: solid 1px #d5d5d5;




width: 14%;
text-align: center;
cursor: hand;
font-weight: normal;
color: #00008B;
}
.tabpadding {
//border-bottom: solid 0px #777777;
}




.tabheading {
background-color: #6566E1;
/*border-left: solid 1px #777777;*/
/*border-right: solid 1px #777777;*/
color: #FFFFFF;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: left;
}




.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
}





/* Horizontal Line */
hr {
background: #191970; height:2px; border: 1px inset;
}




hr.separator {
background: Navy;
height: 1px;
width: 75px;
border: 0px;
}


et enfin l'index de mon template est est :

<?php echo "<?xml version=\"1.0\"?>";
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $mosConfig_sitename; ?></title>
<?php include ("editor/editor.php"); ?>
<?php initEditor(); ?>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<?php include ("includes/metadata.php"); ?>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="templates/dhlmambo_bmx/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="templates/dhlmambo_bmx/images/favicon.ico" />
</head>
<BODY BGCOLOR=#FFFFFF>
<!-- ImageReady Slices (surf_slice.psd) -->

<table width="770" border="0" height="136" cellpadding="0" cellspacing="0" >
<tr>

<td vAlign="center" align="center" width="554" bgcolor="#A08073"><img src="templates/dhlmambo_bmx/images/logo2.gif"></td>
<td vAlign="right" width="216" <img src="templates/dhlmambo_bmx/images/right.gif"> </td>
<td colspan=2 bgcolor="#A08073" align="center" valign="middle">


<td colspan=2><?php mosLoadModules('bottom'); ?>
</tr>

</table>



<table width="770" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF">

<tr>
<td vAlign="top" width="25%" >

<table width="100%" border="0">
<tr><td vAlign="top" ><?php mosLoadModules('left'); ?>
</td></tr>
</table>
</td>

<td vAlign="top" width="55%">

<table width="100%" border="0" >

<tr><td vAlign="top" ><?php include_once('mainbody.php'); ?>
</td></tr>




</table>

</td>

<td vAlign="top" width="20%">
<table width="100%" border="0">
<tr><td vAlign="top" bgcolor="#FFFFFF"><?php mosLoadModules('right'); ?></td></tr>
</table>




</td>
</tr>
</table>


<tr><td>
<?php mosLoadModules('bottom'); ?>
</td></tr>

</td>
</tr>
</table>

<!-- End ImageReady Slices -->
</BODY>
</HTML>

désolé de vous surcharger ou de ne pas avoir creer de nouvelle discussion cé la première fois que je post et j'ai cherché en vain ou creer une nouvell discussion encore 100 excuse
0