28172 sujets

CSS et mise en forme, CSS3

Une sidebar qui se retrouve en bas...

Donc je vous expose le problème.
Tout marchait bien avant que j'installe le badge Flickr.

Et maintenant, ma sidebar se retrouve tout en bas et le footer y est inclus.

Voici le code HTML

  <body>
	
	<div id="page-wrapper">
	<!-- Page wrapper -->
	
	<h1><!-- Image en background --></h1>
	
	<div id="menu-nav">
	<!-- Menu de navigation -->
	
			<ul id="navigation-list">
				<li><a href="#">Accueil</a></li>
				<li><a href="#">A propos</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Cr&eacute;ation de sites web</a></li>
				<li><a href="#">Photographie</a></li>
				<li><a href="#">R&eacute;alisations</a></li>
			</ul>
	
	<!-- Fin du menu -->
	</div>
	
	<div id="content">
	<!-- Contenu du site -->
			
			<div id="welcome-message">
			
				<h2>A propos</h2>
				<h3>Simon Souris, photographe, graphiste, web designer, de la r&eacute;gion de Mons (hainaut), BE.</h3>
				
				<p>Il exerce la photographie de mode, de portrait et d'&eacute;v&eacute;nements.</p>
				<p>Il cr&eacute;e des sites webs au design sobre, accessibles &agrave; tous et de grande qualit&eacute;.</p>
				<p>Il r&eacute;alise aussi des affiches, des cartes de visites et des flyers.</p>
				
				<p><a class="see-more" href="#">En savoir plus ...</a></p>
			 	
			</div>
				
				<h2>Travaux recents</h2>
				
				<p><a class="see-more" href="#">Acc&eacute;der au portfolio ...</a></p>
				
				<div>
				
				<img src="img/big-panda.jpg" width="450px" />
				
				</dv>
			
	<!-- Fin de la partie contenu -->
	</div>
	
	<div id="sidebar">
	<!-- Sidebar -->
	
				<p class="sidebar-title">Contact</p>
				<p>Blabla</p>
	
				<p class="sidebar-title">Annonce</p>
				<p>Banniere</p>
				
				<p class="sidebar-title">Flickr</p>
				<p>
				<!-- Start of Flickr Badge -->
				<div id="flickr_badge_wrapper"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=t&layout=x&source=user&user=21635306%40N08">
				</script></p>
				<!-- End of Flickr Badge -->
				</p>
				
				<p class="sidebar-title">Retrouvez-le sur</p>
				<p>youtube, myspace, blablabla</p>
			
		<!-- Fin de la sidebar -->
		</div>
			

	<div id="footer">
	<!-- Footer -->
	
			<!-- Liens de bas de page -->
			<ul id="navlist">
				<ul id="navlist">
				<li><a href="#">Accueil</a></li>
				<li><a href="#">A propos</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Cr&eacute;ation de sites web</a></li>
				<li><a href="#">Photographie</a></li>
				<li><a href="#">Poser pour lui</a></li>
				<li><a href="#">R&eacute;alisations</a></li>
			</ul>
			<!-- Fin de la liste de liens -->
			
			<div id="copyright-box">
			<!-- Copyright des images du site -->
			<p class="copyright-text">Copyright &copy; 2008, Simon SOURIS. Tous droits r&eacute;serv&eacute;s. <br/>
			<a class="copyright-link" href="copyright.html" title="Copyright &copy; 2008, Simon SOURIS">En savoir plus...</a></p>
			<!-- Fin du copyright -->
			</div>

	<!-- Fin du footer-->
	</div>
	
	<!-- Fin de la balise #page-wrapper -->
	</div>

	</body>


et le CSS


/*
Theme Name: Rock'n'Roll
Description: "Un joli theme sombre pour mon nouveau portfolio"
Version: 3.0
Author: S. SOURIS
Author URI:  http://www.simonsouris.com
 
NOTE: Copyright (c) Simon SOURIS 2006-2008. All Rights Reserverd
*/

	/* MISE EN PAGE GENERALE */

		/* ------------------------------------------------------------------------ */
		/* ------------------------Balises principales---------------------- */
		/* ------------------------------------------------------------------------ */

		body {
			margin: 0;
			}
			
		#footer {
			clear: both;
			margin-top: 15px;
			}
		
		#page-wrapper {
			background: url(img/bg.jpg) no-repeat top right;
			height: 500px;
			margin-left: auto;
     		margin-right: auto;
			width: 950px;	
			}
			
			
		/* ------------------------------------------------------------------------ */
		/* ----------------------------Grille du site--------------------------- */
		/* ------------------------------------------------------------------------ */

		h1 {
			background: url(img/simonsouris.jpg) no-repeat top left;
			height: 85px;
			margin-bottom: 25px;
			margin-top: 20px;
			}
		
		#content {
			float: left;
			margin: 15px 0 15px 0;
			padding: 20px;
			width: 60%;
			}
			
		#copyright-box {
			background: url(img/small-logo.png) no-repeat top left;
			height: 30px;
			margin-top: 20px;
			padding-left: 40px;
			}
		
		#header-comment {
			margin-left: 100px;
			}
			
		#menu-nav {
			background: url(img/navbar-bg.png) no-repeat top left;
			height: 30px;
			padding: 7px;
			}
		
		#sidebar {
			background: url(img/top-sidebar-bg.jpg) no-repeat top center #111;
			float: right;
			margin: 15px 0 0 15px;
			padding: 20px;
			width: 250px;
			}
			
		#welcome-message {
			background: url(img/hello_there.png) no-repeat top right;
			padding-right: 250px;
			}
Smiley sweatdrop
Modifié par simon-s (08 Jun 2008 - 20:00)
C'est bon, problème solutionné.

J'ai retiré une ou 2 balises et j'avais ouvert une balise Flickr_wrapper que j'avais fermée par un </p>

Désolé
Sujet clos
Aller à