Reprise du message précédent :
http://zachholman.com/posts/only-90s-developers/
 
Souvenirs souvenirs.

Mais clair putain

J'me reconnais (avec Windows 98 Plus!)

1px1PX.gix  
 
Je l'avais complètement oublié celui là

https://code.google.com/p/chromium/ [...] ?id=226941
 

Quelqu'un connaîtrait un algo permettant de faire rentrer des images de taille différentes dans un carré / rectangle en le remplissant intégralement ? Du genre de ce qu'on trouve là dessus : http://photos.zachholman.com/fargo  
 
J'ai déjà un algo permettant de justifier les images, mais la dernière ligne ne prend pas toute la largeur (à la google plus donc)

c'est un problème NP complet, donc tu n'auras que des solutions approchées et avec des heuristiques
 
TU as essayé d'utiliser une solution clé en main comme isotope ?

Je n'ai pas encore essayé de plugin existant, je vais y jetter un oeil. Pour ce que je fais actuellement (donc sans la dernière ligne pleine), j'ai utilisé l'algo trouvé ici : http://blog.vjeux.com/2012/image/i [...] -plus.html

Après oui la solution parfaite n'existe pas visiblement, sur l'exemple de mon précédent post ils trichent sur le ratio des images en le modifiant légèrement (deux images sur la même ligne avec le même ratio et la même hauteur n'ont pas la même largeur)

Hello,
 
dites je suis un peu noob en JS, je cherche à positionner 4 <h2> différement, par contre ils sont tous placés selon le même html. Donc j'ai fait ça :
 

$(".slides" ).find(".slide-bg" ).each(function(index){
    $(this).find("h2" ).css("top", viewportHeight/2);
});

 
J'aimerai que pour chaque index trouvés (4), je puisse changer la valeur de top, par exemple viewport*0,5 ou 0,4 etc..
 
Sinon je fait manuellement mais bon

$(".slides" ).find(".slide-bg" ).each(function(index){
    $(this).find("h2" ).css("top", viewportHeight/2);
});

$('.slide .slide-bg h2').each(function() {
$(this).css( "top", function( index ) {
  return viewportHeight / 2; //là tu mets le calcul que tu veux
});

 
Faut que tu itères sur les h2 sinon ça les change tous de la même facon, oui

$('.slide .slide-bg h2').each(function() {
$(this).css( "top", function( index ) {
  return viewportHeight / 2; //là tu mets le calcul que tu veux
});

 
c'est beau  
 
je vais essayer comme ça  
 
merci

$('.slide .slide-bg h2').each(function() {
$(this).css( "top", function( index ) {
  return viewportHeight / 2; //là tu mets le calcul que tu veux
});

 
Justement c'est sur l'itération des h2 que je bloque... je pourrai faire un bête :

mais c'est horrible et j'aimerai m'améliorer en js un peu quand meme

tu es sur que tu as besoin de js pour ça? tu n'as pas intérêt à mettre tes h2 dans un conteneur absolute et les positionner à l'intérieur ?  

ou utiliser une grid css (selon les contraintes)

 
impossible, j'ai tout essayé en CSS, ils sont dans un conteneur en position:absolute mais ce conteneur a sa height qui bouge en fonction du scroll (height 0 jusqu'à 100% du viewport) et si je veux que le h2 soit figé dedans (en overflow hidden) car si je met mon h2 en top:50%, il va bouger en fonction de la height de son parent (logique)

Bah,
1/ tu mets la propriété "position:relative" à tes H2
2/ tu mets un top en pixels, pas en pourcentage

c'est ce que j'ai fait, mais je veux qu'ils soient toujours à environ 40% du viewport car ils doivent être alignés sur le background fixed qui est calé en 50% 50%    
 
Genre je peux pas mettre 500px sur le top, si tu regardes le site sur un 13", le texte va arriver en bas
 
là ça marche a peu près bien, je publierai le résultat  

un petit exemple de ce qu'on peu faire en carto 3G avec les données d'openstreetmap : http://map.f4-group.com/#lat=46.30 [...] phi=12.949

J'ai fait un truc qui fonctionne, mais je ne comprends pas pourquoi : j'ai fait un 2 col avec nav et footer, et les 2 colonnes font la taille de la colonne la plus longue, donc ça fait exactement ce que je veux.
 
Mais je ne comprends pas pourquoi pour la colonne de droite #right, je dois utiliser absolute et pas relative...j'ai testé la page sur Chrome, Firefox Aurora, et ie 11 et ça fonctionne très bien.
 
Ce qui me chiffonne :  
- #right faisant partie de content (qui est relative et donc crée un contexte), en mettant top et right à 0 en étant en relative aussi, la colonne devrait snapper à droite, et elle le fait pas (elle se met dans le flow et apparait sous #left)
- si je met right en abolute, il devrait prendre comme référenciel le document, et donc top et right 0 zéro devrait le faire apparaitre tout en haut à droite, et c'est pas le cas
 
hypothèse : puisque #content crée un contexte, #right est positionné de façon absolue dans ce contexte
 
Edit : c'est ça http://css-tricks.com/absolute-pos [...] sitioning/
 
Le code : http://codepen.io/Jubijub/pen/JCnry

/* J'utilise le CSS reset de Meyer avant */
 
#container {
  width: 960px;
  margin: 0 auto;
 
}
 
#nav {
  background-color: crimson;
  height: 100px;
}
 
#content {
  position: relative;
  background-color: antiquewhite;
}
 
#left {
  width: 768px;
  position: relative;
  top: 0px;
  bottom: 0px;
  background-color: palevioletred;
 
 
}
 
#right {
  width: 192px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: darkmagenta;
 
}
 
#footer {
  height: 50px;
  background-color: crimson;
}

<!DOCTYPE html>
<html>
<head>
    <title>Test 3 col positionning</title>
    <link rel="stylesheet" href="Positioning.css"/>
</head>
<body>
<div id="container">
    <nav id="nav">
        <p>This is the nav bar</p>
    </nav>
    <div id="content">
        <section id="left">
            <p>Mauris sit amet leo sit amet urna pellentesque lobortis in auctor metus. Aenean justo risus, accumsan
                quis
                dapibus
                sit amet, dignissim ut nibh. Suspendisse varius augue a elit eleifend vel congue felis tempus. Sed vitae
                hendrerit
                lacus. Pellentesque metus metus, lacinia sollicitudin convallis nec, tempus at est. Quisque id turpis
                ante.
                Fusce
                dui elit, pellentesque eu bibendum eu, sollicitudin ac ante. Pellentesque a nisi felis. Praesent vel
                odio
                non enim
                tristique interdum sed pulvinar mi. Nam justo libero, semper ac egestas vitae, condimentum et velit.</p>

          <!--   Remarque : le paragraphe est répété x fois pour qu'il soit plus grand que le viewport, je le coupe pour garder le code petit   -->

        </section>
        <aside id="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum.</p>
        </aside>
    </div>
    <footer id="footer">
        <p>This is the footer</p>
    </footer>

</div>

</body>
</html>

 
fais un codepen sinon c'est chaud à débugguer  
 

bon, je tatonne à fond et je me prends tous les murs, mais ça avance
 
question du coup : avec jquery y'a plus rapide pour aller chercher la dernière cellule de la dernière ligne d'un tableau que ça ?
http://codepen.io/Jubijub/pen/dHAuI ?
 
j'ai essayé avec lastChild mais ça me renvoit un node de type text qui est vide

Oui, quelque chose comme http://jsbin.com/xediforu/2/edit?html,js,console
Je te conseille de feuilleter http://www.domenlightenment.com/ si tu tiens à bosser sans Framework jQuery like.

Edit : J'avais mal lu ton message, avec jQuery ça donnerait http://jsbin.com/xediforu/3/edit?html,js,console

 
merci pour le livre, c'est super utile en effet (même si j'utilise jQuery, j'aime bien comprendre comment ça marche en dessous)
 

Question : je remarque que le code que je génère n'est pas visible quand je fais un view source (il l'est si j'inspecte la page, je suppose que c'est parce que ça me montre l'état du document html)
 
De ce fait ce qui est généré n'est pas indexable, ou je rate un truc ?

hors bootstrap, ya quoi comme frameworks css à l'ancienne ? (cad pas de less, node.js ou autres joyeuseté)  
 
merci

Foundation?

Tu réalises que bootstrap c'est du less avec une version compilée avec des paramètres par défaut et classes fournie pour téléchargement

Non tu rates rien

Yup je sais bien, mais au moins c'est compilé, je sais pas compiler moi

 
ça vaut le coup d'apprendre ces technos

 
Tu ne sais pas lancer une ligne de commande  

Combien vous estimeriez la refonte d'un site d'ecommerce spécialisé en vin (ils ont des bouteilles à 10K€), mobile-first complet, y compris le caddie. Y'a pas mal de pages quand même, c'est un prestashop. C'est seulement la partie design et intégration front-end. Après c'est livré (PSD + HTML/CSS/JS) au dev sur place.
 
Vu de nez, car la description est sommaire certes.

combien de pages différentes ?

On va dire environ 6 pages différentes
 
Accueil
Listing produit
Fiche produit
Contact
Mon compte
Caddie (+ toutes les étapes)

~5K€

L'intégration HTML est déjà faite ?
T'as juste à créer le template et à poser les éléments ?

Pour un site www.marque.com
 
Vaut-il mieux www.marque.com/etablissements/paris (et ainsi de suite : www.marque.com/etablissements/lyon ...)
 
ou  
paris.marque.com
lyon.marque.com
 
Sachant que la charte graphique va être la même (meme chaine) mais les contenus vont différer et certaines images aussi.

Les deux et un peu de réécriture
Je préfère paris.domaine.com, histoire que le nom arrive vite lorsque je commence à taper les première lettres

En terme de message, la première solution met plus l'accent sur la marque, et la seconde mets plus l'accent sur l'établissement. A voir avec le cilent ce qui doit être mis en avant

je préfère aussi les sousdom, c'est un peu plus clair (et "marque" est une chaine de pubs/restaurants..)

 
  on est sur du mobile-first là, design complet + intégration.. 5K€ ??
 
Combien de temps tu mets pour faire ça ? 2 semaines ?
 

 
Non il faut tout créer, design + intégration

 
Pages statiques ?
Mon compte > mes commandes ?
(Pages d'erreurs 404 et autres ?)
 
Support IE à partir de quelle version ?    
 
5K€ me semble une fourchette basse mais pas trop déconnante. ça peut monter à 7K-10K si tu négocies bien
 

Intégration complète en deux semaines c'est pas déconnant, t'as les maquettes à produire aussi donc c'est même pas compté dedans...