Ansicht:   

#225233

Adeptus [Gast]

23.07.2010, 07:35:15

HTML/CSS-Frage (web.design)

Ich bin mal wieder mit einer Liste zugange. Vorne soll der Urheber stehen, dahinter mehrere Titel. Ich möchte, daß sich der Urheber im Schriftbild von den Titeln etwas abhebt (Farbe, vieleicht geringfügig größer). Darüber hinaus, habe ich so eine Ahnung, daß so etwas mit css geht, weiß aber nicht wie.
Wenn es nicht zu viel Aufwand bedeutet, wäre ich für einen Tipp dankbar.
(Äh... dankbar wäre ich in jedem Fall. Ich meine: Ich hätte gerne einen Tipp, wenn es nicht zuviel Aufwand... boah ist das noch früh! :-P )

#225248

catfight [Gast]

23.07.2010, 09:57:33

@ Adeptus

HTML/CSS-Frage

Moin

> Ich bin mal wieder mit einer Liste zugange. Vorne soll der Urheber stehen,
> dahinter mehrere Titel. Ich möchte, daß sich der Urheber im Schriftbild von
> den Titeln etwas abhebt (Farbe, vieleicht geringfügig größer). Darüber
> hinaus, habe ich so eine Ahnung, daß so etwas mit css geht, weiß aber nicht
> wie.

Du schreibst zwar Liste, aber vermutlich meinst du eine Tabelle? Du könntest den betreffenden TD-Tags eine Klasse verpassen oder auch eine ID wie es dir lieber ist

...
<td class=\"urheber\">Mr. Soundso</td>
...
<td id=\"urheber\">Mr. Soundso</td>
...


http://de.selfhtml.org/css/formate/zentrale.htm
http://de.selfhtml.org/css/formate/zentrale.htm#klassen
http://de.selfhtml.org/css/formate/zentrale.htm#individualformate


Und im Header gibst du dann dein CSS an

<style type=\"text/css\">
<!--
// bei der Verwendung von Klassen
.urheber {color:red;font-size:2em;}
// bei der Verwendung von IDs
#urheber {color:red;font-size:2em;}
-->
</style>


http://de.selfhtml.org/css/formate/einbinden.htm#zentral
http://de.selfhtml.org/css/eigenschaften/tabellen.htm
http://de.selfhtml.org/css/eigenschaften/schrift.htm

> Wenn es nicht zu viel Aufwand bedeutet, wäre ich für einen Tipp dankbar.
> (Äh... dankbar wäre ich in jedem Fall. Ich meine: Ich hätte gerne einen
> Tipp, wenn es nicht zuviel Aufwand... boah ist das noch früh! :-P )

Du wirst um das rtfm (--> http://de.selfhtml.org/css/) nicht herum kommen.

catfight

#225251

Jörg Lorenz zur Homepage von Jörg Lorenz

Berlin,
23.07.2010, 10:17:29

@ catfight

HTML/CSS-Frage

Moin,

> Du schreibst zwar Liste, aber vermutlich meinst du eine Tabelle? Du
> könntest den betreffenden TD-Tags eine Klasse verpassen oder auch eine ID
> wie es dir lieber ist

IDs sehe ich hier problematisch, weil sich die Elemente wiederholen könnten.

Aber wenn man auf die Anzeige im IE keinen großen Wert legt, kann man auch mit Struktur-Pseudoklassen (in der Mitte der Seite) arbeiten. Das funktioniert auch mit TD.

--
Viele Grüße

Jörg
[image]

VBA-Beispiele | Meine Fotosammlung | www.joerglorenz.de | Mail: nt@joerglorenz.de

#225361

Adeptus [Gast]

23.07.2010, 18:23:47

@ catfight

HTML/CSS-Frage

Keine Tabelle. Prinzip:

Autor: Titel1 Titel2 Titel3 usw.


> Du wirst um das rtfm (--> http://de.selfhtml.org/css/) nicht herum
> kommen.
Die Seite kenn ich wohl. Allein: Mir fehlt die Muße.

#225249

teddy [Gast]

23.07.2010, 10:03:41

@ Adeptus

HTML/CSS-Frage

> hinaus, habe ich so eine Ahnung, daß so etwas mit css geht, weiß aber nicht
> wie.
Schau mal hier:
http://de.selfhtml.org/ (deckt alles zu html/css ab)

http://de.selfhtml.org/css/layouts/mehrspaltige.htm
http://de.selfhtml.org/css/eigenschaften/listen.htm
http://de.selfhtml.org/css/eigenschaften/tabellen.htm

#225259

d-fens

Bonn,
23.07.2010, 10:51:37
(editiert von d-fens, 23.07.2010, 10:55:01)

@ Adeptus

HTML/CSS-Frage (ed)

> Ich bin mal wieder mit einer Liste zugange. Vorne soll der Urheber stehen,
> dahinter mehrere Titel. Ich möchte, daß sich der Urheber im Schriftbild von
> den Titeln etwas abhebt (Farbe, vieleicht geringfügig größer). Darüber
> hinaus, habe ich so eine Ahnung, daß so etwas mit css geht, weiß aber nicht
> wie.

Mach doch zwei verschachtelte Listen, deren Elementen du unterschiedliche Klassen zuweist:

<ul>
    <li class=\"urheber\">Urheber 1
        <ul>
            <li class=\"titel\">Titel 1</li>
            <li class=\"titel\">Titel 2</li>
            <li class=\"titel\">Titel 3</li>
        </ul>
    </li>
    <li class=\"urheber\">Urheber 2
        <ul>
            <li class=\"titel\">Titel 1</li>
            <li class=\"titel\">Titel 2</li>
        </ul>
    </li>
</ul>


Im Stylesheet weist du dann entsprechend beliebige Formatierungen zu:

li.urheber {
    color: blue;
    font-weight: bold;
    list-style: none;
}

li.titel {
    color: #000000;
    font-style: italic;
}

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#225262

Jörg Lorenz zur Homepage von Jörg Lorenz

Berlin,
23.07.2010, 11:23:03

@ d-fens

HTML/CSS-Frage

> Mach doch zwei verschachtelte Listen, deren Elementen du unterschiedliche
> Klassen zuweist:

Wobei ich da überlegen würde, ob eine Definitionsliste nicht angebrachter wäre:

<dl class=\"irgendwas\">
  <dt>Urheber1</dt>
  <dd>Titel1</dd>
  <dd>Titel2</dd>
  <dd>Titel3</dd>

  <dt>Urheber2</dt>
  <dd>Titel1</dd>
  <dd>Titel2</dd>
  <dd>Titel3</dd>
</dl>

Dann könnte die Klasse formatiert werden und dazu der jeweilige Nachfahrkombinator DT und DD. Wobei in diesem Fall vielleicht auch eine ID möglich wäre.

--
Viele Grüße

Jörg
[image]

VBA-Beispiele | Meine Fotosammlung | www.joerglorenz.de | Mail: nt@joerglorenz.de

#225267

d-fens

Bonn,
23.07.2010, 11:33:03

@ Jörg Lorenz

HTML/CSS-Frage

> Wobei ich da überlegen würde, ob eine Definitionsliste nicht angebrachter
> wäre:

Ja, das ist vielleicht noch eleganter. Ist halt nur die Frage, ob bereits feststeht, dass die zweite Ebene auch die letzte ist ...  ;-)

> Dann könnte die Klasse formatiert werden und dazu der
> jeweilige Nachfahrkombinator DT und DD. Wobei in diesem Fall vielleicht
> auch eine ID möglich wäre.

IDs verwende ich grundsätzlich nur dann, wenn ich ein Element zwingend präzise ansprechen muss. Für Formatierungen benutze ich Klassen oder gleich das Element. Wenn ich daran denke, wie oft ich früher IDs reumütig zu Klassen umgewandelt habe, weil\'s plötzlich doch mehr als ein Element gab ...  ;-)

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#225268

Jörg Lorenz zur Homepage von Jörg Lorenz

Berlin,
23.07.2010, 11:43:39

@ d-fens

HTML/CSS-Frage

> Ja, das ist vielleicht noch eleganter. Ist halt nur die Frage, ob bereits
> feststeht, dass die zweite Ebene auch die letzte ist ...  ;-)

Ja, das können wir nicht entscheiden.  :-)

> IDs verwende ich grundsätzlich nur dann, wenn ich ein Element zwingend
> präzise ansprechen muss. Für Formatierungen benutze ich Klassen oder gleich
> das Element. Wenn ich daran denke, wie oft ich früher IDs reumütig zu
> Klassen umgewandelt habe, weil\'s plötzlich doch mehr als ein Element gab
> ...  ;-)

Oh ja. Vor vielen Jahren habe ich mal mit Frontpage Express angefangen. Irgendwann waren es so viele Inhalte, dass es damit nicht mehr ging. Da musste auch nicht gerade wenig umgeschrieben werden. Und bei FPE wurde, wenn ich mich richtig erinnere, ja noch nicht mal was mit CSS gemacht, sondern damals noch mit den HTML-Attributen.

Wobei ich IDs auch recht selten verwende. Meist sind das irgendwelche Container für Head, Navi, Content, usw.

--
Viele Grüße

Jörg
[image]

VBA-Beispiele | Meine Fotosammlung | www.joerglorenz.de | Mail: nt@joerglorenz.de

#225360

Adeptus [Gast]

23.07.2010, 18:18:29

@ d-fens

HTML/CSS-Frage

Bei dieser Liste reichen tatsächlich diese zwei Ebenen. Ausserdem ist es genug, wenn die beiden Elemente (Urheber) und Titelliste unterscheidbar sind. Der nächste Urheber kommt einfach in eine neue Zeile.

#225342

Karsten Meyer zur Homepage von Karsten Meyer

Konstanz am Bodensee,
23.07.2010, 16:35:30

@ Jörg Lorenz

HTML/CSS-Frage

> > Mach doch zwei verschachtelte Listen, deren Elementen du unterschiedliche
> > Klassen zuweist:
>
> Wobei ich da überlegen würde, ob eine Definitionsliste nicht angebrachter
> wäre:

<dl class=\"irgendwas\">
> <dt>Urheber1</dt>
> <dd>Titel1</dd>
> <dd>Titel2</dd>
> <dd>Titel3</dd>
> 
> <dt>Urheber2</dt>
> <dd>Titel1</dd>
> <dd>Titel2</dd>
> <dd>Titel3</dd>
> </dl>

Dann könnte die Klasse formatiert werden und dazu der
> jeweilige Nachfahrkombinator DT und DD. Wobei in diesem Fall vielleicht
> auch eine ID möglich wäre.

Genau diese Definitionsliste wollte ich ihm auch ans Herz legen. Nur für die ID (die, nicht eine!) sehe ich heir keine Verwendung.

Gruß Karsten

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

#225346

Jörg Lorenz zur Homepage von Jörg Lorenz

Berlin,
23.07.2010, 16:51:48

@ Karsten Meyer

HTML/CSS-Frage

> Genau diese Definitionsliste wollte ich ihm auch ans Herz legen. Nur für
> die ID (die, nicht eine!) sehe ich heir keine Verwendung.

Das muss man im konkreten Fall sehen. Klar, die ID darf nur einmal vorkommen - wenn auch manche Browser fehlertolerant sind.

Vor allem muss man dann auch sehen, ob man die ID vielleicht nochmal brauchen kann. Wenn man per JavaScript mittels DOM auf das Element zugreifen möchte, kann man das zum Beispiel mit getelementbyid machen - mit einer Klasse hat man da schlechte Karten.

--
Viele Grüße

Jörg
[image]

VBA-Beispiele | Meine Fotosammlung | www.joerglorenz.de | Mail: nt@joerglorenz.de

#225358

Johann [Gast]

23.07.2010, 18:15:29

@ Jörg Lorenz

HTML/CSS-Frage

> Wenn man per JavaScript mittels DOM auf das Element
> zugreifen möchte, kann man das zum Beispiel mit getelementbyid machen - mit
> einer Klasse hat man da schlechte Karten.

Hi,

diese Funktion wird im Zuge von HTML5 implementiert. Bis dato geht \"getElementsByClassname()\" auch, muss man sich aber eine Funktion basteln.

Gruß,
Johann

#225357

Adeptus [Gast]

23.07.2010, 18:15:19

@ Jörg Lorenz

HTML/CSS-Frage

Auch Dir meinen Dank. Ich werde beides mal versuchen.

#225356

Adeptus [Gast]

23.07.2010, 18:13:33

@ d-fens

HTML/CSS-Frage

Danke. So ähnlich hatte ich mir das gedacht, nur daß ich statt Bold und italic unterschiedliche Größen angeben wollte.

Wegen des angedrohten Unwetters bin ich heute früher los. Deshalb wurde mir heute Morgen die Zeit knapp und deshalb kommt jetzt erst die Antwort.

#225363

Adeptus [Gast]

23.07.2010, 18:25:01

@ Adeptus

Danke an alle!


Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz