Autor Thema: Cascade Stile Sheets (Gelesen 3716 mal)

TMC · « **am:** 24.02.04 - 19:55:20 »

Hi,

ich muss mich gerade mit CSS rumschlagen, insbesondere mit dem Verhalten von Links.

Ich habe hier eine Seite, wo ich verschiedene Blöcke definiert habe.

Also z.B. im CSS

Code

.header {
       position: absolute;
        left: 0px;
        top: 0px;
        width: 770px;
        height: 40px;
        background: #C3C3C3;
}

   div.headertext {
      width: 560px;
      height: 30px;
      padding: 7px 0px 0px 49px;
      font-family: Verdana,Arial,sans-serif;
      font-size: 120%;
      font-weight: bold;
      color: black;
      text-align: left; overflow: hidden;
   }

und im HTML-Code dann

Code

    <DIV CLASS="header">
      <DIV CLASS="headertext">
         Tescht Text
      </DIV>
    </DIV>

Es gibt da mehrere solche Bereiche.

A)
Was mich jetzt als CSS - Neuling interessiert: Wann sticht der Ober den Unter, sprich was gilt übergreifender bei den Definitionen:

Z.B.
.header{}
div.headertext{}
So wie ich verstanden habe ist hier div.headertext ein Bestandteil von .header, oder liegt das nur an meinem Aufruf?

B) Die Folge daraus ist für mich die Definition von Link-Eigenschaften (a:hover etc.).

Die bisherige Implementierung greift leider nur auf die komplette HTML-Datei, ich brauche aber pro "Block" unterschiedliche Eigenschaften für Hyperlinks (mal beim Rollover rot, dann wieder grün, etc.)

Sorry für die Anfängerfragen im CSS-Umfeld, hab im Internet keine Antworten auf diese Basic-Fragen finden können.

Matthias

Axel Janssen temp · « **Antwort #1 am:** 24.02.04 - 20:41:35 »

Zitat von: TMC am 24.02.04 - 19:55:20

A)
Was mich jetzt als CSS - Neuling interessiert: Wann sticht der Ober den Unter, sprich was gilt übergreifender bei den Definitionen:

Z.B.
.header{}
div.headertext{}
So wie ich verstanden habe ist hier div.headertext ein Bestandteil von .header, oder liegt das nur an meinem Aufruf?

Ohne es getestet zu haben, sollte nach meiner generellen markup-Logik der "engere scope" den "weiteren scope" ausstechen.
div:headertext ist in :header. Also müsste div:headertext bei Konflikten den Vorrang haben.

Zitat von: TMC am 24.02.04 - 19:55:20

B) Die Folge daraus ist für mich die Definition von Link-Eigenschaften (a:hover etc.).

Die bisherige Implementierung greift leider nur auf die komplette HTML-Datei, ich brauche aber pro "Block" unterschiedliche Eigenschaften für Hyperlinks (mal beim Rollover rot, dann wieder grün, etc.)

Du kannst unterschiedliche styleKlassen definieren div.headerTextRot, div.headerTextGruen, div.headerTextBlau, etc.

a:hoover galt glaub ich früher als MS-proprietär, oder (vermutlich kann mozilla das. zu faul zum Testen. netscape4 nicht.

Mein Tipp: Hol dir möglichst viel aus dem Web.
weiteres:
Gut ist hierfür www.teamone.de/selfhtml und das angeschlossene Forum.
http://selfaktuell.teamone.de/live/index.htm
Musst uns natürlich sagen, wenn du was interessantes findest.
auch gut:
http://www.w3schools.com/css/css_reference.asp
für notes spezifischere Sachen:
http://www.codestore.net/store.nsf/all?OpenView&Count=10
gutes mozilla feuervogel plugin:
http://chrispederick.myacen.com/work/firefox/webdeveloper/
... und da wir sowieso alle nicht richtig designen können:
http://www.oswd.org/
... und natürlich das JavaScript html Forum mit dem einzigartigen Eric Pascarello: http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=forum&f=20

animate · « **Antwort #2 am:** 24.02.04 - 20:43:26 »

ich hab noch ein kleines Beispiel bei mir gefunden.
wichtig ist der Stylesheet-Abschnitt und die CLASS - Attribute

ach ja, das mit dem engeren Scope was Axel geschrieben hat stimmt latürnich

Code

<html>
<head>
<title>Link Styles</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.navbar {
   color: #FFFFFF;
}
.main a:link {
   color: 003399;
}
.main a:visited {
   color: #9966CC;
}
.main a:hover {
   color: #CCCCCC;
}
.main a:active {
   color: #FF0000;
}

.navbar a:link {
   color: #FFFF00;
}
.navbar a:visited {
   color: #9966CC;
}
.navbar a:hover {
   color: #CCCCCC;
}
.navbar a:active {
   color: #FF0000;
}
-->
</style>
</head>

<body BGCOLOR="#FFFFFF" TEXT="#000000" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN="0" LEFTMARGIN="0">
<table WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="25">
  <tr>
    <td WIDTH="23%" BGCOLOR="#333399" VALIGN="TOP" CLASS="navbar"> 
      <p>&nbsp;</p>
      <p>Etwas Text </p>
      <p>und <a HREF="#">hier ist ein Link</a></p>
      <p>und<a HREF="#"> hier ist noch ein Link</a>.</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </td>
    <td WIDTH="77%" VALIGN="TOP" CLASS="main"> 
      <p>&nbsp;</p>
      <p>Ein bisschen Text im Hauptteil der Seite and <a HREF="#">hier ein
        Link</a>. Und <a HREF="#">noch ein Link</a> und <a HREF="#">noch einer </a>.</p>
    </td>
  </tr>
</table>
</body>
</html>

TMC · « **Antwort #3 am:** 24.02.04 - 21:10:06 »

Axel: super, danke insbesonders für die weiterführenden Links.

Zitat

Musst uns natürlich sagen, wenn du was interessantes findest.

Klar, Feedback folgt :-)

Thomas: auch Dir vielen dank für das Beispiel.

Ich denke nun bin ich erstmal mit Infos versorgt. Komme zwar heute nicht mehr dazu mir das alles näher anzusehen, aber demnächst meld ich mich wieder.

Matthias

TMC · « **Antwort #4 am:** 24.02.04 - 21:24:11 »

Zitat von: Axel Janssen temp am 24.02.04 - 20:41:35

a:hoover galt glaub ich früher als MS-proprietär, oder (vermutlich kann mozilla das. zu faul zum Testen. netscape4 nicht.

yoo, aktueller Firebird-Browser (ups, heißt jetzt ja Firefox) kann das.
Aber danke für den Hint, die Site soll ja möglichst alle Browser abdecken. Wobei ich da schon wieder mit meinen CSS-Block-Definitionen belächelt werde von manchen Leuten. Zurecht, wenn es um ältere Browser geht. Aber aufgrund der HTML-Lesbarkeit und Ladezeiten habe ich mich contra Tabellen entschieden.

Matthias

TMC · « **Antwort #5 am:** 25.02.04 - 21:54:17 »

OK, habe jetzt mal die Links getestet und recherchiert.

Im Zuge meiner Recherche bin ich noch auf folgenden Link gestoßen:
http://www.css-erfolg.de/buch/buch.html

Und das hier ist für mich noch nicht klar:
http://www.css-erfolg.de/buch/buch_texte8.html

Zitat

.center { position: absolute; left: 130px;
top: 146px; width: 533px; z-index: 3; }
div.centertop { width: 533px; height: 13px;
background-image: url("center_top.png"); }

Wo besteht denn der Unterschied zwischen
div.klassenname
und
.klassenname

Will heißen, warum steht hier "div" überhaupt da?

Im HTML ist ja kein Unterschied (bis auf dass er "div.centertop" in den ".center" verschachtelt.

Matthias

animate · « **Antwort #6 am:** 25.02.04 - 22:22:58 »

Zitat von: TMC am 25.02.04 - 21:54:17

Wo besteht denn der Unterschied zwischen
div.klassenname
und
.klassenname

div.klassenname gilt für alle div-Tags der Klasse klassenname

.klassenname gilt für alle Tags der Klasse klassenname

TMC · « **Antwort #7 am:** 25.02.04 - 22:30:29 »

Danke, Thomas.

Aber dann macht doch hier die Unterscheidung des Buch-Autors ja keinen Sinn:

Zitat

<DIV CLASS="center">
<DIV CLASS="centertop"> </DIV>
<DIV CLASS="centerhead">Überschrift 1</DIV>
<DIV CLASS="centertxt">
Lorem ipsum dolor sit amet, ...
</DIV>
<DIV CLASS="centertxtb"> </DIV>
<DIV CLASS="centerhead">Überschrift 2</DIV>
<DIV CLASS="centertxt">
Lorem ipsum dolor sit amet, ...
</DIV>
<DIV CLASS="centerbot"> </DIV>
</DIV>

Denn er nimmt ja im HTML-Code nur DIV-Tags her.

Wenn ich Dich richtig verstehe macht die Unterscheidung nur Sinn, wenn man mit verschiedenen Tags arbeitet?

Matthias

animate · « **Antwort #8 am:** 25.02.04 - 22:39:07 »

hm, ich kenne das Beispiel nicht.

kann sein, dass es hier keinen Sinn macht, aber das gleiche Stylesheet kannst du ja auch in andere HTML-Seiten einbinden und in denen kanns ganz anders aussehen.

TMC · « **Antwort #9 am:** 25.02.04 - 22:44:59 »

OK.

Die Verbindung von http://www.w3schools.com/css/css_syntax.asp und http://selfhtml.teamone.de/css/formate/zentrale.htm erklärt eigentlich alles.

Insbesonders

Zitat

Die beiden HTML-Elemente div und span haben besondere Bedeutung für CSS Stylesheets. Der Grund ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span zur Verwendung innerhalb eines Textes verwendet werden kann und daher überhaupt keine Eigenschaften hat. Wenn Sie mit diesen Elementen arbeiten, können Sie Probleme vermeiden, die sich aus den im Browser voreingestellten Eigenschaften bestimmter Elemente ergeben. So haben beispielsweise Überschriften bei der Darstellung im Browser bestimmte Vor- und Nachabstände, die von Browser zu Browser recht verschieden sein können. Wenn Sie das Aussehen solcher Elemente kontrollieren wollen, benötigen Sie CSS-Formatdefinitionen nicht selten dazu, um einfach nur die automatischen Voreinstellungen der Browser für solche Elemente zu korrigieren. Bei den Elementen div und span können Sie dagegen fast wie auf einer "tabula rasa" aufsetzen.

erklärt die Gründe, warum der Autor überhaupt das DIV-Element verwendet.

Wie auch immer: Habe langsam jetzt die Zusammenhänge kapiert.

Link-Feedback Axel:
Die oben schon erwähnten Links sind für mich am hilfreichsten:
www.teamone.de/selfhtml
http://www.w3schools.com/css/css_reference.asp

Insbesondere für die w3schools bin ich Dir dankbar, kannte ich vorher noch überhaupt nicht und ist von den Basics her sehr hilfreich.

Matthias

ata · « **Antwort #10 am:** 26.02.04 - 11:20:03 »

... als Beispiel: meine Homepage funktioniert fast ausschließlich über DIV-Tags...

... ich verwende auch CSS zur Positionierung der DIV. Die exakte Position berechne ich aufgrund der Bildschirmauflösung des Clients, damit können auch 1600er Auflösungen und 640 Screens die Page lesen. Als Spielerei habe ich das mit einem Zooming verbunden, damit kurzsichtige hier die Möglichkeit haben wirklich alles Lesen zu können - müssen dann halt scrollen...

www.anton-tauscher.de

ata

TMC · « **Antwort #11 am:** 28.02.04 - 18:33:27 »

Habe nun mein erstes CSS-Projekt soweit fertiggestellt :-)

Das ganze ist allerdings nur eine Intranet-Lösung, daher kann ich keinen Link posten...
Habe ich für einen Freund gemacht, dessen IT-Abteilung in seiner Fa. voll auf Microsoft abfährt und wo ND (erstmal) keine Chance hat.

Mein persönliches CSS Fazit:
- Pseudoklasse "visited" kann ziemlich nerven. Hat bei diversen Abschnitten erstmal nie richtig funktioniert. Habe daher separat im css die Links via "a.linknavleft:visited" definiert (inkl. direkten Class-Verweis im Hyperlink <a>), ein .navleft a:visited bzw. dann entsprechendes DIV im HTML hat sich bei mir auch auf andere Abschnitte übertragen. Mag (höchstwahrscheinlich) an meiner CSS-Unkenntnis liegen. Aber nach 1 Stunde Web-Recherche hatte ich es satt und so geht es hier und jetzt erstmal.
Suche nach evtl. nicht geschlossenen <DIV ...> hat mich auch nicht weiter gebracht, habe auch schon diverse CSS und HTML Validatoren durch (inkl. Dreamweaver und co.). Egal, erstmal abgehakt.

- Ansonsten: Macht Spaß das Webdesign. Wenn man sich erstmal damit beschäftigt hat, erkennt man die Möglichkeiten.
Obwohl: In R5 (nicht web) würde ich die Seite wohl immer noch 4-5 mal so schnell umgesetzt haben, erst jetzt merke ich wie gut der Designer ist.

Ich poste demnächst noch ein paar gute CSS-Seiten, die mir weitergeholfen haben, falls das mal wer braucht.

Matthias

Autor Thema: Cascade Stile Sheets (Gelesen 3716 mal)

TMC

Cascade Stile Sheets

Axel Janssen temp

Re:Cascade Stile Sheets

animate

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets

animate

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets

animate

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets

ata

Re:Cascade Stile Sheets

TMC

Re:Cascade Stile Sheets