créer une page de profil, ont besoin d'aide (css)

-1

Je crée une page de profil, et je voudrais créer une liste de disciples (similaire à Twitter)créer une page de profil, ont besoin d'aide (css)

Max 18 images à travers, je pense 24px x 24px chaque icône . Avec rembourrage selon l'image ci-jointe.

Quelle serait la meilleure méthode pour reproduire cela en utilisant css. Cela se propage facilement en utilisant php à partir d'un DB.

Je cherche la méthode la plus propre. Suggestions s'il vous plaît. Peut-être même avec un préchargeur jeté pour faire bonne mesure, car nous allons traiter avec 1000 de différentes images.

Vive

Eh bien ce que j'avais pensé.

<ul class="icons"> 
    <li><img1></li> 
    <li><img2></li> 
    <li><img3></li> 
    <li><img4></li>

puis dans le css

ul.icons li {display: inline;}

Mais aurait besoin d'ajouter 2 lignes, donc a penser deux couches de <ul>...</ul> La question, est que je voudrais que si 20 sont affichés alors nous montrons 2 rangées de 10, plutôt qu'une rangée de 18 et une de 2.

Mais c'est aussi propre que je pense Cela pourrait être fait, mais ... je ne savais pas si il y avait une manière programmatique d'utiliser php pour répéter les balises <li> ... </li> basées sur une boucle

Plus voulait ajuster dans le préchargement d'image, et j'ai vu ceux-ci, je ne sais pas comment ils s'appellent. Utilise js pour gérer le chargement.

Source

2010-11-28 422

Avez-vous du code que vous souhaitez partager avec nous? –

Non. Vous voulez voir si quelqu'un peut trouver un code propre. J'ai des idées sur la façon dont je le ferais à répétition, mais aucune idée quant à une méthode plus discrète plus propre – 422

Je peux a t3h cod3z? –

comme ça? example

ou pour simplifier encore plus, vous pouvez fossé les ul et li éléments et il suffit d'utiliser les images dans un div: example

Source

2010-11-28 20:35:18

oui exactement comme ça, d'où j'ai demandé à l'origine. Thats propre et discret :) excellent, maintenant juste besoin de voir si nous pouvons produire la boucle en utilisant php, et définir la largeur de comptage sur les deux lignes pour correspondre. – 422

Vous ne savez pas pourquoi il y a une image de fond dans le css? qui correspond identiquement aux images dans le HTML, ou est-ce juste pour démo placeholder "remplir" et le mettre à transparent? Ce que je devine est le cas. – 422

Ma seule préoccupation est le remplissage, car vos images ont déjà une bordure qui leur donne l'apparence d'un rembourrage. – 422

N'est-ce pas un site Web pour Q & A sur des problèmes spécifiques? À mon avis, il semble que vous vouliez que nous fassions votre travail pour vous ...

Source

2010-11-28 13:18:23 o01

Utilisez un seul élément ul ou ol, donnez à chaque élément li une position fixe avec et float: left dans un parent relativement positionné. La largeur totale sera une fonction de l'élément parent, donc si vous faites le calcul et que vous le définissez correctement, vous obtiendrez vos deux lignes.

Source

2010-11-28 20:31:00 karmajunkie

So. comme li class = "toprow" et li class = "bottomrow"? – 422

non, vous ne devriez pas avoir besoin d'ajouter des classes aux éléments li, vous devriez être en mesure d'atteindre vos objectifs en utilisant simplement CSS. – karmajunkie

Qu'est-ce que vous avez besoin est quelque chose comme ce qui suit, ce qui vous donnera deux lignes des boîtes: 60px

<html> 
    <head> 
    <style> 
     #container{ 
     border:1px solid red; 
     position:absolute; 
     } 
     ul{ 
     list-style:none; 
     width: 180px; 
     margin:0px; 
     padding:0px; 
     } 
     ul li{ 
     float:left; 
     width: 52px; 
     margin:0px; 
     padding:3px; 
     border:1px solid black; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="container"> 
     <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
     </ul> 
    </div> 
    </body> 
</head>

Si vos images sont toutes les mêmes dimensions prévisibles, vous pouvez sauter l'écran flottant et utilisation: en ligne sur les éléments li.

Source

2010-11-29 02:04:27 karmajunkie

Problème que j'ai quand j'ajoute un lien href aux images pour relier les profils, j'ai ajouté une bordure 1px à l'image en noir, ça fait bondir les images. Vous ne savez pas ce que je fais mal: .iconsx { largeur: 420px; bordure: 1px blanc uni; rembourrage-gauche: 5px; rembourrage-top: 5px; } .iconsx img { affichage: en-bloc; largeur: 32px; hauteur: 32px; Couleur de fond: blanc; marge droite: 4px; marge inférieure: 4px; bordure: 1px solide #fff; } .iconsx img a: lien { bordure: 1 px solide $ fff; } .iconsx img: hover, .iconsx img a: hover { bordure: 1px solide # 000; } – 422

Assurez-vous de définir un style pour la pseudo-classe: hover, comme a: hover {border: 0px black;} et définissez le style de lien comme étant le même. – karmajunkie

créer une page de profil, ont besoin d'aide (css)

Répondre

Questions connexes