kostenloser Webspace werbefrei: lima-city


lima-city Profil

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    marvinkleinmusic

    Kostenloser Webspace von marvinkleinmusic

    marvinkleinmusic hat kostenlosen Webspace.

    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.

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

Über lima-city

Login zum Webhosting ohne Werbung!