Bonjour,
Je me suis amusé à prendre une des pages d'un développeurs de ma boite pour la faire en css, j'arrive à valider le html et le css, et le résultat est assez proche de l'original.
original : http://www.coachinvest.com/interactive/offre_services_internet/index.php
Avancée actuelle : http://www.coachinvest.com/interactive/modele.php
Demeurent quelques problèmes sur lesquels je bute...
1. [ EDIT : trouvé]
2. sous IE, ma ligne de pointillés horizontale s'affiche bien, sous Firefox en revanche il me manque la marge haute, je ne sais pas trop pourquoi. [EDIT : maintenant ca apparaît bien sous IE, c'est sur FF que j'ai des problèmes ]
3. idem pour l'espace de 1 ou 2 pixels dans le header qui perdure sur le bord droit, j'ignore d'ou il vient et dès que j'ajoute un pixel dans ce bloc, il va à la ligne comme s'il n'avait plus de place.
4. un dernier truc : le bouton de validation, aligné à droite sur la page originale, ne veut pas être aligné à droite là. Si je lui met un text-align sur l'input du bouton submit, il ne le prend pas en compte.
Si vous avez besoin, je vous montre le code html.
et la feuille css (enfin la partie que j'ai rajoutée)
Merci pour vos éventuelles réponses.
Modifié par tnntwister (06 Oct 2005 - 09:46)
Je me suis amusé à prendre une des pages d'un développeurs de ma boite pour la faire en css, j'arrive à valider le html et le css, et le résultat est assez proche de l'original.
original : http://www.coachinvest.com/interactive/offre_services_internet/index.php
Avancée actuelle : http://www.coachinvest.com/interactive/modele.php
Demeurent quelques problèmes sur lesquels je bute...
1. [ EDIT : trouvé]
2. sous IE, ma ligne de pointillés horizontale s'affiche bien, sous Firefox en revanche il me manque la marge haute, je ne sais pas trop pourquoi. [EDIT : maintenant ca apparaît bien sous IE, c'est sur FF que j'ai des problèmes ]
3. idem pour l'espace de 1 ou 2 pixels dans le header qui perdure sur le bord droit, j'ignore d'ou il vient et dès que j'ajoute un pixel dans ce bloc, il va à la ligne comme s'il n'avait plus de place.
4. un dernier truc : le bouton de validation, aligné à droite sur la page originale, ne veut pas être aligné à droite là. Si je lui met un text-align sur l'input du bouton submit, il ne le prend pas en compte.
Si vous avez besoin, je vous montre le code html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Coach'Invest Interactive - Web Agency</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="commun/styles/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="conteneur">
<div id="header">
<div class="section_gauche">
<a href="index.php"><img src="images/logo_coachivest_interactive.gif" width="203" height="105" border="0" alt="Coach'Invest Interactive"></a>
<span class="nav5">Accès client</span>
<form action="espace_client/identification.php" method="post">
<input name="login" type="text" class="form2" value="login"><br />
<input name="mdp" type="password" class="form2" value="mot de passe"><br />
<input name="Submit" type="submit" class="bouton2" value=" ... ">
</form>
</div>
<ul id="menu_principal">
<li onMouseOver="javascript:this.style.background='#AE6276'" onMouseOut="javascript:this.style.background='#CA7C8F'" class="nav1"><a href="coachinvest_interactive/index.php">Coach'Invest Interactive ?</a></li>
<li onMouseOver="javascript:this.style.background='#B88722'" onMouseOut="javascript:this.style.background='#D5A03D'" class="nav2"><a href="offre_services_internet/index.php">Notre offre<br>de service</a></li>
<li onMouseOver="javascript:this.style.background='#639D25'" onMouseOut="javascript:this.style.background='#7CB741'" class="nav3"><a href="site_internet/client_sites_internet.php">Nos clients </a></li>
<li onMouseOver="javascript:this.style.background='#7F8CA9'" onMouseOut="javascript:this.style.background='#97A6C4'" class="nav4"><a href="contact/index.php">Contactez<br>nous</a></li>
</ul>
<p class="pointillesh"><img src="images/m.gif" alt="" width="1" height="1"></p>
</div>
<div id="corps">
<div id="contenu"><h1 class="nav2" id="titre_page">Notre offre<br>de service</h1>
<p><strong>Développer et optimiser
votre site Internet </strong><br>
<br>
Coach'Invest Interactive accompagne les entreprises
dans la création, le développement, l'optimisation
et la gestion au quotidien de leur site Internet.</p>
<p>Coach'Invest Interactive propose à ses clients
de nombreux services afin de les aider à concevoir
et à mettre en place leur stratégie Internet.</p>
<ol id="listeservices">
<li><img src="images/habillage/cii_pictos_grandequestion.gif" alt="Dépôt et administration de
noms de domaine" /><span>1 - <strong>Dépôt et administration de
noms de domaine</strong> : outil marketing, votre nom
de domaine est un vecteur essentiel de l’image
de votre entreprise.</span></li>
<!-- etc.... -->
</ol>
<p class="pointillesh"><img src="images/m.gif" alt="" width="1" height="1"></p>
<div id="footer"><?=SITE_CONTACT_NAME; ?> :: <?=SITE_CONTACT_ADDRESS; ?><br>
<?=SITE_CONTACT_TEL; ?> ::
<?=SITE_CONTACT_URL; ?></div>
</div>
</div>
</div>
</body>
</html>
et la feuille css (enfin la partie que j'ai rajoutée)
html {
margin: 0;
padding: 0;
height:100%;
}
body {
/* scrollbar-3dlight-color:;
scrollbar-arrow-color:#F1A319;
scrollbar-base-color:#F1A319;
scrollbar-darkshadow-color:#F1A319;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: normal;
color: #6D6D6D;
background-color:#EEEEEE;
height:100%;
}
div#conteneur {
border: 1px solid #32347E;
background-color:#FFFFFF;
padding:1px;
width:750px;
color: #6D6D6D;
margin-left:auto;
margin-right:auto;
height:100%;
}
div {
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #6D6D6D;
}
div#header {
width:748px;
text-align:right;
}
div#header div.section_gauche {
float:left;
width:203px;
max-width:203px;
background-color:#B23A3C;
color: #FF7478;
height:212px;
margin-right:1px;
text-align:left;
}
div#header div.section_gauche form {
margin:0px;
padding:2px;
text-align:center;
}
div#header div.section_gauche span.nav5 {
margin-top:8px;
margin-left:5px;
width:140px;
color: #FF7478;
text-align:left;
display:block;
}
div#header div.section_gauche input.form2 {
font-size: 11px;
font-weight: bold;
color: #FF7478;
width: 190px;
margin-top:3px;
border: thin solid #B10104;
}
div#header div.section_gauche input.bouton2 {
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
margin-top:5px;
border: thin none #B10104;
background-color: #FF7478;
}
div#header ul#menu_principal {
list-style-type: none;
margin:0px;
padding:0px;
display:inline;
width:524px;
background-color:#FFFFFF;
}
div#header ul#menu_principal li {
width:130px;
height:212px;
min-height:212px;
text-align:right;
margin-right:1px;
float:left;
padding-right:5px;
}
div#header ul#menu_principal li a {
position:relative;
right:0px;
top:173px;
/* display:block; */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
div#header ul#menu_principal li.nav1 { background-color:#CA7C8F; }
div#header ul#menu_principal li.nav1 a { color: #EEAEC3; text-decoration: none; }
div#header ul#menu_principal li.nav2 { background-color:#D5A03D; }
div#header ul#menu_principal li.nav2 a { color: #EBC73F; text-decoration: none; }
div#header ul#menu_principal li.nav3 { background-color:#7CB741; }
div#header ul#menu_principal li.nav3 a { color: #A0D945; text-decoration: none; }
div#header ul#menu_principal li.nav4 { background-color:#97A6C4; }
div#header ul#menu_principal li.nav4 a { color: #BFCBE2; text-decoration: none; }
div#corps {
clear:both;
width:746px;
background-image:url('../../images/habillage/fond_ligne_marron.png');
background-repeat:repeat-y;
height:100%;
}
p.pointillesh {
background:url(../../images/pointilles.gif) repeat-x top left;
margin-top:5px;
margin-bottom:5px;
padding:0px;
}
div#corps h1#titre_page {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #EBC73F;
text-decoration: none;
position:relative;
top:0px;
left:0px;
padding:13px 7px;
width:134px;
margin-left:-150px;
margin-right:2px;
/* display:none; */
float:left;
}
div#corps div#contenu {
margin-left:155px;
width: 585px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #6D6D6D;
}
div#footer {
width:524px;
height:40px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #6D6D6D;
text-decoration: none;
}
Merci pour vos éventuelles réponses.
Modifié par tnntwister (06 Oct 2005 - 09:46)