après avoir parcouru la plupart des tutos de mediabox, je me suis lançé dans le dev de mon propre site. J'ai opté pour le html combiné avec une CSS
Mais me voilà confonté à plusieurs problèmes : des div qui se positionnent differement suivant les navigateurs, des styles différents suivant les mêmes browsers...
Quelle galère
pour infos :
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="fr">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>index</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="woim">
<link rel="stylesheet" href="format.css" type="text/css">
</head>
<body>
<div class="global">
<div class="entete">
</div>
<div class="filet">
</div>
<div class="basemenu">
<div class="portfolio">
<p class="version">+ Portfolio version 1.0 +</p>
</div>
</div>
<div class="menuprint">
</div>
<div class="print">
</div>
<div class="menulogo">
</div>
<div class="logo">
</div>
<div class="menuweb">
</div>
<div class="web">
</div>
<div class="menuautres">
</div>
<div class="autres">
</div>
<div class="filetvert">
</div>
<div class="flamme2">
</div>
<div class="flamme1">
</div>
<div class="zebra">
</div>
<div class="pied">
</div>
<div class="contact">
</div>
<div class="mail"><p class="adress">contact@lemondesign.fr</p>
</div>
<div class="welcome">
<p class="text">+ Bienvenue sur LemonDesign +</p><p class="text1">Ce portfolio représente un échantillon des travaux réalisés
dans différents domaines de la création graphique pour différents
supports de communication.</p>
</div>
<div class="navigation">
<p class="text">+ Navigation +</p><p class="text2">Pour
consulter les travaux, choissisez un thème dans le menu principal.
Sélectionnez ensuite une vignette dans les previews pour visionner
le projet.</p><p class="text2">Un agrandissement est également possible graçe au bouton + situé en haut à gauche de chaque illustration.</p>
<p class="text2">{ enjoy }</p>
</div>
</div>
</body>
</html>
ma CSS :
CODE
body {
margin:0;
text-align:center;
background-image:url('images/fond.gif');
}
.global {
position:relative;
width:750px;
height:565px;
background-color:#FFFFFF;
border:1px solid#999999;
z-index:0;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
.entete {
position:absolute;
background-image:url('images/accueil_01.gif');
left:0px;
right:0px;
width:270px;
height:75px;
z-index:1;
}
.filet {
position:absolute;
background-image:url('images/accueil_02.gif');
margin-left:270px;
margin-top:0px;
margin-bottom:0px;
width:2px;
height:565px;
z-index:2;
}
.basemenu {
position:relative;
left:0px;
top:65px;
width:750px;
height:53px;
background-color:#99CC33;
z-index:1;
}
.menuprint {
z-index:2;
background-image:url('images/accueil_07.gif');
position:absolute;
left:296px;
top:107px;
width:30px;
height:13px;
}
.print {
background-image:url('images/accueil_08.gif');
position:absolute;
left:326px;
top:107px;
width:13px;
height:13px;
z-index:2;
}
.menulogo {
background-image:url('images/accueil_09.gif');
position:absolute;
left:339px;
top:107px;
width:77px;
height:13px;
z-index:2;
}
.logo {
background-image:url('images/accueil_10.gif');
position:absolute;
left:416px;
top:107px;
width:13px;
height:13px;
z-index:2;
}
.menuweb {
background-image:url('images/accueil_11.gif');
position:absolute;
left:429px;
top:107px;
width:43px;
height:13px;
z-index:2;
}
.web {
background-image:url('images/accueil_12.gif');
position:absolute;
left:472px;
top:107px;
width:13px;
height:13px;
z-index:2;
}
.menuautres {
background-image:url('images/accueil_13.gif');
position:absolute;
left:485px;
top:107px;
width:64px;
height:13px;
z-index:2;
}
.autres {
background-image:url('images/accueil_14.gif');
position:absolute;
left:549px;
top:107px;
width:13px;
height:13px;
z-index:2;
}
.filetvert {
width:750px;
height:3px;
z-index:1;
position:absolute;
left:0px;
top:132px;
background-color:#99CC33;
}
.flamme2 {
background-image:url('images/accueil_26.gif');
position:absolute;
left:655px;
top:419px;
width:95px;
height:146px;
z-index:1;
}
.flamme1 {
background-image:url('images/accueil_28.gif');
position:absolute;
left:582px;
top:449px;
width:73px;
height:116px;
z-index:1;
}
.zebra {
background-image:url('images/accueil_29.gif');
position:absolute;
left:0px;
top:480px;
width:270px;
height:24px;
z-index:1;
}
.pied {
left: 0px;
width:582px;
height:21px;
z-index:1;
position:absolute;
top:506px;
background-color:#99CC33;
}
.contact {
z-index:2;
background-image:url('images/accueil_34.gif');
position:absolute;
left:115px;
top:511px;
width:15px;
height:11px;
border:1px none#FFFFFF;
}
.welcome {
position:absolute;
text-align:right;
width:200px;
height:66px;
z-index:1;
left: 51px;
top: 161px;
}
.navigation {
position:absolute;
text-align:right;
width:200px;
height:115px;
z-index:1;
left: 51px;
top: 250px;
}
.mail {
position:absolute;
text-align:right;
width:112px;
height:14px;
z-index:2;
left:136px;
top:-4px;
}
.portfolio {
position:relative;
text-align:right;
width:200px;
height:auto;
z-index:2;
left:51px;
top:33px;
}
.version {
font-family: Verdana, Arial, Helvetica, sans serif;
font-size:65%;
font-weight:bold;
color:#FFFFFF;
}
.text {
font-family: Verdana, Arial, Helvetica, sans serif;
font-size:65%;
font-weight:bold;
color:#99CC33;
}
.text1 {
font-family: Arial, Helvetica, sans-serif;
font-size:60%;
color:#666666;
}
.text2 {
font-family: Arial, Helvetica, sans-serif;
font-size:60%;
color:#99CC33;
}
.adress {
font-family: Arial, Helvetica, sans-serif;
font-size:60%;
color:#FFFFFF;
}
merci de vos conseils éclairés pour résoudre mes problèmes d'interprétation du style et de positionnement des div(ou code, ptet même les deux).
