28172 sujets

CSS et mise en forme, CSS3

Problème d'espace entre <main> et <footer>

Bonjour, je vous contacte car je plante avec un problème sur mon design... :

Il faudrai que le <main> prenne toute la hauteur peu importe la hauteur de screenshot par exemple...

Voici un résumé du soucis :
http://casino-wars.fr/img.png


Il ne faudrait pas d'espace entre MAIN et FOOTER automatiquement peu importe la hauteur de la section ou d'une div...



Merci de votre lecture.



DU CSS :


  body {
    overflow-y: scroll;
  }

  /* Layout Module Configuration & fallback for unsupported media queries */
  .ym-wrapper {
    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .ym-wbox {
    padding: 0px;
  }

  /* Basic Element Styling */
  header {
    background:url(../../img/fond_header.png);
	background-repeat:repeat-x;
    color: #ccc;
    padding: 6em;
  }

  .cartes_jeu {
	position:absolute;
  	top:15px;
	left:528px;
  }    
  .logo {
	position:absolute;
  	top:17px;
	left:50px;
  }  

  nav {
    background: #222222;
  }

  main {
    padding: 2em 0 0em 0;
    background:url(../../img/fond_content_fond.png);
	background-repeat:repeat;
  }
  footer {
	position:fixed;
	bottom:0;
    margin: 0;
    background:url(../../img/fond_footer.png) repeat-x;
    color: #fff;
    padding: 0.8em;
	width:100%;
  }
  footer p {
    margin: 0;
  }

  /* Column-Set Configuration: 1-3 (sidebar right) */
  .ym-column {
    display: block;
    overflow: hidden;
    padding-right: 340px;
    width: auto;
  }

  /* content - column */
  .ym-col1 {
    float: left;
    width: 100%;
  }

  /* sidebar - column */
  .ym-col3 {
    position: relative;
    float: left;
    width: 340px;
    margin-left: 0;
    margin-right: -340px;
  }

  .ym-col1 .ym-cbox {
    padding: 0 0.75em 0 1.5em;
  }

  .ym-col3 .ym-cbox {
    padding: 0 20px 0 12px;
  }

  .ym-gbox {
    padding: 0 1.5em 0 0;
  }

  /* skip links styling */
  .ym-skiplinks a.ym-skip:focus,
  .ym-skiplinks a.ym-skip:active {
    color: #fff;
    background: #333;
    border-bottom: 1px #000 solid;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
  }
}
/* reset fallback values in modern browsers */
@media screen and (min-width: 0px) {
  .ym-wrapper {
    min-width: 0px;
  }
}
@media screen and (max-width: 760px) {
  /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
  .linearize-level-1, .linearize-level-1 > [class*="ym-c"], .linearize-level-1 > [class*="ym-g"] {
    /* linearization for grids and columns module */
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: auto !important;
  }
  .linearize-level-1 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
    /* reset defined gutter values */
    margin: 0;
    padding: 0;
    /* optional for containing floats */
    overflow: hidden;
  }

  nav .ym-hlist ul {
    padding-right: 10px;
  }

  .ym-searchform {
    display: block;
    float: none;
    width: auto;
    padding-right: 10px;
    text-align: right;
  }

  .ym-searchform input[type="search"] {
    width: 14%;
  }
}
@media screen and (max-width: 480px) {
  .ym-wbox {
    padding: 0;
  }

  header {
    padding: 0.75em 10px;
  }
  header h1 {
    font-size: 1.5em;
    line-height: 1em;
    margin: 0;
  }

  footer,
  main,
  .ym-searchform,
  nav .ym-hlist ul {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
  .linearize-level-2, .linearize-level-2 > [class*="ym-c"], .linearize-level-2 > [class*="ym-g"] {
    /* linearization for grids and columns module */
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: auto !important;
  }
  .linearize-level-2 > [class*="ym-c"] > [class*="ym-cbox"], .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
    /* reset defined gutter values */
    margin: 0;
    padding: 0;
    /* optional for containing floats */
    overflow: hidden;
  }

  .ym-searchform,
  nav .ym-hlist ul,
  nav .ym-hlist li {
    display: block;
    float: none;
    width: auto;
    text-align: left;
  }

  .ym-searchform input[type="search"] {
    width: 75%;
  }




La page html : 


<body>
<ul class="ym-skiplinks">
	<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
	<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>

<div class="ym-wrapper">
	<div class="ym-wbox">
		<header>
			<img src="img/cartes_jeu.png" alt="Logo" class="cartes_jeu" />
			<img src="img/logo.png" alt="Logo" class="logo" />
		</header>
		<nav id="nav">
			<div class="ym-hlist" >
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Inscription</a></li>
					<li><a href="#">Mot de passe oublié ?</a></li>
					<li><a href="#">Contactez-nous</a></li>
					<li><a href="#">Partenaires</a></li>
				</ul>
				<form class="ym-searchform">
					<input class="ym-searchfield" placeholder="LOGIN" />
                    <input class="ym-searchfield" placeholder="MOT DE PASSE" />
					<input class="ym-searchbutton" type="submit" value="CONNEXION" />
				</form>
			</div>
		</nav>
		<main>
			<div class="ym-column linearize-level-1">
				<div class="ym-col1">
					<div class="ym-cbox">
						<section class="box info">
							<h2>Bienvenue sur JEU!</h2>
							<p>JEUJEU est un jeu de gestion de blabla virtuel en ligne, ce jeu est gratuit et jouable depuis votre navigateur web.<br>Dans ce jeu vous incarnez la gérance, c'est à vous que reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipstcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera reviennent lorem dipsus etcetera</p>
							<a class="ym-button ym-next" href="#">Description détaillée</a>
						</section>

						<div align="center"><img src="http://dummyimage.com/970x90/cccccc/fff.png" alt="ads" class="bordered"/></div>


					</div>
				</div>
				<aside class="ym-col3">
					<div class="ym-cbox">
						<h4>Screenshots</h4>
						<div class="ym-contain-dt">
                        	<div align="center">
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
                                <img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="center bordered"/>
							</div>
                        </div>
					</div>
				</aside>
			</div>
		</main>
		<footer>
			<p>© <a href="http://www.casinogre.com">JEU</a> 2014 &ndash; Tous droits réservés &ndash; Design inspiré de <a href="http://www.yaml.de">YAML</a></p>
		</footer>
	</div>
</div>

<!-- full skip link functionality in webkit browsers -->
<script src="js/yaml-focusfix.js"></script>
</body>
Hello,

En testant ton code, je n'ai pas le résultat mis sur ton screenshot : le footer - avec un position fixed et un bottom 0 -, passe par dessus la balise main. Si c'est bien le cas, il suffit de modifier le padding bottom de main :
avant modif : padding: 2em 0 0em 0;
après modif : padding: 2em 0 2.5em 0;

Cdt
Sujet clos
Aller à