<ul> Name oder Kennung zuordnen

[Gary]

Hi,

Ich kann den ul-Befehl (oder Tag) nicht im Self finden. Gibt es eine Möglichkeit dem <ul> eine Kennung zu verpassen, so daß es im CSS direkt formatiert werden kann (ohne andere <ul's> zu beeinflussen?

--------------------------------------------

<ul> <--- Hier irgendwie deklarieren!!!

<li><a href="#A1">Elektronenstrom</a></li>

</ul>
--------------------------------------------

Gruß Gary

[ChrisB]

Hi,

Ich kann den ul-Befehl (oder Tag) nicht im Self finden.

Dann solltest du vielleicht stattdessen Ausschau nach dem Element halten.

http://jendryschik.de/wsdev/einfuehrung/xhtml/syntax
http://de.selfhtml.org/html/referenz/elemente.htm#ul

Gibt es eine Möglichkeit dem <ul> eine Kennung zu verpassen, so daß es im CSS direkt formatiert werden kann (ohne andere <ul's> zu beeinflussen?

Die Frage hat überhaupt nichts speziell mit dem Element UL zu tun.

Wenn dir Grundlagenwissen über den Umgang mit CSS fehlt, dann lese es dir bitte an.
http://de.selfhtml.org/css/formate/zentrale.htm

MfG ChrisB

[Gary]

Hi ChrisB

Die Frage hat überhaupt nichts speziell mit dem Element UL zu tun.

Ein bischen schon :-)

Hab es gefunden:

In HTML so:
------------------------------------------------
<ul class="hier schreib ich rein was ich will">
------------------------------------------------
Bsp: <ul class="Ankerliste">

Und im CSS dann so:
--------------------------
ul.Ankerliste {
               blablabla
              }
--------------------------

Ist das von mir so richtig verstanden?

Gruß Gary

[bleicher]

Grüße,

<ul class="hier schreib ich rein was ich will">

fast - es gibt ein paar ausnahmen die mir so nicht einfallen, vllt aber auch nicht

Bsp: <ul class="Ankerliste">

ul.Ankerliste {
               blablabla
              }

Ist das von mir so richtig verstanden?

jep :)vergiss bloß nicht ul zu shcließen
MFG
bleicher

[Gary]

Hi Bleicher,

Wie du bereits siehst habe ich die Namensgebung der <ul> bereits dem Perlscript beigebracht (ganz unten im Quelltext von meiner Seite (nein, ich schreibe die url nicht auf...keine Angst.. *lol*)

Im CSS steht:
----------------
ul.Ankerliste {
              }
----------------

Wenn ich aber eingebe:
--------------------------------
ul.Ankerliste {
              display: inline;
              }
--------------------------------

Fehlen die Aufzeichnungskringel vor den Ankerlinks in der Spule.
Ich bastel gerade an einer horizontalen Version der Spule, die dann Fix zu sehen sein soll. Wenn ich nämlich momentan die Seite herunterscrolle, sieht es links so leer aus, wenn ich weiter unten bin *grins*

Also soll das Kopfdesign (hier auf Self oft alsHeader tituliert) geändert werden.

Grüße Gary

[Jeremy]

nein, ich schreibe die url nicht auf...keine Angst.. *lol*

Hallo!
Wieso nicht?

Fehlen die Aufzeichnungskringel vor den Ankerlinks in der Spule.

Aufzeichnungskringel?

Hattest du nun noch irgendwelche Fragen oder war das dein Resumé? :-)

Liebe Grüße, Jeremy.

[Deus Figendi]

Aufzeichnungskringel?

Er/sie meint die Listen-Bullets.

Wenn ich aber eingebe:

ul.Ankerliste {
              display: inline;
              }

Fehlen die Aufzeichnungskringel vor den Ankerlinks in der Spule.

Mit "Spule" meinst du Navigation?

Ich bastel gerade an einer horizontalen Version der Spule, die dann Fix zu sehen sein soll. Wenn ich nämlich momentan die Seite herunterscrolle, sieht es links so leer aus, wenn ich weiter unten bin *grins*

Die Kringel kannst du mit Pseudoelementen wieder hinzufügen. Das ist das sogar das Beispiel bei :before...

ul.Ankerliste li:before {  
 content:"\2022";  
}  

Um die Liste am Viewport zu fixieren musst du sie position:fixed positionieren ^^

[Gary]

Hi zusammen

Aufzeichnungskringel?
Er/sie meint die Listen-Bullets.

Genau die Kringel eben (Bullets) *lol*

Mit "Spule" meinst du Navigation?

Ja bzw. nur die Ankerlinks auf der linken Seite, die sieht so aus.

Ich bastel gerade an einer horizontalen Version der Spule, die dann Fix zu sehen sein soll.

Ich dachte so in diese Richtung

Wenn ich nämlich momentan die Seite herunterscrolle, sieht es links so leer aus, wenn ich weiter unten bin *grins*

Die Kringel kannst du mit Pseudoelementen wieder hinzufügen. Das ist das sogar das Beispiel bei :before...

ul.Ankerliste li:before {

content:"\2022";
}

  
OK, das kenne ich nicht. Aber ich merke es mir wenn ich soweit bin, daß die Ankerlinks erstmal überhaupt nebeneinander stehen. Ein Problem nach dem anderen.Step by step - also langsam bitte :-)  
  

> Um die Liste am Viewport zu fixieren musst du sie position:fixed positionieren ^^``{:.language-xml}  
  
Position fixed kenne ich ;-)  
  
Danke.  
  
Nun ist es so, das wenn ich bei div.wc\_body die Breite auf 100% setze (also vom momentanen Aufbau her gesehen) nutzt mir das display inline nichts. Obwohl es ja dann bei einer Breite von 100% genügend Platz haben müsste, um die Links \_nebeneinander zu platzieren. Macht er aber nicht.  
  
Grüße Gary

[Gary]

Hi zusammen

Kann es sein, das mir bei diesem Konstrukt:
-------------------------------------------
<ul class="Ankerliste">
<li><a href="#A1">Elektronenstrom</a></li>
</ul>
-------------------------------------------

es nichts nützt im CSS, die ul-class"Ankerliste" display: inline zu formatieren, da ich eher die li-Elemente "inline" formatieren müsste um die Ankerpunkte nebeneinander zu haben?

Gruß Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Kann es sein, das mir bei diesem Konstrukt […] es nichts nützt im CSS, die ul-class"Ankerliste" display: inline zu formatieren

Ja, kann sein.

da ich eher die li-Elemente "inline" formatieren müsste um die Ankerpunkte nebeneinander zu haben?

Oder "inline-block". Oder floaten.

Qapla'

[Gary]

Hi Gunnar,

Super Seite!

Das mit dem display: inline-block;
hat nicht funktioniert - oder sagen wir es so: Es hat funktioniert, nur nicht so wie gedacht *gumpf*

Hier ein Beispiel wie es Offline aussieht. Er (der PC oder der Browser oder das CSS) schiebt lediglich das bild der Abschlußspule "in eine Linie" ->in line Block!

Ich habe bei diesem Beispiel mal für Testzwecke das Div auf eine Breite von 100% gesetzt. Um den Ankerlinks den nötigen Platz zu verschaffen, sich der Reihe nach _horizontal_ auszubreiten. Bisher weigern sie sich beharrlich *grr*

Werde noch das float ausprobieren. Muß schnell weg... bin aber bald wieder da (ca.25 min)

Gruß Gary

[Gunnar Bittersmann]

@@Gary:

nuqneH

Das mit dem display: inline-block;
hat nicht funktioniert - oder sagen wir es so: Es hat funktioniert, nur nicht so wie gedacht *gumpf*

Es hätte funktioniert wie gedacht, wenn du es angewandt hättest wie gedacht: auf die 'li'.

Qapla'

[Gary]

Hi Gunnar,

Es hätte funktioniert wie gedacht, wenn du es angewandt hättest wie gedacht: auf die 'li'.

Hab das gemacht bzw. steht bei mir in der CSS:

li: {
    display: inline-block;
    }

ul.Ankerliste {
              }

ul {
   padding: 20px;
   font-size: 0.7em;
   }

1. Die "li" zeigen sich unbeeindruckt.
2. Falls es funktioniert hätte, hab ich dan das Problem, daß es mehrere "li's" gibt.

Habe diese Variante vom Css online.
http://www.wc-report.info/test/WC-Report-Dateien/journal.css

Woran kann es noch liegen, das die "Liste" nicht nebeneinander in einer Reihe angezeigt wird?

Grüße Gary

[Gary]

Hi Gunnar,

Sorry ich habe da einen Hirnrissigen Doppelpunkt, ddr da nicht hingehörte..

Jetzt geht es. Die Bullet Geschichte muss ich aber noch nachrüsten.

Gruß Gary

[Gary]

Hi Gunnar,

Soweit so gut.

Nehmen wir mal an es hat 3 Div Container nebeneinander

|------|------------------------|------|
|      |                        |      |
|   1  |            2           |   3  |

Das Div-1 ist fix links oben.
Das Div-3 ist fix rechts oben.

Div-2 soll jetzt unabhängig von der Breite des Browserfensters immer genau den Platz zwischen Div-1 und Div-3 einnehmen.

Geht sowas?

Gruß Gary

[Gary]

Hi zusammen,

Eigentlich fertig.

Ein problemchen bleibt aber über:

Klicke ich auf einen Ankerlink, wird der entsprechende Bericht ganz nach oben geschoben - hinter das Banner!

Können Anker per Befehl weiter unten beginnen?

Gruß Gary

PS.: Und das mir jetzt keiner schreibt: Works as designed...

[ChrisB]

Hi,

Ein problemchen bleibt aber über:

Klicke ich auf einen Ankerlink, wird der entsprechende Bericht ganz nach oben geschoben - hinter das Banner!

Works as designed :-)

Können Anker per Befehl weiter unten beginnen?

„Befehle“ gibt es in HTML und CSS weit und breit nicht. Bitte bemühe dich langsam mal um etwas korrekteres Vokabular.

Und zu dem Problemchen hat sich Mathias schon mal ausführlich(st) Gedanken gemacht: Probleme mit Ankern und position:fixed (feste CSS-Positionierung)

MfG ChrisB

[Gary]

Hi ChrisB

Wow, das ist harter Tobac... muß sich erst mal setzen *schnauf*

Also, äh, ich denke, ich werde wohl das "komplette" Design ändern.

Und zwar so, das es einfach, übersichtlich und vor allem von mir umsetzbar ist. Werde mir hirzu wohl noch ein paar Gedanken machen...

Allen Dank Gruß Gary

Machen wir hier mal "Ende" mit dem Thema. Habe aber dennoch einiges dazugelernt (before/inline-block usw...)

Merci!

[Gary]

Hi nochmal,

Nur so ein Gedanke...

Theoretisch könnte man die Ankerlinks in der Spule auch so listen:

<selekt>
<option value="">Bitte wählen Sie ein Thema</option>
<option value="1">Elektronenstrom</option>
<option value="2">elektron</option>
<option value="3">Atomverbindung</option>
<option value="n">usw...</option>
</select>

Dann bräuchte die Gesammte liste nur wenig Raum auf dem Viewport _und_ sie wäre erst noch scrollbar...

Was haltet Ihr von so einer Geschichte?

Gruß Gary

Zum Vergeich:
Altes Design
Neues Design

[Kai345]

[latex]Mae  govannen![/latex]

Theoretisch könnte man die Ankerlinks in der Spule auch so listen:

<selekt>

gips nicht :)

Dann bräuchte die Gesammte liste nur wenig Raum auf dem Viewport _und_ sie wäre erst noch scrollbar...

Was haltet Ihr von so einer Geschichte?

Nichts. Ohne JS ist die Seite dann unbenutzbar, es sei denn, du packst das select-Element in ein Formular und spendierst einen (per JS auszublendenden) Submit-Button oder so... womit du dann die Auswertung und Weiterleitung serverseitig vornehmen müßtest. Also: Schlechte Idee

Cü,

Kai

[Gary]

Hi Kai,

Habe noch einfachere Idee im Ordner Test auf dem Server hochgeladen. Statt ein Header, der die Ankerproblematik verursacht, wurde er einfach zum Footer umgebaut! Jetzt springen auch die Anker korrekt.

Gute Nach und THX für die Bedenken der "option value" Lösung.

Gruß Gary

[Gary]

Hi Deus Figendi

Habe dies in das CSS eingefügt:

ul.Ankerliste li:before {
                        content:"\2022";
                        }

Bullet ist da. Kennst du den Code für "|" als Trenner? Sieht villeicht besser aus. *g*

Das mit der ASCII und der Unicodetabelle habe ich gefunden. Ich habe aber kein Unicode auf meiner Seite - nur utf-8

Gruß Gary

[ChrisB]

Hi,

ul.Ankerliste li:before {
                        content:"\2022";

Bullet ist da. Kennst du den Code für "|" als Trenner?

Ich würde als Code für "|" die drei Zeichen ", | und noch mal " vorschlagen.

MfG ChrisB

[Gunnar Bittersmann]

@@Gary:

nuqneH

ul.Ankerliste li:before {
                        content:"\2022";
                        }

Bullet ist da. Kennst du den Code für "|" als Trenner?

"|". So einfach ist das.

Da muss nichts escapet werden. (Bei "•" übrigens auch nicht, geeignete Zeichencodierung (UTF-8) vorausgesetzt.)

Da sollte auch nichts escapet werden. „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden. Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen […]“ [ESCAPES] Das gilt für CSS-Code genauso wie für HTML.

BTW, dass IE < 8 CSS-generierter Content fremd ist, weißt du?

BTW2, wie du den Trenner "|" vor dem ersten 'li' wegbekommst, weißt du?

Das mit der ASCII und der Unicodetabelle habe ich gefunden. Ich habe aber kein Unicode auf meiner Seite

Doch, das hast du.

[…] - nur utf-8

?? Du hast ein Verständnisproblem bezüglich Zeichensatz und Zeichencodierung? Siehe Zeichencodierung für Dummies.

Qapla'

[Gary]

Hi Gunnar und Chris

Danke für die Hilfe.

BTW, dass IE < 8 CSS-generierter Content fremd ist, weißt du?

Wie - die können kein CSS?

BTW2, wie du den Trenner "|" vor dem ersten 'li' wegbekommst, weißt du?

Nein, aber ich finde er stört auch nicht. Aber wie wäre es mit einem zusätzlichen zweiten "|" am Ende jedes Links?

---------------------------------------
ul.Ankerliste li:after {
                        content:"| ";
                        }
---------------------------------------

Du weist nicht zufällig ob statt before eventuell auch ein after funktionier? ;-)

Oder ist das "after" nur fürn selbigen *hehe*

Gruß Gary

[ChrisB]

Hi,

Du weist nicht zufällig ob statt before eventuell auch ein after funktionier? ;-)

Fang jetzt bitte langsam mal an, dich selber zu informieren, bevor du fragst.
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after

MfG ChrisB

[Gunnar Bittersmann]

@@Gary:

nuqneH

In HTML so: <ul class="hier schreib ich rein was ich will">
Ist das von mir so richtig verstanden?

Ich glaube nein. Siehe [CLASS-ID]

Qapla'

[Gunnar Bittersmann]

@@Gary:

nuqneH

Ich kann den ul-Befehl […] nicht im Self finden.

Das wundert mich nicht, denn …

(oder Tag)

Oder was?

Qapla'