28220 sujets

CSS et mise en forme, CSS3

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.

<!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&egrave;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&eacute;velopper et optimiser 
			  votre site Internet </strong><br>
			  <br>
			  Coach'Invest Interactive accompagne les entreprises 
			  dans la cr&eacute;ation, le d&eacute;veloppement, l'optimisation 
			  et la gestion au quotidien de leur site Internet.</p>
			<p>Coach'Invest Interactive propose &agrave; ses clients 
			  de nombreux services afin de les aider &agrave; concevoir 
			  et &agrave; mettre en place leur strat&eacute;gie Internet.</p>
			 <ol id="listeservices">
			  <li><img src="images/habillage/cii_pictos_grandequestion.gif" alt="D&eacute;p&ocirc;t et administration de 
				noms de domaine" /><span>1 - <strong>D&eacute;p&ocirc;t et administration de 
				noms de domaine</strong> : outil marketing, votre nom 
				de domaine est un vecteur essentiel de l&#8217;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)
J'explore petit à petit les ressources du site...

Stephan a écrit :
Je ne m'égare pas du tout. Je pense plutôt que tu as une vision tabulaire du positionnement CSS.


C'est le danger quand on part d'une page classique...

Stephan a écrit :
Plus une solution alternative : Faux Columns

J'ai utilisé ce système effectivement beaucoup plus logique en css, ca marche bien.

Enfin, sous IE, ca marche nickel, sous FireFox le contenu sort de ma division contenante (id="corps").

Je continue mes recherches pour ça, si quelqu'un peut m'indiquer quoi chercher pour le reste (pixels ou paragraphe de décalage entre IE et FF), ca m'aiderait beaucoup.
Modifié par tnntwister (05 Oct 2005 - 18:28)