[CSS] : Postionnement (absolute / relative

Posté par

thomas, le jeudi 12 janvier 2006 à 17:17:13

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

Répondre à thomas Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

zogo, le samedi 30 juin 2007 à 10:21:57

tu dois utiliser le z-index

Répondre à zogo

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

essono, le lundi 30 juin 2008 à 22:04:37

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">

</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>


<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>


</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

Répondre à essono

Posez votre question Répondre

Trucs & astuces pertinents trouvés dans la base de connaissances

02/12 01h28	[CSS] Définir une hauteur verticale et relative à un élément	CSS
24/11 21h44	[CSS] Créer facilement des CSS	CSS
26/01 11h01	la css pour présenter vos images	CSS
27/01 16h03	=CHANGER L ASPECT DU CURSEUR EN CSS=	CSS
12/02 01h07	Commandes TCP-IP sous Windows	Réseaux

Plus d'astuces sur « [CSS] : Postionnement (absolute / relative »

Discussions pertinentes trouvées dans le forum

25/01 20h19	CSS:largeur fixe/relative ...est-ce possible?	8
01/12 18h38	[HTML/CSS] Position "absolute" mais cent	3
14/04 19h01	Affichage avec CSS de maniere "relative"	5
24/08 16h51	Css dans firefox - Postionnement d'une image	12

Plus de discussions sur « [CSS] : Postionnement (absolute / relative »

Logiciels pertinents trouvés dans les téléchargements

	Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...	Catégorie: Extensions Firefox Licence: Freeware/gratuit
	Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...	Catégorie: Editeurs HTML Licence: Open Source
	Firstpage - First Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de...	Catégorie: Editeurs HTML Licence: Freeware/gratuit
	Matizha Sublime - Matizha Sublime 3 est un outil de choix pour tout webmaster sérieux à propos de la création de pages web. D’abord un...	Catégorie: Editeurs HTML Licence: Freeware/gratuit

Plus de logiciels gratuits sur « [CSS] : Postionnement (absolute / relative »

Produits relatifs

TNB CSSP1	Catégorie: Casque audio	7.49 € Alapage
TNB CSSP2	Catégorie: Casque audio	7.49 € Alapage
TNB CSSP4BL	Catégorie: Casque audio	8.69 € Alapage
TNB CSSF033272	Catégorie: Casque audio	44.90 € Alapage

Plus de produits sur « [CSS] : Postionnement (absolute / relative »