CSS-Scriptfehler? (Verständnisproblem)

[unclefu86]

Hallo!

Erstmal sorry für den unspefizischen Titel, aber mein Problem ist leider ein unkonkretes.

Ich brauche eure Hilfe. Gleich jetzt bitte ich darum, bitte KEINE LINKS (zu mindestens nicht SELFHTML oder CSS4YOU) und NEIN, ich werde es nicht eingehender studieren, denn das habe ich getan! Ich verstehe es schlicht NICHT, tut mir leid! Und deswegen hoffe ich, dass mir das vielleicht so jemand erklären kann! Ich danke euch vielmals und möchte mich schon im Voraus für die Mühe entschuldigen!

Anmerkungen: Die Links sollen rechts hin, ich will eigentlich eine banale (?) Aufteilung wie ca. hier erreichen! (Farbverlauf in drei Schritten, wobei ich links gleich mit dem Inhalt (content) anfangen will, also anders als im Beispiel.
Die Links sollen gestaltet sein, wie in „div.menu“ angegeben und DER GESAMTE REST des Dokuments soll eigentlich über die Attribute in „div.content“ definiert sein! Ich will im Endeffekt zwei Container, und die Farbgebung soll sich immer mehr abflachen. Wichtig dabei ist, dass die Grundfarbe schwarz sein soll, weiße Schrift und die Hintergrundfarbe am Ende so ca. grau. Das nur als Idee, sollte eigentlich auch aus dem Code ersichtlich sein.

Noch einige Fragen:
Wann bzw. warum muss ich das „/>“ (inklusive Leerzeichen) einsetzen?
Welche Fehler befinden sich in meiner „stylesheet.css“?
Habe ich das mit der „print.css“ korrekt umgesetzt oder nicht? (Hab euer Tutorial mal als Anleitung genommen…)
Warum funktioniert weder „overline“, noch die korrekte Farbgebung?

Ich möchte außerdem, dass das gesamte Dokument wie in der Beispielhomepage entsprechend durch die Hintergrund/Basisfarben komplett ausgefüllt ist. Wieso ändert da mein „background-color:#..“ nichts??? Letztendlich noch eine Frage, die nirgends erläutert wird:

Muss zwischen dem Attribut am Anfang/Ende und dem „{„ bzw. „}“ wirklich ein Leerzeichen? Oder kann es auch so aussehen: a:link{color:red} ? Außerdem hier auch die Frage, muss das „;“ denn hin? Ich habe es im obigen Beispiel ja einfach weggelassen. Ich meine, gut ich könnte es nachprüfen, aber ich bin mir ja sowieso über überhaupt gar nichts sicher, weswegen ich dann eine Richtigkeit nicht nachvollziehen kann/will.

Ansonsten (ich weis jetzt gar nicht, wie das bei mir ist) würde ich gerne ein Menü haben, das nicht wegrutscht, sondern immer „on top“ bzw. sichtbar bleibt. Was muss man dazu reinschreiben?

Was haltet ihr von Anwender-relativen Farbwörtern?

Noch eine Frage: Würdet ihr empfehlen, die Größenangaben in „pt“ statt in „px“ zu schreiben?

Ich weis vielleicht sieht das für euch alles so einfach oder doof aus, aber das ist mir egal, ich will es verstehen und ich weis, ihr könnt mir helfen! Meine Fragen könnt ihr einfach mit Ja oder Nein beantworten, reicht schon.

Die Stylesheet.css

a:link { border-bottom:1px white; padding-bottom:2px; text-decoration:overline; text-decoration:underline !important;}

a:visited { border-bottom:1px white; padding-bottom:2px; text-decoration:underline !important;}

a:hover, a:active { border-bottom:1px dashed white; padding-bottom:2px; text-decoration:none !important;}

cite,blockquote { font-size:10px; text-align:center; text-shadow:Silver; font-style:italic; font-style:oblique;
margin-top:20px; margin-bottom:20px; margin-left:10px; margin-right:10px !important;}
h1, h2, h3, h4, p,ul,ol,li,div,td,th,address { color:#FFFFFF }
p,ul,ol,li,div,td,th,address { font-size:10px !important;}

h1 { font-size:22px !important;} 
h2 { font-size:18px !important;} 
h3 { font-size:16px !important;} 
h4 { font-size:14px !important;}

body { color:#666666 !important;}

div.menu { font-family:Arial, MS Sans Serif, Verdana; font-size:12px; color:#FFFFFF; background-color:#000000; visibility:visible; 
margin-top:100px; margin-left:605px; margin-right:780px !important;}
   
div.menu ul { color:#9933CC !important;}

div.content { font-family:Arial, MS Sans Serif, Verdana; font-size:10px; color:#FFFFFF; background-color:#000000; 
margin-top:100px; margin-left:0px; margin-right:600px; visibility:visible !important;}
--></style>

Die print.css:

/* CSS Print Document */
<style type="text/css"><!--
.menu { visibility:hidden; display:none }
.content { font-family:Arial, MS Sans Serif, Verdana; font-size:10px; color:black; background-color:#FFFFFF }

@page { size:21.0cm 29.7cm; margin-top:1.7cm; margin-bottom:1.4cm; margin-left:2cm; margin-right:2cm; marks:crop cross }

a:link, a:visited, a:hover, a:active { text-decoration:none; }

h1, h2, h3, h4, p,ul,ol,li,div,td,th,address { color:#000000; }
p,ul,ol,li,div,td,th,address { font-size:10px }

h1 { font-size:22px } 
h2 { font-size:18px } 
h3 { font-size:16px } 
h4 { font-size:14px }
--></style>

Das contentmain1.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css"><!--
@import "print.css" print, embossed;
@import "stylesheet.css" screen, projection;
--></style>
</head>
<body>
 <div class="menu">
 <a href="index.htm">Home</a>
 <ul><a href="Untitled-1.htm">Test</a></ul>
 </div>
 
<div class="content">
Inhalt
</div>
</body>
</html>

Nochmals: Bitte KEINE LINKS, ich wünsche mir eine Erklärung!! Vielen Dank!!

No one said, it would be easy, but no one said it would be that hard.

Dank und Grüße

unclefu86

[Jupp]

Zitat von unclefu86

Wann bzw. warum muss ich das „/>“ (inklusive Leerzeichen) einsetzen?

ich weiß nicht ob du das meinst, aber bei xhtml werden damit leere tags, z.b. <img /> gekennzeichnet.

Zitat von unclefu86

Warum funktioniert weder „overline“, noch die korrekte Farbgebung?

nimm statt overline besser border-top

Zitat von unclefu86

Ich möchte außerdem, dass das gesamte Dokument wie in der Beispielhomepage entsprechend durch die Hintergrund/Basisfarben komplett ausgefüllt ist. Wieso ändert da mein „background-color:#..“ nichts???

z.b.: body {background: #f90;}

Zitat von unclefu86

Muss zwischen dem Attribut am Anfang/Ende und dem „{„ bzw. „}“ wirklich ein Leerzeichen?

Nö

Zitat von unclefu86

muss das „;“ denn hin?

bei einer anweisung glaub ich nicht, aber sollte man schon machen. bei mehreren anweisungen muss es auf leden fall.

Zitat von unclefu86

Was haltet ihr von Anwender-relativen Farbwörtern?

wenn du z.b. background: blue; meinst, das ist nicht so toll. besser die hexa-werte nehmen.

Zitat von unclefu86

Noch eine Frage: Würdet ihr empfehlen, die Größenangaben in „pt“ statt in „px“ zu schreiben?

nein. px oder em.
hier noch deine dateien

  a:link {
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
  border-top: 1px solid #fff;
  text-decoration: underline;
  }
  a:hover, a:active {
  border-bottom: 1px dashed #fff;
  text-decoration: none;
  }
  cite,blockquote {
  font-size: 10px;
  text-align: center;
  font-style: italic;
  margin-top: 20px 10px;
  }
  h1, h2, h3, h4, p,ul,ol,li,div,td,th,address {color: #fff;}
  p,ul,ol,li,div,td,th,address {font-size:10px;}
  h1 { font-size: 22px;} 
  h2 { font-size: 18px;} 
  h3 { font-size: 16px;} 
  h4 { font-size: 14px;}
  body {
  color:#666;
  background: #ccc;
  }
  div.menu {
  font-family: Arial, sans-serif, Verdana;
  font-size:12px;
  color:#fff;
  background:#000;
  margin: 100px 780px 0 605px;
  }
     div.menu ul {color:#93C;}
  div.content {font-family:Arial, sans-serif, Verdana;
  font-size:10px;
  color:#fff;
  background:#000; 
  margin:100px 600px 0 0;}
  --></style>

Die print.css:

  /* CSS Print Document */
  <style type="text/css">
  <!--
  .menu {visibility:hidden; display:none;}
  .content {
  font-family: Arial, sans-serif, Verdana;
  font-size: 10px;
  color: #000;
  background:#fff;
  }
  a:link, a:visited, a:hover, a:active {text-decoration:none;}
  h1, h2, h3, h4, p,ul,ol,li,div,td,th,address {color:#000;}
  p,ul,ol,li,div,td,th,address {font-size:10px;}
  h1 {font-size:22px;} 
  h2 {font-size:18px;} 
  h3 {font-size:16px;} 
  h4 {font-size:14px;}
  -->
  </style>

Das contentmain1.htm:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Unbenanntes Dokument</title>
  <link rel="stylesheet" type="text/css" href="print.css">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
 </head>
  <body>
   <div class="menu">
   <a href="index.htm">Home</a>
   <ul><a href="Untitled-1.htm">Test</a></ul>
   </div>
   
  <div class="content">
  Inhalt
  </div>
  </body>
  </html>

[unclefu86]

Hallo Jupp!

Vielen Dank schonmal für deine Hilfe!! Da bin ich schon etwas weiter.
Also das "/>" wusste ich noch nicht, aber deswegen danke ich auch für die Aufklärung.
Verwundernswerterweise finde ich aber solche Konstrukte in Tutorials:

<link rel="Stylesheet" type="text/css" href="screen.css" media="screen" />

Und zwar unter anderem hier.

Mit "overline" könnte ich den Hyperlinks laut den Angaben überhalb des Textes einen Strich machen, sozusagen "überstreichen".
Wäre "border-top" da immer noch angebracht?

Ich weis, dass ich nach dem # bei Color einen Hexadezimalwert angeben muss, der Punkt ist ja, ich habe es gemacht, nur funktionieren tut es trotzdem nicht.

Also muss der Fehler irgendwo in der Verknüpfung liegen. Ansonsten würde ich ja nicht fragen. Meine Anmerkungen sind nur als Ergänzung zum Code gedacht. Und natürlich danke für deine Verbesserungen!!

Bei mehreren muss das ";" hin, das ist klar und bei einzelnen schien es bei mir auch ohne zu funktionieren, was ja auch der Logik entspräche..

Mit Anwender-relativen Farbwörtern meine ich das Alternativmodell, siehe hier unter "Anwender-relative Farbwörter".

Und wieso "px" oder "em" und nicht "pt"? Ich frage nur, weil ich bisher über das Darstellungsproblem gelesen habe, klar, es gibt für und wieder, aber für mich wäre die logiste Wahl das "pt".

Würde mich freuen, falls sich noch jemand zu meinen Fragen äußert, bzw. falls es noch etwas auszubessern an meinem Code gibt. Ansonsten wäre ich ja happy.

*edit* Anmerkungen: 1) Wieso hast du in der "print.css" das

@page { size:21.0cm 29.7cm; 
  margin-top:1.7cm; 
  margin-bottom:1.4cm; 
  margin-left:2cm; 
  margin-right:2cm; 
  marks:crop cross }

weggelassen?

2) Wenn allein

 <link rel="stylesheet" type="text/css" href="print.css">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">

dasteht, wie weis dann der Browser, welche *.css Datei zu benutzen ist?
Außerdem wäre doch eine Nutzung von dem CSS-Befehl "@import" sinnvoller, oder nicht? (Oder ist die Kompatibilität mit HTML besser?)

[hero-master]

Hi unclefu86 ,

Zitat von unclefu86

Also das "/>" wusste ich noch nicht, aber deswegen danke ich auch für die Aufklärung.
Verwundernswerterweise finde ich aber solche Konstrukte in Tutorials. Und zwar unter anderem hier.

In XHTML müssen alle Tags wider geschlossen wertden. Bei Tags, die nur einen "Starttag" haben, wird darum ein Querstrich mit einem Leerzeichen davor verwendet
[quote=unclefu86]
Mit "overline" könnte ich den Hyperlinks laut den Angaben überhalb des Textes einen Strich machen, sozusagen "überstreichen".
Wäre "border-top" da immer noch angebracht?

Zitat von unclefu86

Ich weis, dass ich nach dem # bei Color einen Hexadezimalwert angeben muss, der Punkt ist ja, ich habe es gemacht, nur funktionieren tut es trotzdem nicht.

overline geht ganz normal, jedoch ist bei deinem Beispiel der Fehler:

text-decoration:overline; text-decoration:underline !important;

Du hast 1. 2mal text-decoration definiert, 2. das text-decoration:underline als wichtig markiert, also wird das auch ausgegeben.
Wenn du overline und underlien verwenden möchtest, geht das mit text-decoration:underline and overline}

Zitat von unclefu86

Bei mehreren muss das ";" hin, das ist klar und bei einzelnen schien es bei mir auch ohne zu funktionieren, was ja auch der Logik entspräche..

Wenn du nur ein Stil für einen Tag definierst, muss dahinter kein Strichpunkt, da der nur zur Abgrenzung dient.

Zitat von unclefu86

Mit Anwender-relativen Farbwörtern meine ich das Alternativmodell, siehe hier unter "Anwender-relative Farbwörter".

Das hängt ganz von dir ab. Mit diesen Werten überlässt du dem Schicksal und den Einstellungen deines Users die Gestaltung..Ich würde das nicht empfehlen, kann zu bösen Gestaltungen führen

Zitat von unclefu86

Und wieso "px" oder "em" und nicht "pt"? Ich frage nur, weil ich bisher über das Darstellungsproblem gelesen habe, klar, es gibt für und wieder, aber für mich wäre die logiste Wahl das "pt".

Das hängt von deinem Layout und deinem Ziel der HP ab.
Mit % und em-Angaben bei den fonts, kann man auch im IE die Schriftgröße verändern. Mehr zu den Fonts findest du heir in der Suche, bei Google, oder auch hier:
http://barrierefrei.e-workers.de/p_fontsize.php

[Edit:]
In der CSS-Datei niemals <style.....verwenden
Außerdem kannst du per media="" in dem Tag <link definieren, für was der Stylesheet gedacht ist, z.B. für die print.css Datei wäre es sinnvoll media="print" zu schreiben, falls du die Seite ändern willst, wenn man die Seiet ausdrucken möchte

[designfanatiker]

Zitat von unclefu86

Und wieso "px" oder "em" und nicht "pt"? Ich frage nur, weil ich bisher über das Darstellungsproblem gelesen habe, klar, es gibt für und wieder, aber für mich wäre die logiste Wahl das "pt".

Größenangaben in Punkt sind eigentlich nur im Printbereich üblich. Siehe auch http://www.traum-projekt.com/forum/s...ad.php?t=59755

[unclefu86]

Vielen Dank nochmal an alle für die Hilfe!!
Ich möchte mich auch nochmal entschuldigen, weil ich bei CSS4YOU nicht richtig geschaut habe, da gibt es ja noch vieeeeele Tutorials und die helfen mir gerade sehr weiter!! Hätte halt doch mal besser aufpassen sollen..