High-Tech Santé Médecine Droit-Finances

Mettre

une vidéo

dans sa PSP

Rechercher : dans
Par :

[CSS] : Postionnement (absolute / relative

Dernière réponse le 30 jun 2008 à 22:04:37 thomas, le 12 jan 2006 à 17:17:13 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS] : Postionnement (absolute / relative » dans :
CSS:largeur fixe/relative ...est-ce possible? Voir
Différence entre les positions absolute..... Voir
Positionner des éléments grâce aux CSS Voir Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Définir une hauteur verticale et relative à un élément VoirParfois, on voudrait définir une hauteur verticale à un élément. C'est simple en utilisant des valeurs fixes (en pixels pas exemple), mais c'est plus compliqué en utilisant des hauteurs relatives (en pourcentages). Ce problème est souvent...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Posez votre question Répondre

1

zogo, le 30 jun 2007 à 10:21:57

Tu dois utiliser le z-index

   
Répondre à zogo

2

 essono, le 30 jun 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">
<!--
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

   
Répondre à essono
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net