| 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 |
  |
|
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
|
|
| |
  |
 |
| |
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 50
Geschlecht: 
|
Verfasst Di 25.01.2011 17:50
Titel
|
|
|
meinst du
bla bla bla <br />bla bla
|
|
| |
 |
|
talex
Threadersteller
Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.01.2011 17:58
Titel
|
|
|
| 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 
|
|
| |
|
|
mokleini
Dabei seit: 23.12.2007
Ort: deutschland
Alter: -
Geschlecht:
|
Verfasst Di 25.01.2011 18:03
Titel
|
|
|
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:)
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.01.2011 20:09
Titel
|
|
|
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
|
|
| |
|
|
talex
Threadersteller
Dabei seit: 12.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 25.01.2011 20:16
Titel
|
|
|
| zweitaccount hat geschrieben: | Das könntest Du auch mit Inline-Block-Spans lösen:
Grüße
zweitaccount |
Das sieht doch interessant aus...Danke dir 
|
|
| |
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 50
Geschlecht:
|
Verfasst Di 25.01.2011 20:25
Titel
|
|
|
| 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 |
wäh, das Punkt 1: hatte ich übersehen - Asche auf die Haare
|
|
| |
|
|
Karlarsch
Dabei seit: 05.02.2007
Ort: -
Alter: 46
Geschlecht:
|
Verfasst Mi 26.01.2011 07:24
Titel
|
|
|
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
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
ol ul li / Historie mit Jahreszahlen als HTML Liste
HTML/CSS - Problem mit Liste
[Hilfe] Formatierung von HTML-Liste/Menü
[HTML] Abstände zwischen Bildern (Liste)
HTML-Liste mit Nested Sets erstellen
Formular->automatische Tabs
|
|
Willkommen auf dem Portal für Mediengestalter
