28119 sujets

CSS et mise en forme, CSS3

Bonjour, avant tout j'aimerai dire que j'ai cherché et tenté d'appliquer les méthodes que vous avez pu donner dans tous les sujets résolu sur les footer que j'ai vu (ça fait 2 jours complet que je suis sur cette histoire).

J'ai fusionné ma galerie d'image avec mon site, en rajoutant directement le code source du header et du footer (donc il doit y avoir des ptits soucis vu qu'il y a 2 <head> mais passons). Les css sont donc aussi fusionné ^^. Il n'y aucun problème concernant la page d'accueil et des albums, mais la partie image elle, pose problème...

Image qui pose problème par exemple :
http://www.penspinning.fr/inserts/index.php?album=spiderweb&image=inserts3ng.jpg
Image ne posant pas de problème :
http://www.penspinning.fr/inserts/index.php?album=black-1&image=119e5683bc84.jpeg

J'aurai donc voulu votre aide pour pouvoir placer ce footer en bas de la page image à chaque fois (merci de ne pas m'indiquer les tutos vu que je les ai épluché et rien n'a marché, ou alors je ne sais pas bien les utiliser donc si vous pouvez m'accompagner pour les mettre en place, ça serait très gentil de votre part)

Merci d'avance !
Modifié par Picool (18 Feb 2010 - 11:08)
Bonjour et bienvenu sur le forum Smiley smile

Pour obtenir l'effet voulu, on va positionner ton footer en usant du positionnement.

Un objet se positionne toujours par rapport à son plus proche ancêtre positionné.
On positionne donc le conteneur général sans modifier son placement.
main {position : relative; }


Puis on positionne le footer pour qu'il soit toujours en bas du conteneur.
footer { position: absolute; bottom : 0; }


Enfin, on oubliera pas de remonter le footer dans le conteneur pour que le code fonctionne :
<div id="main">
  <div id="foooter>...</div>
</div>


Pour bien comprendre le fonctionnement ci-dessus, je t'invite à consulter les articles consacrés au positionement.
Smiley cligne
Bonjour et merci de prendre du temps pour m'expliquer.
Votre solution je l'ai déjà appliqué et j'ai un décalage du footer vers la droite et il se colle finalement en dessous de l'image avec votre code.
Smiley decu
J'ai un peu la flemme de chercher, mais quel est le code appliqué aux images ?
Il ne s'agirait quand même pas d'un flottant, si ? Smiley rolleyes
Voila le code du CSS de Zenphoto dont une partie fusionne donc avec le site pour ça que le body est en commentaire :
/*
	Sterile 1.0
*/

/* Main Layout
------------------------------ */
/* body {
	margin: 0 !important;
	margin: 0 0 10px 0; 
	padding: 0;
	text-align: center;
	font: 76% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
} */
#main {
	text-align: left;
	margin: 40px auto 5px auto;
	width: 700px;
	padding-bottom: 15px;
	background: #FFF;
	-moz-border-radius: 10px;
	border: 1px solid #CCC;
} 
* html #main{width: 720px;}

#gallerytitle {
	padding: 20px 10px 10px 20px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	background: #F8F8F8;
	height:30px;
	border-bottom: 1px solid #CCC;	
}
#padbox {
	padding: 20px !important;
}

#exif {
	color: #9C3;
	display:none;
}

#imagemetadata {
  display: none;
}

/* Miscellaneous
------------------------------ */
hr {
	clear: both;
	height: 0;
	border: 0;
	border-top: 1px solid #444;
	margin: 0 0 12px 0;
	padding: 0;
	color: #444;
}
img {
	border: 0;
}
blockquote {
	border-left: 1px dotted #96967E;
	margin-left: 20px;
	padding-left: 20px;
	color: #363630;
}
acronym {
  	cursor: help;
  	border-bottom: 1px solid;
}

/* Page Navigation
------------------------------ */
.pagelist {
	padding: 10px 20px 5px 20px;
}
ul.pagelist {
	clear: both;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ul.pagelist li {
	display: inline;
}
ul.pagelist li a, ul.pagelist span.disabledlink {
	padding: 4px;
}
ul.pagelist li.current a {
	font-weight: bold;
	text-decoration: none;
	color: #666;
}
ul.pagelist li.prev {
	margin-right: 10px;
}
ul.pagelist li.next {
	margin-left: 10px;
}
.disabledlink {
	color: #AAA;
	cursor: default;
}
.pagenav {
	clear: both;
}
.disabled_nav {
	visibility: hidden;
}


/* AJAX
------------------------------ */
#albumDescEditable, #albumTagsEditable {
	margin-bottom: 12px;
}
#imageDescEditable, #albumTagsEditable {
	margin-top: 24px;
}
#imageDesc, #exif_link {
	margin-bottom: 12px;
}

/* Tags
------------------------------ */
.taglist ul {
	display: inline;
	list-style-type: none;
}

.taglist li {
	background: url("../images/tag.png") no-repeat left center;
	list-style-type: none;
	line-height: 16px;
	padding-left: 18px;
	float:left;
	padding-right: 5px;
}

.taglist .tags_title {
	background: none;
	padding-right: 5px;
	padding-left: 0;
}

/* Image Thumbnails
------------------------------ */
.imagethumb a, .thumb a {
	display: block;
	padding: 7px;
	margin: 5px;
	line-height: 0px;
}
.imagethumb, .thumb {
	float: left;
}
.albumdesc2 {
	line-height: 18px;
}


/* Album Thumbnails
------------------------------ */
#albums {
        float: left;
}
.album {
	margin: 0 15px 15px 0;
	float: left;
	width: 315px;
}
.album .imagethumb a, .album .thumb a {
	margin: 0;
}
.album h3 {
	padding: 0;
	margin: 0;
}
.album h3 a {
	display: block;
	width: 100%;
}
.album p {
	margin: 0 0 4px 0;
	line-height: 17px;
	font-size: 10px;
}
.albumdesc {
	float: right;
	width: 185px;
	padding: 6px 0 0 0;
}


/* Individual Image
------------------------------ */
.imgdesc {
	padding: 10px 0 10px 0;
	line-height: 18px;
}
#image {
	text-align: center;
	line-height: 0;
	margin:10px 0;
}
.imgnav {
	float: right;
	width: 140px;
	text-align: center;
	margin-top: 13px;
	
}
.imgnav {
	float: right;
	width: 140px;
	text-align: center;
	margin-top: 0px;
	color: #0c2601;
	padding: 0;
	_margin-top: 8px; /* IE Only */
}
.imgnav .imgprevious a, .imgnav .imgnext a {
	font: normal 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	text-decoration: none;
	color: #214902;
}
.imgnav .imgprevious a, .imgnav .imgnext a {
	font: normal 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	display: block;
	width: 50%;
	height: 100%;
	float: left;
	text-decoration: none;
}
.imgnav .imgprevious a:hover, .imgnav .imgnext a:hover {
	text-decoration: none;
	color: #db7508;
}
.imgnav .imgprevious a {
	float: left;
}
.imgnav .imgnext a {
	float: right;
}
#imgoriginal {
	font-size: 8pt; 
	text-align: right;
	height:30px;
}
#imgorder {
	float: left;
}
#narrow {
	margin: 0 auto;
	width: 440px;
}
/* Admin Toolbox
------------------------------ */
#admin, #admin_data{
	position:fixed;
	right:0;
	top:0;
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	background: #fff;
	width:120px;
}
#admin_data{
	top:16px;
}
#admin h3 {
	font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	color: #666;
	border-bottom: 1px dashed #CCC;
	margin:0;
	padding:0;
}

/* Archive View
---------------------------- */
#archive{
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
ul.archive * {
	padding:0;
	margin:0;
	list-style:none;
}
ul.archive .year {
	margin-top:10px;
	text-align: center;
	margin-bottom:5px;
	font-weight:bold;
	font-size:18px;
}
ul.archive .month {
	font-size: 14px;
	list-style:none;
	border-top:2px solid #E6E6DF;
	padding-top: 5px;
}

/* Error Messages
------------------------------ */
.errorbox {
	padding: 20px;
	background-color: #FDD;
	border-top: 1px solid #FAA;
	border-left: 1px solid #FAA;
	border-right: 1px solid #FAA;
	border-bottom: 5px solid #FAA;
	margin-bottom: 10px;
	font-size: 100%;
	color: #DD6666;
}
.errorbox h2 {
	color: #DD6666;
	font-size: 100%;
	font-weight: bold;
	margin: 0px;
}
/* Zenphoto link
------------------------------ */

#zen-part {
 font-family: Arial, Helvetice, sans-serif;
 font-size: 1.8em;
 font-weight: 100;
}

#photo-part {
 font-family: Arial, Helvetice, sans-serif;
 font-size: 0.9em;
 font-weight: bold;
}

/* centering flowplayer 3 on image.php */
#image .flowplayer {
	margin: 0 auto;
}

/* login form */
table.password td.userlabel{
	text-align:right;
}
table.password td.userinput{
	text-align:left;
}

table.password td.userinput input, td.passwordinput input {
	width: 15em;
}

/* login form */
table.password td.passwordlabel{
	text-align:right;
}

table.password td.passwordinput{
	text-align:left;
}
table.password td.submit{
	text-align:center;
}

table.password td.hint{
	text-align:left;
}

Modifié par Picool (18 Feb 2010 - 11:10)
Et le code html de la page (je dépasse la limite de caractères pour ça que je double post)

<?php if (!defined('WEBPATH')) die(); $themeResult = getTheme($zenCSS, $themeColor, 'light'); $firstPageImages = normalizeColumns('2', '6');?>
<!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" dir="ltr" lang="fr-FR" xml:lang="fr-FR">
<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="Shortcut Icon" href="http://www.penspinning.fr/wp-content/themes/magazine_10/images/favicon.png" type="image/x-icon" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/penspinningfr" />
<link rel="pingback" href="http://www.penspinning.fr/xmlrpc.php" />
<link rel="stylesheet" href="http://www.penspinning.fr/wp-content/themes/magazine_10/style.css" type="text/css" media="screen" />

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.penspinning.fr/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.penspinning.fr/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='PenSpinning.fr' href='http://www.penspinning.fr' />

<!-- All in One SEO Pack 1.6.10.1 by Michael Torbert of Semper Fi Web Design[324,346] -->
<meta name="description" content="PenSpinning : Tutoriels pour apprendre à jongler avec son stylo et fabriquer le sien - Pen Spinning" />
<meta name="keywords" content="pen spinning, penspinning, trick, tutoriel, tutorial, mod, jonglage stylo, fpsb, apprendre penspinning," />
<link rel="canonical" href="http://www.penspinning.fr/" />
<!-- /all in one seo pack -->
<!-- Start WP Post Thumbnail CSS -->
<style type="text/css">
.wppt_float_left {float:left;margin:0 1.5em 0.5em 0; padding:3px;border:1px solid #ddd;}
.wppt_float_right {float:right;margin:0 0 0.5em 1.5em; padding:3px;border:1px solid #ddd;}
</style>
<!-- End WP Post Thumbnail CSS -->

<script type="text/javascript">
var tabberOptions = {manualStartup:false};
function begForMoney()
{
  if (!arguments.callee.stopBegging) {
    arguments.callee.stopBegging = true;
  }
}
</script>
</head>

<body class="home blog logged-in"><div><a id="top"></a></div>

<div id="wrap">

<div id="header">

	<div class="headerleft" id="imageheader">
		<h1><a href="http://www.penspinning.fr/">PenSpinning.fr</a></h1>       <p>Ou comment jongler avec son stylo</p>
	</div>	
		
	<div class="headerright">
        <ul id="topnav">

                            <li class="current_page_item"><a href="http://www.penspinning.fr">Accueil</a></li>
                
            <li class="page_item page-item-6"><a href="http://www.penspinning.fr/archives" title="Archives">Archives</a></li>
<li class="page_item page-item-22"><a href="http://www.penspinning.fr/contact" title="Contact">Contact</a></li>
</li>

        </ul>
	</div>

</div>

		<div id="navbar">
	    <ul id="nav">
	        	<li class="cat-item cat-item-3"><a href="http://www.penspinning.fr/actualite/news" title="News du monde pen spinning ainsi que de l&#039;association française.">News</a>
</li>
	<li class="cat-item cat-item-4"><a href="http://www.penspinning.fr/actualite/mods" title="Catégorie rassemblant les tutoriels de mods de pen spinning.">Mods</a>
</li>
	<li class="cat-item cat-item-5"><a href="http://www.penspinning.fr/actualite/tricks" title="Tutoriels de tricks pour le pen spinning.">Tricks</a>
<ul class='children'>
	<li class="cat-item cat-item-111"><a href="http://www.penspinning.fr/actualite/tricks/tricks-fondamentaux" title="Tutoriels des tricks fondamentaux du pen spinning.">Fondamentaux</a>

</li>
</ul>
</li>
	<li class="cat-item cat-item-63"><a href="http://www.penspinning.fr/actualite/combos" title="Idées de combos pour votre apprentissage.">Combos</a>
</li>
	<li class="cat-item cat-item-52"><a href="http://www.penspinning.fr/actualite/videos" title="Vidéos de Pen Spinning du monde entier.">Vidéos</a>
</li>
<li class="cat-item cat-item-146"><a href="http://www.penspinning.fr/inserts/" title="Inserts de pen spinning pour customiser son mod.">Inserts</a></li>
<li class="cat-item cat-item-147"><a href="http://thefpsb.penspinning.fr" title="FPSB : French Pen Spinning Board.">Forum</a>
</li>
	    </ul>

	</div>

	<div style="clear:both;"></div>
	 

<div id="searchbar">

	<div id="searchbarleft">
        <form method="get" id="searchbarform" action="/index.php" >
        <label class="hidden">Recherche:</label>
        <input type="text" value="" name="s" id="searchbarsearch" /><input type="submit" id="searchbarsubmit" value="GO!" /></form>

    </div>
    

    
	<div id="searchbarright">
		<p><a class="rsslink" rel="nofollow" href="http://feeds.feedburner.com/penspinningfr">S'abonner aux articles</a></p>
    </div> 
       
</div>


<head>
	<?php zenJavascript(); ?>
	<title><?php echo getBareGalleryTitle(); ?> | <?php echo getBareAlbumTitle();?> | <?php echo getBareImageTitle();?></title>
	<meta http-equiv="content-type" content="text/html; charset=<?php echo getOption('charset'); ?>" />
	<link rel="stylesheet" href="<?php echo $zenCSS ?>" type="text/css" />
	<link rel="stylesheet" href="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.css" type="text/css" />
	<script src="<?php echo FULLWEBPATH . "/" . ZENFOLDER ?>/js/thickbox.js" type="text/javascript"></script>
	<script type="text/javascript">
		function toggleComments() {
			var commentDiv = document.getElementById("comments");
			if (commentDiv.style.display == "block") {
				commentDiv.style.display = "none";
			} else {
				commentDiv.style.display = "block";
			}
		}
	</script>


</head>

<body>

<div id="main">

	<div id="gallerytitle">
		<div class="imgnav">
			<?php if (hasPrevImage()) { ?>
			<div class="imgprevious"><a href="<?php echo htmlspecialchars(getPrevImageURL());?>" title="<?php echo gettext("Previous Image"); ?>">&laquo; <?php echo gettext("prev"); ?></a></div>
			<?php } if (hasNextImage()) { ?>
			<div class="imgnext"><a href="<?php echo htmlspecialchars(getNextImageURL());?>" title="<?php echo gettext("Next Image"); ?>"><?php echo gettext("next"); ?> &raquo;</a></div>
			<?php } ?>
		</div>
		<h2><span><a href="<?php echo htmlspecialchars(getGalleryIndexURL());?>" title="<?php gettext('Albums Index'); ?>"><?php echo getGalleryTitle();?>
			</a> | <?php printParentBreadcrumb("", " | ", " | "); printAlbumBreadcrumb("", " | "); ?>
			</span> <?php printImageTitle(true); ?>
		</h2>

	</div>

	<!-- The Image -->
	<?php if (!checkForPassword()) { ?>
	<div id="image">
		<strong>
		<?php
		$fullimage = getFullImageURL();
		if (!empty($fullimage)) {
			?>
			<a href="<?php echo htmlspecialchars($fullimage);?>" title="<?php echo getBareImageTitle();?>">
			<?php
		}
		if (function_exists('printUserSizeImage') && isImagePhoto()) {
			printUserSizeImage(getImageTitle());
		} else {
			printDefaultSizedImage(getImageTitle());
		}
		if (!empty($fullimage)) {
			?>
			</a>
			<?php
		}
		?>
		</strong>
		<?php
	if (function_exists('printUserSizeImage') && isImagePhoto()) printUserSizeSelectior(); ?>
	</div>


		<?php } ?>

</div>

<div id="footer">
    
    <div class="footerleft">

        <p><a href="#top">Retourner en haut de la page</a></p>
    </div>
        
    <div class="footerright">
				<p><a class="rsslink" rel="nofollow" href="http://feeds.feedburner.com/penspinningfr">Articles</a> &middot; <a href="http://www.penspinning.fr/wp-login.php?action=logout&amp;_wpnonce=a9abdf2f77">Déconnexion</a> &middot; Powered by <a href="http://www.wordpress.org/">WordPress</a></p>

        <p>Copyright &copy; 2010 &middot; Tous droits réservés &middot; <a href="http://www.studiopress.com/themes/magazine" >Magazine theme</a> par <a href="http://www.studiopress.com">StudioPress</a> </p>
    </div>
    
	        <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-6677525-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();


</script>        
                 
</div>

</div>

<script type='text/javascript' src='http://www.penspinning.fr/wp-content/themes/magazine_10/js/subnav.js?ver=1.0'></script>
<!-- Clicky Web Analytics -  http://getclicky.com,  WordPress Plugin by Yoast -  http://yoast.com  -->
<script type='text/javascript'>
	function clicky_gc( name ) {
		var ca = document.cookie.split(';');
		for( var i in ca ) {
			if( ca[i].indexOf( name+'=' ) != -1 )
				return decodeURIComponent( ca[i].split('=')[1] );
		}
		return '';
	}
	var clicky_custom_session = { username: clicky_gc( 'comment_author_8a8292d5e3521e828357a78e5c94b431' ) };
  	</script>
<script src="http://static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">clicky.init(148540);</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="http://static.getclicky.com/148540ns.gif" /></p></noscript>	
<!-- End Clicky Tracking -->
</body>
</html>
[/i][/i]
bonjour,

Les style de base pour collé un footer en bas de page sont absent dans ton css.

En gros tu devrais avoir comme style de base ceci pour empêché ton pied remonté plus haut que le bas de ton ecran :

html , body {height:100%;}
#wrap {min-height:100%;/* sera au moins egal a la hauteur de l'ecran */position:relative;/* sert de referent de positionement pour les enfants dont le footer */}
#main {padding-bottom :55px; /*degage de la place pour la  hauteur de ton footer  */
#footer {position:absolute; left:0;bottom:0;/* on colle le footer au bas de #wrap  */width:100%;}


Les marges interne , externe ou la largeur du footer sont a adapté selon tes besoins graphiques .

Si tu ne comprend pas trop comment ça marche , fait toi une page test toute simple et met y plus ou moins de contenu pour en comprendre le fonctionnement .

<div id="wrap">
<div id="main"> contenus </div>
<div id="footer">le pied</div>
</div>


GC
Bonjour, j'ai essayé votre méthode sans succès hélas. Mais en faisant (en utilisant l'ajout de CSS que vous proposiez) :


<div id="wrap">

<div id="main"> contenus </div>
</div>
<div id="footer">le pied</div>


Tout a marché comme il faut. Merci beaucoup