template float et marge

par **x@v** » 02 sept. 2008, 11:28

Bonjour,
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;}

xhtml

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>&nbsp;</li>
		<li>
			<a href="?page=faq">
				<span class="menuInformatifImg"><img src="img/picto_faq.png"  alt="faq" /></span>
				&raquo;&nbsp;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>

Merci

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

template float et marge

Répondre

Étendre la vue Revue du sujet : template float et marge

template float et marge