Bonjour à vous,
je poste ici mon premier message car j'ai un problème avec Foundation. Je voudrais en fait aligner (automatiquement) des colonnes dans des colonnes. Bon, ok c'est pas facile à expliquer alors je vous ais fais un petit schéma :
Vous voyez ?
Je voudrais que le titre commence (pour chaque colonne) toujours au même point, après l'image la plus grande.
Du coup je cherche, sans pour autant atteindre l'objectif ...
Voici mon code :
<div class="row" data-equalizer>
<div class="column large-4 medium-6">
<div class="panel" data-equalizer-watch>
<div class="row">
<div class="column large-12">
<img src="img/posts/lorem-ipsum.png" alt="Lorem Ipsum1"/>
</div>
<div class="column large-12">
<h5>Lorem ipsum dolor sit amet</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, at, molestias, commodi, eos repellat dicta sapiente aperiam ducimus incidunt vitae officiis labore eum cupiditate. Beatae, saepe necessitatibus nihil praesentium porro.
</p>
<p class="infos_post">
<span class="left">
7 Janvier 2014
</span>
<span class="right">
17 commentaires
</span>
</p>
</div>
</div>
</div>
</div>
<div class="column large-4 medium-6">
<div class="panel" data-equalizer-watch>
<div class="row">
<div class="column large-12">
<img src="img/posts/lorem-ipsum2.png" alt="Lorem Ipsum3"/>
</div>
<div class="column large-12">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam.</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, aut repellat harum vel inventore minima ducimus corrupti repudiandae. Sunt, repudiandae veniam distinctio obcaecati voluptatem voluptas officiis. Rem maiores quaerat odio.
</p>
</div>
</div>
</div>
</div>
<div class="column large-4 medium-6">
<div class="panel" data-equalizer-watch>
<div class="row">
<div class="column large-12">
<img src="img/posts/lorem-ipsum3.png" alt="Lorem Ipsum3"/>
</div>
<div class="column large-12">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing.</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, aperiam, quos, eligendi, iusto placeat pariatur nam neque mollitia accusantium asperiores tempora iure molestias corporis praesentium natus recusandae maiores ducimus necessitatibus.
</p>
</div>
</div>
</div>
</div>
</div>J'ai essayé de mettre des data-equalizer partout, mais ça fonctionne pas.
Donc si quelqu'un a une idée, je suis preneur !
MErci :D
8 réponses
Mmmmmh.
Je sais pas si ça va être possible uniquement avec Foundation.
Pour que tes 3 paragraphes commencent au même niveau, je pense qu'il faudrait que tes images appartiennent à la même ligne, donc à une même div contenant la classe row. Donc il faudrait remanier un peu le code HTML
Sinon tu as la solution js. Tu récupère la taille hauteur maximale de tes divs et tu fixes un margin supplémentaires sur les div qui en ont besoin.
Dernières solution, tu as ce plugin jQuery : https://github.com/ginader/syncHeight
Pas testé mais il m'a l'air simple d'utilisation
Ah ouais c'est chouette !
Je ne t'ai pas beaucoup aidé, je t'ai juste donné des pistes :)
Par contre ton image à gauche est "écrasée" en largeur, c'est normal ?
Essaye ceci:
Dans ton fichier jquery.syncheight.js, ligne 94 (en tous cas ligne 94 sur le fichier github si jamais tu as changé des trucs), remplace:
$(this).css(heightPropertyName, max+'px');par:
$(this).css('margin-bottom', max-parseInt($(this).css('height'),10)+'px');Merci beaucoup pour ces réponses ! :)
Je vais opter pour la faciliter en choisissant JQuery. En revanche je sais pas trop comment gérer les fichiers avec 'github', j'ai pas vraiment l'habitude. Dois-je téléchargé tous les fichiers et les place sur le site ? Dois-je seulement récupérer l'exemple 'Usage' donné en bas de la page ?
Merci de votre aide ;)
Edit : J'ai essayé avec l'exemple, j'ai un code qui ressemble donc à ça :
<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>E-Time</title>
<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
p{
border:1px solid red;
padding:5px;
}
</style>
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/style.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="js/jquery.syncheight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
// sync the height of all the p elements in this document
$('p').syncHeight({updateOnResize: true});
// unsync they're heights again when the Browser window is narrower than 500px
$(window).resize(function(){
if($(window).width() < 800){
$('p').unSyncHeight();
}
});
});
</script>
</head>
<body>
<p>
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, dolore, a iure temporibus cumque deserunt saepe consequuntur officiis aut ducimus. Illum, voluptatem quibusdam quis. Perspiciatis et dolorum eos nobis est?
Placeat, voluptatibus commodi a? Earum, molestiae, voluptatibus doloremque voluptates esse excepturi atque consectetur facere nisi exercitationem sint qui error. Laborum natus temporibus culpa reprehenderit autem neque ipsa blanditiis mollitia eaque.
Illo veniam dolorum quam neque itaque quod. Maxime, vitae, alias, amet, nesciunt iure rem itaque facere velit nemo sit aspernatur perspiciatis quo magnam pariatur quis ipsa aut. Itaque, nisi, deserunt.
Explicabo, accusantium labore numquam voluptate aspernatur velit neque eveniet aut id expedita. Labore, modi, nisi, incidunt quaerat similique repellat id beatae enim est ad corporis veniam autem rem nostrum mollitia.
Temporibus, nam, quam, quas, obcaecati ipsa accusamus vero corporis nesciunt excepturi officiis illum quidem fugiat possimus animi culpa a alias iusto unde atque voluptates dignissimos repudiandae porro reiciendis minima voluptate.
Dolor, reiciendis, quidem, ullam, impedit vel assumenda animi rem sint illum adipisci distinctio in hic eaque aut numquam deserunt maxime eos qui inventore ipsa libero perspiciatis magni facere nobis mollitia!
Quo, quae, dicta assumenda voluptates sed excepturi nesciunt cum quas culpa repellendus distinctio atque ad quis alias illo necessitatibus optio velit itaque error praesentium iusto ullam repudiandae laborum fugiat numquam.
Ipsam, deleniti sed similique dicta earum repudiandae sequi officia odit commodi architecto cupiditate non voluptatibus facilis nobis fugit reiciendis modi sapiente labore cumque repellendus temporibus illum at autem enim error!
Iure, aliquid, corporis, a architecto aspernatur optio magnam nostrum molestiae placeat qui quidem expedita rerum pariatur sunt natus consectetur aliquam assumenda veniam quod sint nam dolorum sapiente porro quia rem.
Minima, consequatur, ducimus voluptates harum pariatur eius at cum dolores dolorem corrupti vel aspernatur facere accusantium placeat quibusdam animi officiis assumenda repudiandae repellendus ipsa impedit rerum quia voluptate similique quis.
Cumque, magnam, molestiae, tempora, quas ipsa eos amet voluptates debitis molestias accusamus libero ullam dolorum odio necessitatibus quidem odit ex corporis quasi voluptate aliquid consectetur dolores distinctio assumenda architecto sed. dolor sit amet, consectetur adipisicing elit. Sint, iure earum placeat autem maxime iste quidem quibusdam libero. Maxime, aliquid recusandae quos possimus quibusdam amet odio cumque iste consequatur! Dolorum?
</p>
<p>Est, error, dolores, similique incidunt odit velit quisquam dolor amet dignissimos laboriosam deserunt veritatis blanditiis nesciunt itaque magnam voluptate earum eveniet architecto numquam ea debitis fuga sequi doloremque maxime possimus!</p>
<p>Totam, similique, possimus, odit eos dolores saepe laboriosam veritatis quas reiciendis esse deleniti commodi nemo blanditiis doloribus consectetur hic provident pariatur aut ab at architecto. Totam molestiae quisquam provident molestias.</p>
<p>Iusto, delectus, accusantium, voluptates, veritatis nulla voluptate repellat incidunt debitis reprehenderit repudiandae corrupti qui laborum. Ipsa, labore, a eos iure maxime ex nostrum voluptas placeat sunt magnam praesentium animi nisi!</p>
<p>Ad, totam, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, numquam, alias, quia, ipsam ipsa voluptatum quisquam aliquid maxime beatae delectus vitae dolor sed id rerum ea impedit veniam laboriosam nulla.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, animi, porro quaerat similique at libero officiis recusandae dolorum! Ea, dolore, explicabo quaerat vero eius a eos soluta est ipsum et! molestidddddddddddddd dddddddddddddddddddddddd dddddd Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, earum porro tenetur quibusdam beatae nisi molestias ullam eum. Est, eum deserunt aspernatur odit delectus voluptatibus tenetur necessitatibus autem ab modi.ddddddddddddddas consequuntur ipsum cum qui soluta alias rem veritatis eligendi minima deserunt voluptates iusto nam tenetur natus reprehenderit laudantium! Quasi, temporibus eius placeat ut veniam esse voluptatibus excepturi.</p>
<p>Quo, harum, officiis, excepturi aperiam sit commodi ratione voluptates nemo illo esse eum vel numquam dolore voluptate reprehenderit ipsa dolores. Animi, quisquam, excepturi consequatur quo iste corporis consequuntur voluptatem dolor.</p>
<p>Quod, nesciunt, ex delectus consequuntur molestias quia alias mollitia illum accusamus nam. At, libero, rerum explicabo consequatur assumenda laborum illo ea quis fuga deserunt atque pariatur molestiae incidunt ad possimus!</p>
<p>Commodi, totam, nemo voluptatibus quidem rerum aperiam ut repudiandae non. Quaerat, perspiciatis, libero, tenetur, ipsum eligendi aliquid nihil nobis quas autem facilis similique aspernatur quod modi amet labore molestiae nostrum!</p>
<p>Nulla, id, nostrum, consequatur veritatis cupiditate omnis cumque consequuntur consectetur totam culpa veniam debitis deleniti ea. Ipsum, fugiat, laboriosam, natus labore sunt quibusdam obcaecati rem temporibus error at consectetur minima.</p>
<p>Quaerat, unde, aperiam, consequuntur dolor ea eos molestiae harum asperiores sequi vitae nulla blanditiis possimus minus deleniti ullam in ratione neque animi modi inventore quae! Ex, laboriosam impedit ullam animi.</p>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>Pourtant ça ne fonctionne pas ...
Et j'ai le fichier jquery.syncheight.js dans mon dossier /js.
Je vois pas trop là ...
Edit 2.0 : En fait le problème venait de jquery.syncheight.js qu'il fallait que j'écrive jquery-syncheight.js
Ca fonctionne bien ! Merci !
Nickel, j'avais mis ton post dans ton un coin de ma tête et j'allais regarder ça en rentrant ce soir :)
Tu peux mettre une capture voir ce que ça donne stp ?
Bien sur :
On est d'accord, c'est bien plus jolie qu'en haut ! :)
Merci, encore, à toi !
Si si, je t'assures tu m'as aider.
Je vois tellement de gens sur les forums qui demandent les 'solutions' dès qu'ils n'arrivent pas quelque chose et que les membres lui répondant lui écrivent le code tout cuit ... Sauf que ça c'est de l'assistanat, pas de l'aide !
Bref, petit égarement. Pour répondre à ta question. Est-ce normal ? Oui et non.
Non ce n'est pas normal car ce n'est pas le rendu que je voudrais.
Oui car, au vu du code, c'est normal que ça déforme ;)
Donc si ici, encore, tu avais une piste pour me proposer une image sans déformation. Je suis preneur !! :D