28172 sujets

CSS et mise en forme, CSS3

Padding right fonctionne pas

Bonjour a tous,

Je suis en train de faire un slider, et j'ai un soucis au niveau des marges intérieur. Celle de gauche fonctionne comme je le veux mais celle de droite ne s'applique pas correctement.

Voici ce que j'ai :
http://img7.hostingpics.net/pics/240434test.png

Et voici ce que j'aimerais avoir :

http://img7.hostingpics.net/pics/682026test.png

Je vous mets tous mon code css et html car je n'ai aucune d'où peu provenir ce problème.


<!DOCTYPE html>

<html>
    <head>
        <title>HollyDev | Tous les tutoriels</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
        <meta name="description" content="Blog personnel regroupant différents tutoriels sur le developpement web et le graphisme" />
        <meta name="keywords" content="Photoshop, codeigniger, CodeIgniter, php, html, css, javascript, actionscript, flash, illustrator" />
        <meta name="author" content="kosciuszkov@gmail.com" />
        <meta name="revised" content="07/09/2010" />
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/tutoriels.js" ></script>
    </head>
    <body>
	
	<div id="vignette">
		<a href="#"><img src="images/vignette.png" alt="Dernier tutoriels" /></a>	
	</div>
	
	<div id="contener">
	    <div id="logo">
		<a href="#"><img src="images/logo.png" alt="Logo" /></a>    
	    </div>
	    
	    <div id="rss">
		<p>S’abonner : <a href="#">Tutoriaux</a> | <a href="#">Commentaires</a> | <a href="#"> Blog</a>
		<img src="images/rss.png" />
	    </div>
	    
	    <div id="menu">
		<ul>
		    <li><a href="#">Blog</a></li>
		    <li><a href="#">Tutoriels</a></li>
		    <li><a href="#">Ressources</a></li>
		    <li><a href="#">Contact</a></li>
	    </div>
	
	    <div class="clear"></div>
	    
	    <div id="last_tuto">
		    <table>
			<tr>
			    <td><a href="#"><img src="images/tuto.png" alt="Tuto" title="Tuto" /></a></td>
			    <td><a href="#"><img src="images/tuto.png" alt="Tuto" title="Tuto" /></a></td>
			    <td><a href="#"><img src="images/tuto.png" alt="Tuto" title="Tuto" /></a></td>
			    <td><a href="#"><img src="images/tuto.png" alt="Tuto" title="Tuto" /></a></td>
			</tr>
		    </table>
	    </div>
	    
	    <div id="corps">
		
			<div style="padding: 0;" class="block">
				
				<div class="categories">
					<h1>Graphisme</h1>
					<h3>La souris est ma meilleur amie</h3>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
				</div>
				
				<div class="categories2">
					<h1>Developpement</h1>
					<h3>Le bloc note est mon meilleur ami</h3>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
					<div class="sujet">
						<img src="upload/1.png" /><br/>
						PHP
					</div>
				</div>
				
				<div class="clear"></div>
				
				<h3 style="margin-top: 30px;" class="blue">Galerie</h3>
				<div class="gallery">
					<img class="prec" src="images/prec.png" />
					<img class="suiv" src="images/suiv.png" />
					<div class="slider">
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
						<img src="upload/re.png" />
					</div>
				</div>
				<h3 style="margin-bottom: 30px;" class="blue">Derniers commentaires</h3>
				
				<div class="clear"></div>
			</div>
	    </div>
	    
	    <div id="side_bar">
			<div class="menu">
				<h1>Graphisme <img src="images/graphisme.png" /></h1>
				<ul>
				<li><a href="#">Photoshop</a> (46) <sup><img src="images/etoile.png" /></sup></li>
				<li><a href="#">Illustrator</a> (5)</li>
				<li><a href="#">After Effect</a> (78)</li>
				<li><a href="#">3DS Max</a> (78)</li>
				<li><a href="#">Maya 2010</a> (78) <sup><img src="images/etoile.png" /></sup></li>
				<li><a href="#">In Design</a> (78)</li>
				</ul>
			</div>
			
			<div class="menu">
				<h1>Développement<img src="images/developpement.png" /></h1>
				<ul>
				<li><a href="#">PHP</a> (46)</li>
				<li><a href="#">CodeIgniter</a> (145) <sup><img src="images/etoile.png" /></sup></li>
				<li><a href="#">Jquery</a> (78)</li>
				<li><a href="#">HTML / CSS</a> (78)</li>
				<li><a href="#">Python</a> (78)</li>
				<li><a href="#">Flash</a> (78) <sup><img src="images/etoile.png" /></sup></li>
				<li><a href="#">MySQL</a> (78)</li>
				<li><a href="#">Joomla</a> (78) <sup><img src="images/etoile.png" /></sup></li>
				</ul>
			</div>
				
	    </div>
	    
	</div>
	
	<div id="footer">
	    
	</div>
    </body>
</html>





/* Import */
@import url("content.css");

/* Reset */

*{margin: 0; padding:0;}
a img{border: none;}


body{
    background : #0e1926 url("../images/background.png") repeat-x;
    height : 100%;
    color : #FFF;
}

#vignette{
    position : absolute;
    top : 131px;
}

#contener{
    width : 940px;
    margin-left : auto;
    margin-right : auto;
    position : relative;
}

#logo{
    float : left;
    margin-right : 50px;
}

#rss{
    margin-top : 10px;
    float : left;
}

#menu{
    float : right;
    margin-top : 10px;
}

#last_tuto{
    position: absolute;
    right : 0;
    top: 70px;
}

#last_tuto table tr td{
    padding-left : 10px;
}

#corps{
    margin-top : 120px;
    float : left;
    width : 640px;
    margin-bottom : 50px;
}

.block{
    width : 620px;
    height : auto;
    background : #132130;
    border : 1px solid #192839;
    margin-top : 20px;
    padding : 20px 10px 20px 10px;
}

.pagination{
    margin-top : 10px;
}

#side_bar{
    margin-top : 120px;
    float : right;
    width : 280px;
}

.menu{
    width : 280px;
    height : auto;
    background : #132130;
    border : 1px solid #192839;
    margin-top : 20px;
}

#footer{
    clear : both;
    height : 50px;
    width : 100%;
    background : #050d15;
}

.gallery{
	height : 100px;
	margin-left : auto;
	margin-right : auto;
	background : #FFF;
	background : url("../images/gallery.png") repeat-x;
	overflow : hidden;
	position: relative;
	width : 450px;
	padding-left: 50px;
	padding-right: 50px;
}

.slider{
	width : 5000px;
	position : relative;
	top : 5px;
}

.clear{clear : both;}




a{
    text-decoration : none;
    color : #7eae4f;
}
.menu h1{
    width : 254px;
    height : 39px;
    margin-left : 3px;
    margin-top : 3px;
    background : url("../images/h1.png") repeat-x;
    font-family : "Myriad Pro", Arial sans-serif;
    line-height : 35px;
    padding-left : 20px;
    color : #000;
	font-size : 28px;
}

.menu h1 img{
    float : right;
    margin-top : 3px;
    margin-right : 10px;
}

.menu ul{
    margin-left : 30px;
    margin-top : 10px;
    list-style-type : none;
}

.menu ul li{
    margin-bottom : 10px;
    vertical-align : middle;
}

.menu ul li a {
    font-size : 14px;
    font-weight : bold;
}

.menu ul li:hover{
    padding-left : 10px;
}

.block img.img{
    border : 3px solid #192839;
    float : left;
    margin-right : 10px;
}

.block h1{
    font-size : 20px;
    font-weight : normal;
}

.block h3{
    font-size : 11px;
    font-weight : normal;
    color : #58a4cf;
    margin-bottom : 10px;
}

#rss a{
    color : orange;
}

#menu ul li{
    float : left;
    list-style-type : none;
    margin-left : 20px;
}

#menu ul li a{
    color : #32506d;
    font-size :18px;
    font-weight : bold;
}

#menu ul li a:hover{
    color : #FFF;
}

.pagination .prec{
    float : left;
}

.pagination .suiv{
    float : right;
}

/* Page tutoriels */ 

.block .categories{
	width: 280px;
	float : left;
	height : auto;
}

.block .categories2{
	width: 280px;
	float : right;
	height : auto;
}

.block .categories2 h1{
	color : #58a4cf;
	font-size : 28px;
	font-weight : bold;
}

.block .categories h1{
	color : #58a4cf;
	font-size : 28px;
	font-weight : bold;
}

.block .categories2 h3{
	color : #7eae4f;
	font-size : 14px;
	border-bottom : 1px solid #fff;
	padding-left : 40px;
}

.block .categories h3{
	color : #7eae4f;
	font-size : 14px;
	border-bottom : 1px solid #fff;
	padding-left : 40px;
}

.block table{
	margin-left: auto;
	margin-right : auto;
}

.sujet{
	text-align:center;
	float : left;
	margin-top : 10px;
}

.categories .sujet {margin-left : 6px;}
.categories2 .sujet {margin-right : 6px;}

h3.blue{
	font-size: 20px;
	background : url("../images/comment.png") repeat-x;
	color : #000;
	margin-left : auto;
	margin-right : auto;
	text-align:center;
	padding: 0;
	margin:0;
	height : 26px;
}

.slider img{
	min-height : 80px;
	margin-left : 10px;
	margin-right : 10px;
	border : 5px solid #b83aae;
}

img.prec, img.suiv{
	position : absolute;
	top : 25px;
}

img.prec{left : 10px;}
img.suiv{right : 10px;}


Je met la page en ligne et j'edite pour vous donnez le lien.

Merci d'avance

EDIT: Et voila l'url : Ici
Modifié par HollyDev (25 Sep 2010 - 16:22)
Bonjour,

Effectivement, c'est un problème étrange.

Pour le contourner, tu peux ajouter un bloc dans #gallery qui contiendra les images et le slider, et tu appliques l'overflow sur ce bloc.
Salut,

C'est un comportement normal, le padding est inclus dans l'élément, l'overflow:hidden masque tout ce qui sort de l'élément, donc quand un élément enfant est plus grand que l'élément parent, il va déborder sur le padding. Si le padding-left semble fonctionner, c'est simplement parce que le sens de lecture est de gauche à droite, le bloc va se caler normalement à gauche et déborder sur la droite.
Pour s'en convaincre, il suffit de mettre une marge gauche négative sur le slider et constater qu'il déborde aussi sur le padding-left.

Une des meilleures solutions à adopter est sans doute celle proposée par ellm.
Sujet clos
Aller à