JeuWeb Créez votre jeu par navigateur !

michoxstar · (Modification du message : 09-11-2014, 06:15 PM par michoxstar.)

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 :

[Image: img.png]

PAGE CSS :

Code :
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%;

  }

PAGE HTML

Code :
<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>

Merci de votre lecture

@lucard · 09-11-2014, 06:02 PM

As-tu essayé :
.main{height:100vh;}

?

michoxstar · 09-11-2014, 06:13 PM

Merci @lucard en height:65vh c'est parfait, pas de scroll...

Merci encore !!! Smile

Résoooolu.

@lucard · 10-11-2014, 07:26 PM

Pas de quoi. Attention à toutefois à la compatibilité. Il.s'agit de css3.
Plus d'info ici:
http://dev.w3.org/csswg/css-values/#relative-lengths

Wells · 12-11-2014, 11:34 AM

vh, tient je connais pas, c quoi en fait ?

@lucard · (Modification du message : 12-11-2014, 12:04 PM par @lucard.)

(12-11-2014, 11:34 AM)Wells a écrit : vh, tient je connais pas, c quoi en fait ?

(10-11-2014, 07:26 PM)@lucard a écrit : Il.s'agit de css3.
Plus d'info ici:
http://dev.w3.org/csswg/css-values/#relative-lengths

Citation :unit: relative to :
vw 1% of viewport’s width
vh 1% viewport’s height
vmin 1% of viewport’s smaller dimension
vmax 1% of viewport’s larger dimension

Prélude · 12-11-2014, 03:07 PM

Vous avez le site CanIUse également qui vous permet de voir sur quels navigateurs un élément est possible ou non : http://caniuse.com/#search=vh

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[Résolu][jQuery] Delay entre deux animate différents ?	Argorate	5	4 177	05-01-2012, 08:49 AM Dernier message: Sephi-Chan
	[Résolu] Espace Membre	guortates	15	5 701	29-03-2011, 05:15 PM Dernier message: guortates
	[Résolu] Un combat entre deux objets	Johy	23	8 304	06-08-2009, 03:36 PM Dernier message: Anthor
	[Résolu] Formulaire espace membre	Cloudi	10	4 997	22-02-2009, 04:54 PM Dernier message: titfiance
	[Résolu] Étrange problème entre for et while	Valter	12	3 791	22-03-2008, 05:44 PM Dernier message: Sephi-Chan