28173 sujets

CSS et mise en forme, CSS3

Salut,

sans code ca va être compliqué de te dire d'ou ca vient. N'aurais-tu pas une page en ligne, ca serait même encore mieux ?
je peut te mettre le code car la je test en local

voila le HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="daimon4.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="panierhaut"><a href="#"><img src="img4/panierhaut.png" alt="panier" /></a></div>
<div id="comptehaut"><a href="#"><img src="img4/comptehaut.png" alt="comptehaut" /></a></div>
<!--DebutConteneurGlobal-->
<div id="conteneurglobal">
 <!--DebutBandeau-->
 <div id="bandeau">
	<h1><span class="casper">DAIMON VPC</span></h1>
		<!--Navigation-->
		<div id="navigation">
			<div id="accueil"></div>
			  <div id="compte"></div>
			  <div id="vente"></div>
			  <div id="promo"></div>
			  <div id="devis"></div>
			  <div id="panier"></div>
		</div>
		<!--FinNavigation-->
 </div>
 <!--FinBandeau-->
 <!--MenuGaucheDebut-->
 <div id="menugauche">
  <!--ConteneurBoite-->
  <div id="conteneurboite">
 	<div id="hautboitegauche"></div>
	<div id="milieuboitegauche"><table>
          <tr>
            <td class="NavboxSide NavboxBody">Abonnez-vous à notre newsletter, indiquez votre email ci-dessous :<br />
              <form method="post" action="/newsletter.php">
                <input name="email" size="12" type="text" />
                <input src="img4/logo/valid-btn.png" alt="Valider" style="vertical-align: top;" type="image" />
              </form></td>
          </tr>
        </table></div>
	<div id="basboitegauche"></div>
  </div>
  <!--FinConteneurBoite-->
  <!--ConteneurBoite1-->
  <div id="conteneurboite1">
 	<div id="hautboitegauche1"></div>
	<div id="milieuboitegauche1">
<table class="Navbox">
            <tr>
              <td class="NavboxSide NavboxBody"><form action="/search.php3" method="post">
                  <input name="nom" type="text" size="14" title="Nom du produit et/ou marque" accesskey="4" />
                  <input name="recordword" type="hidden" value="1" />
                  <input name="image" type="image" style="vertical-align: top" src="img4/logo/go-btn.png" alt="Rechercher"/>
                  <br />
                  <a href="/marques.php3" title="La liste complète des marques">Toutes les marques...</a>
                </form></td>
            </tr>
          </table>
	</div>
	<div id="basboitegauche1"></div>
  </div>
  <!--FinConteneurBoite-->
  <!--ConteneurBoite2-->
  <div id="conteneurboite2">
 	<div id="hautboitegauche2"></div>
	<div id="composant"></div>
	<div id="milieuboitegauche2">
		<ul>
			<li>TEST1</li>
			<li>TEST2</li>
			<li>TEST3</li>
		</ul>
	</div>
	<div id="basboitegauche2"></div>
  </div>
  <!--FinConteneurBoite2-->
 </div>
 <!--FinMenuGauche-->
 <!--DebutMilieu-->
 <div id="conteneurmilieu">
 	<!--NavigationMilieu-->
 	<div id="navigationmilieu"><a class="barre_nav" href="#">>>Accueil</a> / <a class="barre_nav" href="#">Promotion</a></div>
	<!--FinNavigationMilieu-->
		<div id="conteneurproduit">

    	</div>
 </div>
 <!--FinMilieu-->
 <!--DebutMenuDroite-->
 <div id="menudroite">
  <!--ConteneurBoiteDroite-->
   <div id="conteneurboitedroite">
 	<div id="hautboitedroite"></div>
	<div id="milieuboitedroite">1</div>
	<div id="basboitedroite"></div>
  </div>
  <!--FinConteneurBoiteDroite-->
 </div>
 <!--FinMenuDroite-->
</div>
<!--FinConteneurGlobal-->
</body>
</html>


et le CSS :

/*Body*/
body {
	padding:0;
	margin:0;
}

/*DAimon VPC */
.casper {
	position: relative;
	top: -1000px;
	left: -1000px;
}

/*Logo*/
h1 {
	background:url(img4/logo/logo.jpg);
	background-repeat:no-repeat;
	width:100%;
	height:90px;
	margin:0;
	border:1px solid silver;

}

/*ConteneurGlobal*/
#conteneurglobal {
	margin:0px auto;
	width:1002px;
	height:1000px;
}

/*Panier et Compte*/
#panierhaut {
	position:absolute;
	left: 796px;
	top: 56px;
}

#comptehaut {
	position:absolute;
	left: 894px;
	top: 55px;
}

a img {
	border:0
}

/*auche*/
#menugauche {
	float:left;
	display:inline;
	width:194px;
	height:auto;
	margin-top:5px;
	margin-left:3px;
	background-color:#000000;
}

#hautboitegauche {
	background:url(img4/test.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}
	
#milieuboitegauche {
	width:194px;
	height:auto;
	font-family: Helvetica, Arial, sans-serif;
	background:url(img4/body.jpg);
}

#basboitegauche {
	background:url(img4/backbas.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}

#hautboitegauche1 {
	background:url(img4/hautrecherche.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}
	
#milieuboitegauche1 {
	width:194px;
	height:auto;
	font-family: Helvetica, Arial, sans-serif;
	background:url(img4/body.jpg);
}

#basboitegauche1 {
	background:url(img4/backbas.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}

#conteneurmilieu {
	float:left;
	display:inline;
	width:600px;
	height:150px;
	margin-top:15px;
	margin-left:3px;
	margin-right:3px;
}

#menudroite {
	float:left;
	display:inline;
	margin-top:5px;
}

#hautboitedroite {
	background:url(img4/hautnewsletter.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}

#milieuboitedroite {
	background:url(img4/body.jpg);
	width:194px;
	height:auto;
	font-family: Helvetica, Arial, sans-serif;
}

#basboitedroite {
	background:url(img4/backbas.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}

/*Table*/
td.NavboxHead {
	text-align: center;
	font-weight: bold;
	font-size: 9pt;
}
td.NavboxBody {
	font-size: 8pt;
	padding: 4px; overflow: hidden;
	text-align: left;
}
td.NavboxBody a:link, td.NavboxBody a:visited, td.NavboxBody a:active {
	color: #000
}
td.NavboxBody ul {
	padding: 0;
	margin: 0;
	list-style: inside url(/images/sqr-bull.png);
}
td.NavboxPromo {
	font-size: 9pt;
	padding: 3px;
	overflow: hidden;
	text-align: left;
}

#navigationmilieu {
	border-top:1px solid silver;
	border-bottom:1px solid silver;
}

/*menumilieu*/

a.barre_nav {
	font-family : verdana, sans-serif; 
	font-size : 10px; 
	font-weight: bolder; 
	color : #617F9B; 
	background-color : transparent; 
	text-decoration : none;
	vertical-align : top; 
} 

a.barre_nav:visited {
	font-family : verdana, sans-serif; 
	font-size : 10px; 
	font-weight: bolder; 
	color : #617F9B; 
	background-color : transparent; 
	text-decoration : none; 
	vertical-align : top;
} 

a.barre_nav:hover {
	font-family : verdana, sans-serif; 
	font-size : 10px;
	font-weight: bolder;  
	color : #ff6600; 
	background-color : transparent; 
	vertical-align : top;
	text-decoration : underline overline;
}

/*ConteneurProduit*/

#conteneurproduit {
	width:570px;
	margin:10px auto;
	height:200px;
}

#hautboitegauche2 {
	background:url(img4/catalogue.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}
	
#milieuboitegauche2 {
	width:194px;
	height:auto;
	font-family: Helvetica, Arial, sans-serif;
	background:url(img4/body.jpg);
}

#basboitegauche2 {
	background:url(img4/backbas.jpg);
	background-repeat:no-repeat;
	width:194px;
	height:24px;
}

#composant {
	background:url(img4/composant.jpg);
	width:190px;
	height:14px;
	border-left:2px solid #797979;
	border-right:2px solid #797979;
	font-size:4px;
}


Voila
Administrateur
VivaTheBoss a écrit :
Edit : ca ne change rien !! Smiley confus

Et pourtant c'est exactement ça.
Tu peux nous montrer ce que tu as modifié ?
bas jai mis li { margin:0; padding:0 }

mais meme quand c'est pas une liste ca le fait si je mais des balise <p> c'est pareil
Administrateur
VivaTheBoss a écrit :
bas jai mis li { margin:0; padding:0 }

mais meme quand c'est pas une liste ca le fait si je mais des balise <p> c'est pareil

L'élement qui désigne la liste est ul Smiley cligne
ha oui exact que je suis con c'est bien ca mais par contre quand c'est par ex un balise <p> je vire aussi les marg ?

Merci !!
Modifié par VivaTheBoss (19 Jun 2006 - 11:25)
Administrateur
VivaTheBoss a écrit :
ha oui exact que je suis con c'est bien ca mais par contre quand c'est par ex un balise <p> je vire aussi les marg ?

Oui :
Article a écrit :
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.


PS : Tu considères que ce sujet est [Résolu] ? Smiley cligne
Administrateur
VivaTheBoss a écrit :
ouep merci beaucoup de ton aide c'est sympa

Pas de soucis, mais n'hésite pas à marquer ce sujet comme [Résolu] comme je te l'ai indiqué Smiley smile