eine Profilseite erstellen, müssen Hilfe (CSS)

-1

ich eine Profilseite erschaffe, und ich möchte ein Anhänger Liste (ähnlich Twitter)eine Profilseite erstellen, müssen Hilfe (CSS)

Max 18 Bilder über, glaube ich 24px x 24px jedes Symbol erstellen . Mit Polsterung gemäß dem Bild anbei.

Was wäre die beste Methode, dies mit CSS zu reproduzieren. Das wird leicht mit PHP aus einer db propagiert.

Ich bin auf der Suche nach der saubersten Methode. Vorschläge bitte. alt text

Vielleicht sogar mit einem Preloader für ein gutes Maß geworfen, wie wir es mit Tausenden von verschiedenen Bildern beschäftigen werden.

Prost

Nun ist es das, was ich gedacht hatte.

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

dann in der CSS-

ul.icons li {display: inline;}

Aber würde zwei Zeilen hinzufügen müssen, so dachte zwei Schichten <ul>...</ul> Das Problem ist ich möchte, dass, wenn 20 angezeigt dann zeigen wir 2 Reihen von 10, anstatt einer Reihe von 18 und einer von 2.

Aber das ist so sauber wie ich denke, es könnte getan werden, aber ... Ich wusste nicht, ob Es gab eine programmatische Art und Weise der Verwendung von Php, um die <li> ... </li> Tags basierend auf einer Schleife

zu wiederholen Ich wollte, um in Bild preloader zwicken, und ich habe diese gesehen, nur nicht sicher, wie sie heißen. Verwendet js, um das Laden zu verarbeiten.

Quelle

2010-11-28 422

Haben Sie einen Code, den Sie mit uns teilen möchten? –

Nein. Willst du sehen, ob irgendjemand einen sauberen Code entwickeln kann? Ich habe Ideen, wie ich es wiederholt tun würde, aber keine Ahnung wie eine sauberere unaufdringlichere Methode – 422

Ich kann t3h cod3z haben? –

so? example

oder es noch mehr zu vereinfachen, können Sie die ul und li Elemente Graben konnte und einfach Bilder in einem div verwenden: example

Quelle

2010-11-28 20:35:18

ja genau so, daher habe ich ursprünglich gefragt. Das ist sauber und unaufdringlich :) ausgezeichnet, jetzt müssen Sie nur sehen, ob wir die Schleife mit PHP erzeugen können, und die Zählweite in beiden Zeilen passend einstellen. – 422

Nicht sicher, warum es ein Hintergrundbild in der CSS gibt? das stimmt identisch mit den Bildern im html überein, oder dient das nur dazu, den Platzhalter "fill" zu demontieren und transparent zu setzen? Was ich vermute, ist der Fall. – 422

Meine einzige Sorge ist Padding, da Ihre Bilder bereits einen Rand haben, der es wie Padding aussieht. – 422

Ist dies nicht eine Website für Q & A zu bestimmten Problemen? Meiner Meinung nach klingt es so, als wollten wir, dass du deine Arbeit für dich tust ...

Quelle

2010-11-28 13:18:23 o01

Verwende ein einzelnes ul- oder ol-Element, gebe jedem li-Element ein festes mit und float: links in einem relativ positionierten Elternteil. Die Gesamtbreite ist eine Funktion des übergeordneten Elements. Wenn Sie also die Berechnung ausführen und entsprechend festlegen, erhalten Sie Ihre zwei Zeilen.

Quelle

2010-11-28 20:31:00 karmajunkie

So aktualisiert. wie li class = "toprow" und li class = "bodentrow"? – 422

Nein, Sie sollten den li-Elementen keine Klassen hinzufügen müssen, Sie sollten Ihre Ziele nur mit CSS erreichen können. – karmajunkie

Was Sie brauchen, ist so etwas wie die folgenden, die Sie zwei Reihen geben von 60px Boxen: inline auf dem li-Elemente:

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

Wenn die Bilder alle die gleichen Dimensionen vorhersehbar sind, könnten Sie die Schwimm- und Verwendung Anzeige überspringen.

Quelle

2010-11-29 02:04:27 karmajunkie

Problem, das ich habe, ist, wenn ich einen Link zu den Bildern hinzufügen, um zurück zu den Profilen zu verknüpfen, habe ich einen 1px Grenze zum Bild in schwarz hinzugefügt, macht es die Bilder springen. Nicht sicher, was ich falsch mache: .iconsx { width: 420px; Grenze: 1px festes Weiß; Polsterung-links: 5px; padding-top: 5px; } .iconsx img { Anzeige: Inline-Block; Breite: 32px; Höhe: 32px; Hintergrundfarbe: weiß; Rand rechts: 4px; Rand-unten: 4px; Grenze: 1px fest #fff; } .iconsx img a: link { Rahmen: 1 px solid $ fff; } .iconsx img: schweben, .iconsx img a: schweben { border: 1px fest # 000; } – 422

Seien Sie sicher und definieren Sie einen Stil für die Pseudoklasse: hover, wie a: hover {border: 0px solid black;}, und definieren Sie den Verknüpfungsstil so, dass er derselbe ist. – karmajunkie

eine Profilseite erstellen, müssen Hilfe (CSS)

Antwort

Verwandte Themen