mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 02.02.2023 19:39 Benutzername: Passwort: Auto-Login

Thema: Liste in html mit tabs ertsellen vom 25.01.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Liste in html mit tabs ertsellen
Seite: 1, 2  Weiter
Autor Nachricht
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.01.2011 16:45
Titel

Liste in html mit tabs ertsellen

Antworten mit Zitat Zum Seitenanfang

Hallo,

kann man irgendwie ne Liste mit tabs erstellen?

Also momentan hab ich es in html so:

Code:
<ul class="gk_bullet1">
<li><strong>Punkt1:</strong> bla bla bla bla</li>
<li><strong>Punkt2:</strong> bla bla bla bla bla bla bla bla</li>
<li><strong<Punkt3::</strong>bla bla bla bla</li>
</ul>


Aussehen sollte das Ganze aber in etwa so:

-Punkt1: bla bla bla bla
-Punkt2: bla bla bla bla bla bla
bla bla
-Punkt3: bla bla bla bla


Hat jemand vielleicht ein codebeispiel parat?

PS: Okay er stellt es hier natürlich nicht richtig dar...das bla bla bla sollte ein wenig Abstand zu den Punkt1/2/3 haben und die zweite reihe des bla bla unter Punkt 2 soll auch unter dem bla bla stehen


Zuletzt bearbeitet von talex am Di 25.01.2011 16:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 61
Geschlecht: Männlich
Verfasst Di 25.01.2011 16:50
Titel

Antworten mit Zitat Zum Seitenanfang

meinst du
bla bla bla <br />bla bla
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.01.2011 16:58
Titel

Antworten mit Zitat Zum Seitenanfang

Mac hat geschrieben:
meinst du
bla bla bla <br />bla bla


<br/> ist doch nur n break, also Zeilenumbruch

Das ganze soll so aussehen:

-Punkt1: --------->bla bla bla bla
-Punkt2: --------->bla bla bla bla bla bla
-------------------->bla bla
-Punkt3: --------->bla bla bla bla


"----->" ist dabei natürlich nur der tab bzw die Leerzeichen *zwinker*
  View user's profile Private Nachricht senden
mokleini

Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht: Männlich
Verfasst Di 25.01.2011 17:03
Titel

Antworten mit Zitat Zum Seitenanfang

dass das "bla bla" weiter rechts steht, würde ich als fortgeschrittener anfänger so lösen:

http://jsfiddle.net/tCXJu/

das der zeilenumbruch auch rechts steht, sorry... auf die lösung bin ich selbst gespannt:)
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.01.2011 19:09
Titel

Antworten mit Zitat Zum Seitenanfang

Das könntest Du auch mit Inline-Block-Spans lösen:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Tabs</title>
<style type="text/css">
.tab {
   display:inline-block;
   vertical-align:top;
}
.tab-10 {
   width:10em;   
}
.tab-20 {
   width:20em;   
}
</style>
</head>

<body>
<pre>Tabs mit 10em</pre>
<p>
  <span class="tab tab-10">Punkt 1:</span>
    Blub blab blib<br />
  <span class="tab tab-10">Punkt 1001.1:</span>
    Blub blab blib<br />
  <span class="tab tab-10">Punkt 130 Absatz 1:</span>
    Blub blab blib
</p>
<pre>Tabs mit 20em</pre>
<p>
  <span class="tab tab-20">Punkt 1:</span>
    Blub blab blib<br />
  <span class="tab tab-20">Punkt 1001.1:</span>
    Blub blab blib<br />
  <span class="tab tab-20">Punkt 130 Absatz 1:</span>
    Blub blab blib
</p>
<pre>Tabs mit 10em - mehrzeilig</pre>
<p>
  <span class="tab tab-10">Punkt 1:</span>
    <span class="tab">Blub blab blib Blub blab blib Blub blab blib<br  />Mehrzeilig<br />Noch ne Zeile</span><br />
  <span class="tab tab-10">Punkt 1001.1:</span>
    <span class="tab">Blub blab blib Blub blab blib Blub blab blib<br  />Mehrzeilig<br />Noch ne Zeile</span><br />
  <span class="tab tab-10">Punkt 130 Absatz 1:</span>
    <span class="tab">Blub blab blib<br  />Mehrzeilig<br />Noch ne Zeile</span><br />
</p>
</body>
</html>


Grüße
zweitaccount
  View user's profile Private Nachricht senden
talex
Threadersteller

Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 25.01.2011 19:16
Titel

Antworten mit Zitat Zum Seitenanfang

zweitaccount hat geschrieben:
Das könntest Du auch mit Inline-Block-Spans lösen:

Grüße
zweitaccount


Das sieht doch interessant aus...Danke dir Lächel
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 61
Geschlecht: Männlich
Verfasst Di 25.01.2011 19:25
Titel

Antworten mit Zitat Zum Seitenanfang

talex hat geschrieben:
Mac hat geschrieben:
meinst du
bla bla bla <br />bla bla


<br/> ist doch nur n break, also Zeilenumbruch

Das ganze soll so aussehen:

-Punkt1: --------->bla bla bla bla
-Punkt2: --------->bla bla bla bla bla bla
-------------------->bla bla
-Punkt3: --------->bla bla bla bla


"----->" ist dabei natürlich nur der tab bzw die Leerzeichen *zwinker*


wäh, das Punkt 1: hatte ich übersehen - Asche auf die Haare
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 57
Geschlecht: Männlich
Verfasst Mi 26.01.2011 06:24
Titel

Antworten mit Zitat Zum Seitenanfang

HTML
Code:

<ul>
  <li><span class="label">Punkt1:</span><span class="text">bla bla bla</span></li>
</ul>



CSS
Code:

.label  {display: block; float: left; width: 200px;}
.text {display: block; margin-left: 210px;}


Das müsste es sein.

Gruß
Karl
  View user's profile Private Nachricht senden
 
Ähnliche Themen HTML/CSS - Problem mit Liste
ol ul li / Historie mit Jahreszahlen als HTML Liste
[Hilfe] Formatierung von HTML-Liste/Menü
[HTML] Abstände zwischen Bildern (Liste)
HTML-Liste mit Nested Sets erstellen
jQuery tabs mit iframes?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.