j'ai un design dans lequel je veux mettre des marges internes .
Dans le menu j'applique
padding:5px;
le contenu se décale en desosus, quand j'enlève le padding, sa revins à la normal.
lien
http://www.developpus.com/boutique/template.php
Code : Tout sélectionner
css avec padding dans #menu
html {padding:0px;margin:0px;}
ul {list-style:none;}
body {font-size: 100%;font-family:Arial, SunSans-Regular, Sans-Serif;color:#564b47;padding-right:20px;padding-left:20px;color:#ccc;}
a {color:#ff66cc;font-size:105%;background-color:transparent;}
a:hover {color:#fffccc;background-color:#000;}
#barreTitre {background-color:#90897a ;color:#564b47;font-size:11px;text-transform:uppercase;
text-align:left;}
#recherche {
float:right;
}
/*----- LOGO -------*/
#logo {
height:100px;
background-image: url('http://intensivstation.ch/files/en_templates/css_logo.gif');
background-position-x:right;
background-position-y:center;
background-repeat:no-repeat;
background-color:#ccc;
}
#menu {float:left;background-color:#f9c;border-color:#000fff;color:red;color:yellow;width:25%;font-size:105%;overflow: auto;
}
#menuHorizontal li{
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
vertical-align:middle;
}
#content {float:left;background-color:#ccc;border-color:green;color:green;width:75%;margin-bottom:10px;overflow: auto;
}
#piedPage {float:right;background-color:#ccc;border-color:#000;color:#fff;height:20px;width:75%;margin-bottom:20px;}Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/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>CSS TEMPLATE 02a</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/test.css" />
</head>
<body>
<div id="logo">logo</div>
<div id="barreTitre">
<ul id="menuHorizontal">
<li>
<a href="?page=actualites">
<img class="menuInformatifImg" src="img/picto_actu.png" alt="actualité" />
Actualités
</a>
</li>
<li> </li>
<li>
<a href="?page=faq">
<span class="menuInformatifImg"><img src="img/picto_faq.png" alt="faq" /></span>
» Vos questions
</a>
</li>
</ul>
</div>
<div id="menu">
<h1>Titre 1</h1>
<p>
menu<br>
menu<br>
menu<br>
menu<br>
menu menu menu menu menu menu menu menu menu <br><br>
</p>
</div>
<div id="content">
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
<h2>Titre 2</h2>
<p>content content content content content content
content content content content content content content content </</p>
<p>
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu <br />
</p>
</div>
<div id="piedPage">
pied de page
</div>
</body>
</html>[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]