mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 26.04.2024 18:46 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 17: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 17:47, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Di 25.01.2011 17: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 17: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 18: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 20: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 20: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: 62
Geschlecht: Männlich
Verfasst Di 25.01.2011 20: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: 58
Geschlecht: Männlich
Verfasst Mi 26.01.2011 07: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
HTML-Liste mit Nested Sets erstellen
[Hilfe] Formatierung von HTML-Liste/Menü
[HTML] Abstände zwischen Bildern (Liste)
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB