Netz-Treff - CSS-Liste, ganz banal

#298241

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 00:10:10

CSS-Liste, ganz banal (web.coding)

Hallo zusammen,
ich krieg irgendwann die CSS-Krise.
Egal, was ich mache, bei mir stehen die Listenpunkte links raus.

Mein Ziel: Sowas, wie hier in Word:
[image]

Ich habe zwar einige Seiten im Netz gefunden, die sich damit auseinandersetzen, aber bei mir klappt das alles nicht.

Wer hat mir den ultimativen Tipp?

Besten Dank,
euer 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.

#298243 hoembi 30.12.2011, 00:12:34 @ Karsten Meyer	CSS-Liste, ganz banal antworten
	> Hallo zusammen, > ich krieg irgendwann die CSS-Krise. > Egal, was ich mache, bei mir stehen die Listenpunkte links raus. was meinste mit stehen raus? Hast du vllt n Codeschnipsel oder ne Bespiel file?

#298245

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 00:15:37

@ hoembi

CSS-Liste, ganz banal

antworten

> > Hallo zusammen,
> > ich krieg irgendwann die CSS-Krise.
> > Egal, was ich mache, bei mir stehen die Listenpunkte links raus.
>
> was meinste mit stehen raus? Hast du vllt n Codeschnipsel oder ne Bespiel
> file?

Danke, du hast eine PN.

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.

#298250 _panograf_ [Gast] 30.12.2011, 08:31:14 @ Karsten Meyer	CSS-Liste, ganz banal antworten
	> > > Hallo zusammen, > > > ich krieg irgendwann die CSS-Krise. > > > Egal, was ich mache, bei mir stehen die Listenpunkte links raus. > > > > was meinste mit stehen raus? Hast du vllt n Codeschnipsel oder ne > Bespiel > > file? > > Danke, du hast eine PN. > > Gruß Karsten hast Du das Machwerk mit verschiedenen Browsern angeschaut?

#298253

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 09:15:12

@ _panograf_

CSS-Liste, ganz banal

antworten

> > > > Hallo zusammen,
> > > > ich krieg irgendwann die CSS-Krise.
> > > > Egal, was ich mache, bei mir stehen die Listenpunkte links raus.
> > >
> > > was meinste mit stehen raus? Hast du vllt n Codeschnipsel oder ne Bespiel
> > > file?
> >
> > Danke, du hast eine PN.
> >
> > Gruß Karsten
>
> hast Du das Machwerk mit verschiedenen Browsern angeschaut?

Ja sicher - aber wenn\'s nichtmal mit dem FF tut, brauche ich nicht bei anderen gucken.

hoembi hat mir den wertvollen Tipp gegeben, dass es am floatenden Element links daneben liegt. Mal gucken, wie ich das löse.

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.

#298258

tacky

30.12.2011, 11:15:21

@ Karsten Meyer

CSS-Liste, ganz banal

antworten

Hallo Karsten,

mhhh... ich erstelle Listen bei den Teile eingerückt sind immer folgendermassen:

.eingerueckt
		{
    padding: 5px 20px 5px 43px;
		text-align:justify;
    }
.mehreingerueckt
		{
    padding: 5px 20px 5px 60px;
		text-align:justify;
    }

T@cky

#298260

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 11:25:22

@ tacky

CSS-Liste, ganz banal

antworten

> Hallo Karsten,
>
> mhhh... ich erstelle Listen bei den Teile eingerückt sind immer
> folgendermassen:
>
>

.eingerueckt
> {
> padding: 5px 20px 5px 43px;
> text-align:justify;
> }
> .mehreingerueckt
> {
> padding: 5px 20px 5px 60px;
> text-align:justify;
> }

>
> T@cky

Danke, auch eine Idee.
Vielleicht kann ich damit das Problem umschiffen, dass ich nie so recht weiß, was an Definition für ul und was für li gedacht ist. Andererseits: Welchem Element ordnest du dieses Definitionen zu? Oder vielleicht einem div drumherum?

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.

#298270

tacky

30.12.2011, 12:02:20

@ Karsten Meyer

CSS-Liste, ganz banal

antworten

Hi Karsten,

mhhh... vielleicht habe ich dich auch nicht richtig verstanden.
Wenn es dir nur darum geht das der liststyle nicht nach links rausrückt wäre der Befehl inside das was du suchst, also z.B. so:


<ul class=ohne>
<li>Listenpunkt1</li>
<li class=eingerueckt>UnterListenpunkt1</li>
<li class=eingerueckt>UnterListenpunkt2</li>
<li class=mehreingerueckt>UnterUnterListenpunkt1</li>
<li class=mehreingerueckt>UnterUnterListenpunkt2</li>
<li>Listenpunkt2</li>
</ul>


.ohne
		{
    list-style: none;
    }

.eingerueckt
		{
    padding: 5px 20px 5px 43px;
		text-align:justify;
		list-style: inside circle;
    }
.mehreingerueckt
		{
    padding: 5px 20px 5px 60px;
		text-align:justify;
		list-style: inside circle;
    }

T@cky

#298261

MudGuard

München,
30.12.2011, 11:29:11

@ Karsten Meyer

CSS-Liste, ganz banal

antworten

> Hallo zusammen,
> ich krieg irgendwann die CSS-Krise.
> Egal, was ich mache, bei mir stehen die Listenpunkte links raus.
>
> Mein Ziel: Sowas, wie hier in Word:
> [image]
>
> Ich habe zwar einige Seiten im Netz gefunden, die sich damit
> auseinandersetzen, aber bei mir klappt das alles nicht.
>
> Wer hat mir den ultimativen Tipp?

Du hast berücksichtigt, daß verschiedene Browser die Einrückung auf unterschiedliche Art erzeugen, wenn man\'s nicht explizit vorgibt?

margin-left für ul
padding-left für ul
margin-left für li
padding-left für li

Am sichersten ist es, diese 4 Werte alle erstmal auf 0 zu setzen und dann nur einen auf die gewünschte Einrückung.

--

MudGuard
O-o-ostern

#298262

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 11:47:16

@ MudGuard

CSS-Liste, ganz banal

antworten

> Du hast berücksichtigt, daß verschiedene Browser die Einrückung auf
> unterschiedliche Art erzeugen, wenn man\'s nicht explizit vorgibt?
>
> margin-left für ul
> padding-left für ul
> margin-left für li
> padding-left für li
>
> Am sichersten ist es, diese 4 Werte alle erstmal auf 0 zu setzen und dann
> nur einen auf die gewünschte Einrückung.

Ein sehr interessanter Tipp!

Herzlichen Dank!

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.

#298265

d-fens

Bonn,
30.12.2011, 11:58:41

@ Karsten Meyer

CSS-Liste, ganz banal

antworten

> Hallo zusammen,
> ich krieg irgendwann die CSS-Krise.
> Egal, was ich mache, bei mir stehen die Listenpunkte links raus.

In solchen Fällen ist es hilfreich, den bereits versuchten Code zu posten, sonst müssen andere so viel nachfragen. Inhalte, die nicht öffentlich sein sollen, kann man ja schnell rauslöschen.

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

#298326 Johann [Gast] 30.12.2011, 18:53:33 (editiert von Johann, 30.12.2011, 18:54:02) @ Karsten Meyer	CSS-Liste, ganz banal (ed) antworten
	Hi Karsten, > Egal, was ich mache, bei mir stehen die Listenpunkte links raus. Was machst Du denn? Was steht wie, und vor allem in welchem Kontext, wo heraus? Was ist Dein Ziel im Detail? Ohne den relevanten oder identischen Beispielcode und weitere Anforderungsbeschreibung ist da schlecht analysieren. Gruß, Johann

#298327

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 19:08:05
(editiert von Karsten Meyer, 30.12.2011, 19:09:01)

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel (ed)

antworten

> Ohne den relevanten oder identischen Beispielcode und weitere
> Anforderungsbeschreibung ist da schlecht analysieren.

Okok, ihr habt ja recht. Hier mal die Seite mit der zweistufigen Liste:
Zweistufige Liste
Hoembi fand heraus, dass es an der Grafik links daneben liegt - die \"floated\".
(Ob das so sein muss, muss ich erst mal gucken)

Aber auch die ganz normalen Listen stehen links raus, was weder mir, noch der Kundin gefällt:

Einstufige Liste

Ich muss aber zugeben, dass ich noch keinen Ratschlag, der bis jetzt genannt wurde, umgesetzt habe. Musste heute mal anderes Werkzeug in die Hand nehmen.

Danke für eure Bemühungen!
-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.

#298330

Johann [Gast]

30.12.2011, 19:37:06
(editiert von Johann, 30.12.2011, 19:41:10)

@ Karsten Meyer

CSS-Liste, ganz banal - Hier das Beispiel (ed)

antworten

Damit die Listen nicht nach links in das 25px Margin vom Bild ragen musst Du im CSS für ul das text-indent von -1 weg machen. Dann hast Du\'s wie die H2 angeschlagen.
Sollen die list-items jetzt weiter nach rechts einrücken gibst Du den li jeweils ein margin-left: mit.

Gruß,
Johann

PS: Ich hoffe inständig, dass die Grafik nur beispielhaft vorliegt und nochmals in vernünftiger Qualität nachgepflegt wird

#298331

Hausdoc

Green Cottage,
30.12.2011, 19:44:37

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> PS: Ich hoffe inständig, dass die Grafik nur beispielhaft vorliegt und
> nochmals in vernünftiger Qualität nachgepflegt wird

Warum??

Was gefällt dir daran nicht?

--
Gruß Hausdoc

Heizungsfragen?? - Hier klicken

#298332

Johann [Gast]

30.12.2011, 19:47:50
(editiert von Johann, 30.12.2011, 19:49:06)

@ Hausdoc

CSS-Liste, ganz banal - Hier das Beispiel (ed)

antworten

> Was gefällt dir daran nicht?

Die Kantenglättung der Kreise, des oberen Schrägstriches so wie die der Texte, vor allem der im hellen Kreis, sind für eine Auftragsarbeit nicht hochwertig genug.
Ausserdem ist der Hauptkreis nicht vollständig gefüllt. Das wirkt, und da kenne ich auch den Karsten ein bisschen, für einen Perfektionisten etwas \"schräg\".
Diese einfache Grafik lässt sich z.B. im Photoshop, GIMP, Corel... in fünf Minuten perfekt anfertigen.

#298334

Hausdoc

Green Cottage,
30.12.2011, 19:49:50
(editiert von Hausdoc, 30.12.2011, 19:51:55)

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel (ed)

antworten

Achsoooooooooooooo - schon klar.

Ich dachte du meinst die Farbauswahl -> Augenkrebs

Weil die nächste Stufe wär das hier.

--
Gruß Hausdoc

Heizungsfragen?? - Hier klicken

#298347 Johann [Gast] 30.12.2011, 20:25:24 @ Hausdoc	CSS-Liste, ganz banal - Hier das Beispiel antworten
	> Ich dachte du meinst die Farbauswahl > -> Augenkrebs Erzähl mir mal was vom Augenkrebs. Einer meiner Kunden hat mit dem grossen, weissen S auf rotem Grund (#ff0000, kein Witz) zu tun. Wenn ich in diesem Kontext ca. fünf Werktage verbracht habe sehe ich hauptsächlich meine Umwelt in Blau, weil Rot im Auge schon abgestorben ist

#298349

Hausdoc

Green Cottage,
30.12.2011, 20:34:46

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

:rofl:

Du bekommt hier Schmerzzulage?

--
Gruß Hausdoc

Heizungsfragen?? - Hier klicken

#298350 Johann [Gast] 30.12.2011, 20:36:41 @ Hausdoc	CSS-Liste, ganz banal - Hier das Beispiel antworten
	> Du bekommt hier Schmerzzulage? Böse Zungen könnten behaupten, das fliesst in\'s Angebot mit ein

#298352

Hausdoc

Green Cottage,
30.12.2011, 20:41:06

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> > Du bekommt hier Schmerzzulage?
>
> Böse Zungen könnten behaupten, das fliesst in\'s Angebot mit ein :devil:

Solange du deinen Namen nicht drunter schreiben musst...

--
Gruß Hausdoc

Heizungsfragen?? - Hier klicken

#298353 Johann [Gast] 30.12.2011, 20:43:51 (editiert von Johann, 30.12.2011, 20:46:14) @ Hausdoc	CSS-Liste, ganz banal - Hier das Beispiel (ed) antworten
	> Solange du deinen Namen nicht drunter schreiben musst... Doch doch, als Käpt\'n Hook kann ich ja schlecht signieren. Ein Mann muss auch zu seinen Worten stehen. Und wenn der Preis stimmt bau ich auch in komplett rot und weiß. Sind eh die FC Farben bzw. die Farben meiner Stadt, da tut das weniger weh als Weiss/Blau/Rot

#298335

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 19:50:35

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> > Was gefällt dir daran nicht?
>
> Die Kantenglättung der Kreise, des oberen Schrägstriches so wie die der
> Texte, vor allem der im hellen Kreis, sind für eine Auftragsarbeit nicht
> hochwertig genug.
> Ausserdem ist der Hauptkreis nicht vollständig gefüllt. Das wirkt, und da
> kenne ich auch den Karsten ein bisschen, für einen Perfektionisten etwas
> \"schräg\".
> Diese einfache Grafik lässt sich z.B. im Photoshop, GIMP, Corel... in fünf
> Minuten perfekt anfertigen.

Och nööö. Komm mir nicht damit. Ich habe einen halben Tag mit Corel Photo Paint 11 gekämpft. Habe zwar auch viel gelernt, aber ich hasse solchen Firlefanz.

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.

#298337 Johann [Gast] 30.12.2011, 19:52:34 (editiert von Johann, 30.12.2011, 19:54:26) @ Karsten Meyer	CSS-Liste, ganz banal - Hier das Beispiel (ed) antworten
	> Och nööö. Komm mir nicht damit. Ich habe einen halben Tag mit Corel Photo > Paint 11 gekämpft. Habe zwar auch viel gelernt, aber ich hasse solchen > Firlefanz. Na ja, mir soll\'s ja egal sein. Wenn\'s der Kundin reicht ist\'s ja OK. Ed: Korrigiere doch kurz den großen Kreis und speicher mal als mittel-hohes JPG. Das sieht bestimmt besser aus als gif mit indizierten Farben.

#298339

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 19:57:00

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> Ed: Korrigiere doch kurz den großen Kreis

Ok, mach ich.

> und speicher mal als mittel-hohes
> JPG. Das sieht bestimmt besser aus als gif mit indizierten Farben.

Warum das denn? Wenn eine Grafik nur 2 Farben enthält, ist GIF ideal, nicht nur von der Größe her.

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.

#298341

Johann [Gast]

30.12.2011, 19:58:34
(editiert von Johann, 30.12.2011, 20:04:08)

@ Karsten Meyer

CSS-Liste, ganz banal - Hier das Beispiel (ed)

antworten

> Warum das denn? Wenn eine Grafik nur 2 Farben enthält, ist GIF ideal, nicht
> nur von der Größe her.

Wegen der Kantenglättung. Ohne: Nur zwei Farben, aber Treppen. Mit: Mehr Farben aber softes Design.
Evtl hast Du auch das GIF zu restriktiv in den Farben begrenzt.
Heutzutage nimmt man gif nur noch für simple Transparenzeffekte ohne Alphakanal oder mini-Animationen. Die Dateigröße hat in diesem Kontext heutzutage keine Relevanz mehr, wenn\'s nicht gerade um jedes Bit geht wie bei Sondenkommunikation z.B. JPG bekommt man mit bisschen Übung auch angemessen komprimiert.

#298343

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 20:07:35

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> > Warum das denn? Wenn eine Grafik nur 2 Farben enthält, ist GIF ideal, nicht
> > nur von der Größe her.
>
> Wegen der Kantenglättung. Ohne: Nur zwei Farben, aber Treppen. Mit: Mehr
> Farben aber softes Design.
> Evtl hast Du auch das GIF zu restriktiv in den Farben begrenzt.
> Heutzutage nimmt man gif nur noch für simple Transparenzeffekte ohne
> Alphakanal oder mini-Animationen. Die Dateigröße hat in diesem Kontext
> heutzutage keine Relevanz mehr, wenn\'s nicht gerade um jedes Bit geht wie
> bei Sondenkommunikation z.B. JPG bekommt man mit bisschen Übung auch
> angemessen komprimiert.

Dazu hätte ich es erstmal mit Kantenglättung zeichnen müssen.
Aber wo steckt das in diesem Photopaint 11 mit seinen zigtausend Funktionen?
Und dann würde ein GIF mit 256 Farben immer noch locker reichen.
Denn das kann das Programm recht gut.

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.

#298344 Johann [Gast] 30.12.2011, 20:12:00 (editiert von Johann, 30.12.2011, 20:12:37) @ Karsten Meyer	CSS-Liste, ganz banal - Hier das Beispiel (ed) antworten
	> Und dann würde ein GIF mit 256 Farben immer noch locker reichen. > Denn das kann das Programm recht gut. Meine ich nämlich auch. Wenn Du unbedingt GIF nehmen möchtest reicht das auch für saubere Darstellung. Musste halt noch mal bisschen Dein Grafikprogramm der Wahl dahingehend studieren. Willkommen in meinem Alltag. Coden ist eins. Die Grafik ist die andere Fertigkeit die zu meistern ist

#298338

Hausdoc

Green Cottage,
30.12.2011, 19:53:45

@ Karsten Meyer

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> Och nööö. Komm mir nicht damit. Ich habe einen halben Tag mit Corel Photo
> Paint 11 gekämpft. Habe zwar auch viel gelernt, aber ich hasse solchen
> Firlefanz.

Firlefanzhilfsmittel gibts hier.

:lol3:

--
Gruß Hausdoc

Heizungsfragen?? - Hier klicken

#298333

Karsten Meyer

Konstanz am Bodensee,
30.12.2011, 19:48:40

@ Johann

CSS-Liste, ganz banal - Hier das Beispiel

antworten

> Damit die Listen nicht nach links in das 25px Margin vom Bild ragen musst
> Du im CSS für ul das text-indent von -1 weg machen. Dann hast Du\'s
> wie die H2 angeschlagen.
> Sollen die list-items jetzt weiter nach rechts einrücken gibst Du den
> li jeweils ein margin-left: mit.

Super, vielen Dank - ich gehe nachher gleich wieder dran.

> PS: Ich hoffe inständig, dass die Grafik nur beispielhaft vorliegt und
> nochmals in vernünftiger Qualität nachgepflegt wird

Ich hoffe, du meinst das Machwerk auf der Startseite und nicht die Kreise, mit denen ich mich einen halben Tag geplagt habe!

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.

#298336 Johann [Gast] 30.12.2011, 19:51:02 @ Karsten Meyer	CSS-Liste, ganz banal - Hier das Beispiel antworten
	> Ich hoffe, du meinst das Machwerk auf der Startseite und nicht die Kreise, > mit denen ich mich einen halben Tag geplagt habe! Ehrlich? Womit hast Du die denn gemacht? Hast Du Photoshop?

CSS-Liste, ganz banal (web.coding)

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal

CSS-Liste, ganz banal (ed)

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel (ed)

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel

CSS-Liste, ganz banal - Hier das Beispiel