kostenloser Webspace werbefrei: lima-city

lima-city Profil

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   marvinkleinmusic

   

   marvinkleinmusic hat kostenlosen Webspace.

   16:31, 5.9.2014

   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 ! ;)
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. michaelkoepke

   michaelkoepke hat kostenlosen Webspace.

   8:50, 6.9.2014

   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

4. pcw

   pcw hat kostenlosen Webspace.

   14:01, 6.9.2014

   Man könnte auch ganz einfach eine Tabelle nehmen. :-)
   
   Bootstrap bringt ja einige vorformatierte Tabellen mit.
   
   

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?