Zum Inhalt springen

Schriftformatierung

Erstellt am 1. April 2003 · 12 Antworten · letzte Antwort am 7. April 2003

Tags: HTML & CSS, Frage

dj.​picasso ·

Hi Schnickschnack,

also ehrlich: Ich verstehe immemmmermmmmmer noch nicht, warum es die Leute rigoros vermeiden StyleSheets zu nutzen!
Das ist das Gleiche als würdest Du Dir einen nigelnagelneuen Porsche kaufen und einen Motor aus einem VW Käfer Baujahr 1950 einbauen (ist zwar auch ein tolles Auto aber hier geht es nur um den technischen Stand)!! o.O

Hier die Lösung aber mit StyleSheets denn ich sehe nicht ein, dass ich mich jetzt auch noch mit altertümlicher Technik auseinandersetzen muß :x

###############################
# Hier beginnnt das BREADCRUMB
  marks.BC = HMENU 
  marks.BC { 
  special = rootline 
  special.range = 1|-1
  1 = TMENU 
  1.target = _self 
  1.wrap = <p class="breadcrump">Navigation: <a href="http://www.meinedomain.de">Meine Domain Home</a>&nbsp;|&nbsp;</p>
  1.NO { 
    linkWrap = &nbsp;->&nbsp;| 
    ATagParams = class="bc"

    } 

  1.CUR < 1.NO
  1.CUR = 1
  1.CUR.doNotLinkIt = 1
  1.CUR.linkWrap = &nbsp;->&nbsp;| 

  }
###############################

und hier ein Beispiel für das Style:

A.bc:link 		{text-decoration: none; color: rgb(0,0,102);}
A.bc:visited	{text-decoration: none; color: rgb(0,0,102);}
A.bc:active 	{text-decoration: none; color: #000000;}
A.bc:hover 	{text-decoration: underline; color: rgb(0,0,102);}

umwursteln muß Du das dann allein! Viel Spaß 😉
Ciao
Der DJ

PS: Verate mir doch mal eine(r), warum er/sie mit Templates arbeitet und keine StyleSheets einsetzt! Das ist doch wieder der PURE UMSTAND schlechthin .... und was hat das dann mit strukturiertem und kostenbewußtem Arbeiten zu tun? Aus meiner Sicht: relativ wenig!

bk ·

hi schnickeschnack,

css ist praktisch 😃 , daher würde ich dir einfach mal raten stylesheets zu nutzen. abgesehen davon wüsste ich jetzt nicht wie du einen link farblich anders deklarieren solltest (von einer grafikgenerierung mal abgesehen).

also hier ein kleines howto für die einbindung eines stylesheets:

1. stylesheet anlegen: erstelle mit notepad eine datei, die du unter z. b. style.css speicherst. inhalt sollte folgender sein (dieser kann natürlich ausgebaut werden)

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

body {
font-family: Verdana, Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: 9pt;
color: #333333;
font-weight: normal;
font-style: normal;
scrollbar-face-color: #F9F9F9;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #F9F9F9;
scrollbar-3dlight-color: #00000;
scrollbar-darkshadow-color: #F9F9F9;
scrollbar-track-color: #F9F9F9;
scrollbar-arrow-color: #333333;
margin : 0 0 0 0;
}

h1 {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: 14pt;
color: #666666;
font-weight: bolder;
font-style: normal;
text-decoration: none;
margin-bottom: -1px;
}

h2 {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: 13pt;
color: #666666;
font-weight: bold;
font-style: normal;
text-decoration:none;
margin-bottom: -3px;
}

h3 {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: 11pt;
color: #666666;
font-weight: bold;
font-style: normal;
text-decoration:none;
margin-bottom: -3px;
}

td {
font-family: Arial, Helvetica, Univers, 'Zurich BT', sans-serif;
font-size: 9pt;
color: #333333;
font-size: 9pt;
}

### hier fängt die klasse für den pfad an!!

a.rootline:link {
font-size: 9pt;
color: #666666;
font-weight: bolder;
text-decoration: none;
}

a.rootline:active {
font-size: 9pt;
font-weight: bolder;
color: #666666;
}

a.rootline:visited {
font-size: 9pt;
font-weight: bolder;
color: #666666;
}

a.rootline:hover {
font-size: 9pt;
font-weight: bolder;
color: #6699CC;
}

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

2. stylesheet auf den server unterhalb von fileadmin ablegen.

3. styleshett per typo script einbinden.
---------------------------------------------------------------------------------

page.stylesheet = fileadmin/style.css

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

4. deine im stylesheet vergebene classe vergeben:

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

...
marks.PFAD = TEXT
marks.PFAD.field = title
marks.PFAD = HMENU
marks.PFAD {
special = rootline
special.range = 0
1 = TMENU
1.target = _self

1.NO {
linkWrap = | >> |*||*| |
ATagParams = class = rootline

}
...

vorteil, du kannst auch gleich andere parameter einstellen z . b h1, h2, td usw.

mfg

bk

dj.​picasso ·

Oh Yeaahh,

I LIKE IT!!!! 😃 😃

Endlich mal jemand, der "vernünftig" arbeitet!!!!!! Mußte mal gesagt werden!! Congratulations!!

... aber wie das oft so ist, ich habe trotzdem noch ein paar kleine Anmerkungen oder Empfehlungen: o.O Der schon wieder!
1. font-size: 9pt
Gerade wenn man auf die mittlerweile nicht mehr notwendige Cross-Browser-Abfragen verzichtet bringt es bei der Darstellung Vorteile anstelle von pt (pica oder auch point) die px (pixel) Definition zu wählen!
Die px Definition passt sich dynamisch an die Einstellungen des Browsers an während pt statisch ist! Außerdem kann man damit gerade bei Netscape feinere Abstufungen erreichen. NS erkennt nämlich ansonsten bsp. 13pt oder 15pt nicht sondern arbeitet in Stufen 12pt, 16pt, 20pt ...

2. margin: 0 0 0 0;
Auch wenn es kleinkariert ist, so ist es auch hier besser die folgende Schreibweise zu nutzen, um Fehler in den Darstellungen der Browser zu verhindern: margin: 0px 0px 0px 0px;
Bedeutung: margin: oben rechts unten links;

Ansonsten: NUR SO mit CSS und NICHT anders!!
Ciao
Der DJ

Schnickeschnack ·

Hallo nochmal,

habe jetzt nochmal ne Frage dazu:

2. margin: 0 0 0 0;
Auch wenn es kleinkariert ist, so ist es auch hier besser die folgende Schreibweise zu nutzen, um Fehler in den Darstellungen der Browser zu verhindern: margin: 0px 0px 0px 0px;
Bedeutung: margin: oben rechts unten links;

Ich will im Contentbereich für den Marker ###Inhalt### den Einzug links auf bspw. 20 px setzen.
Habe es unter body auch so definiert:

body { 
font-family: Verdana, sans-serif; 
font-size: 10px ; 
color: #333333; 
font-weight: normal; 
font-style: normal;  
margin : 0px 0px 0px 20px; 
}

Aber er will es mir trotz Caches leeren nicht anzeigen.
Bin ich an der falschen Stelle?
Ich suche schon ziemlich lange, vielleicht bin ich schon blind für Kleinigkeiten? 🙁

Wer kann mir die Augen öffnen? #paralyzed#
Brauche AHA-Effekt! :o

Danke,
Simone

kurfuerst ·

Hallo,
Wenn du im Body-Tag ein "margin" definierst, dann rückst du die GANZE seite ein... Willst du das wirklich?

Du musst irgendwie z.B. <span class="content"> </span> um dein Inhaltselement wrappen und in deinem CSS z.B. angeben:
.content{
margin-left:20px;
}

Ich hoffe, ich suche an der richtigen Stelle ;-)

Sebastian

Schnickeschnack ·

Hallo Sebastian,

danke, den ersten Hinweis habe ich schon in die Tat umgesetzt.
Ich hatte immer nur an die Stelle zwischen Menü und Inhalt geschaut
und gar nicht mitbekommen, dass die Seite insgesamt eingerückt war.
Danke erstmal!

Den zweiten werde ich jetzt umsetzen und dann posten,
wie ich vorangekommen bin.
Danke!

Simone

Schnickeschnack ·

Nochmal hallo Sebastian,

selbst mit Hinweis 2 sieht es nachher noch so aus:
Bild: web117.s4.typo3server.com/…/margin.JPG

habe in der Designvorlage <span class="inhalt"> </span> um den Marker ###Inhalt### gewrappt, weil bei content kryptische Fehlermeldungen kamen.
In der CSS-Datei hatte ich es entsprechend geändert.
Nix...
Dann habe ich jetzt folgendes darin stehen:

inhalt{ 
margin: 5px 5px 5px 20px; 
}

Immer noch nix.

Hast Du noch nen Tipp für mich?

Simone, die wenigstens mit dem ersten schon was anfangen konnte :o

dj.​picasso ·

Hey Schnickschnack

Schnickeschnack schrieb

inhalt{
margin: 5px 5px 5px 20px;
}

mach doch mal einen schönen-klitzekleinen-niedlichen-aber-doch-für-das-Style-wichtigen PUNKT vor Deinen inhalt:

.inhalt {.....}
oder aber auch
p.inhalt{....}
h1.inhalt {.....}
....

Vielleicht klappts dann auch mit dem ...Nachbarn. 😃 😃
Ciao
Der DJ