lima-city Profil
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
arbeiten
code
date
folgenden code
http
image
last
list
liste
login
quellcode
radius
rank administrator
realisieren
register
span
tabelle
tag
url
zuweisung
-
Hallo Zusammen,
Ich bin gerade dabei mir eine eigene Profilseite zu erstellen. Diese soll Mobil angepasst sein.
Ich selber benutze ein Bootstrap Template, und würde gerne eine ähnliche Strucktur wie hier im Forum verwenden.
Beispiel: http://s1.directupload.net/images/140905/qpfiuf2u.png
Das Bild habe ich Links ausgerichtet auch mit Erfolg, es ist am Desktop perfekt und am Handy.
Aber wie lässt sich diese schöne geaordnete tag/list">Liste, mit perfekten Abstand realisieren?
So sieht es mit dem folgenden Code aktuell aus:
http://s1.directupload.net/images/140905/4t5wxshx.png
<!-- require new stylesheet --> <div class="row"> <section id="profile_container"> <h1>Personal information:</h1> <div class="row"> <div class="3u"> <img class="profile_image" src="/images/pic1.jpg" /> </div> <div class="3u"> <ul class="profile_list"> <li>Username: <span>Marvin</span></li> <li>Username: <span>Marvin</span></li> <li>Username: <span>Marvin</span></li> <li>Username: <span>Marvin</span></li> <li>Username: <span>Marvin</span></li> <li>Username: <span>Marvin</span></li> </ul> </div> </div> </section> </div> <div class="row"> <section id="profile_container"> <h1>Board information:</h1> <div class="row"> <div class="3u"> <ul class="profile_list"> <li>Posts: <span>12</span></li> <li>Threads: <span>11</span></li> <li>Last login: <span>05.09.2014</span></li> <li>Register date: <span>05.09.2014</span></li> <li>Rank: <span>Administrator</span></li> </ul> <ul class="profile_list"> <li><input type="button" value="Send message" /> </ul> </div> </div> </section> </div>
#profile_container{ width:99%; border:1px solid #D8D8D8; height:auto; background-color:transparent; padding:0.25em; } #profile_container h1{ border-bottom: solid 1px #d0d0d0; line-height: 1.5em; font-size:1.5; font-weight:bold; } .profile_list{ line-height:2.25em; list-style: none; } .profile_list li span{ margin-left:1.25em; } .profile_image{ width:100%; height:100%; border-radius:100%; margin-top:0.75em; }
Liebe Grüße,
PS: Die div zuweisungen 3u etc. stammen von Bootstrap und passen die Breite an ! ;)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey,
ich würde in deinem Fall mit dem <pre> Tag arbeiten. Schreibe die Listenelemente einfach eingerückt untereinander und der Inhalt wird genau so, wie im Quellcode dargesgtellt.
http://www.w3schools.com/tags/tag_pre.asp
<pre> <li>Posts: <span>12</span></li> <li>Threads: <span>11</span></li> <li>Last login: <span>05.09.2014</span></li> <li>Register date: <span>05.09.2014</span></li> <li>Rank: <span>Administrator</span></li> </pre>
Viel Spaß
Micha
Beitrag zuletzt geändert: 6.9.2014 8:51:19 von michaelkoepke -
Man könnte auch ganz einfach eine Tabelle nehmen. :-)
Bootstrap bringt ja einige vorformatierte Tabellen mit.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage