CSS "objektorientiert"?

**Matze**

Moin,

ich habe in css folgende Klassen definiert:

Code:

			.btn_home {

   background-color: #1D317B;

   color: #FFFFFF;

   width: 100px;

   text-align: center;

   padding: 5px;

   float: left;

}

.btn_contact {

   background-color: #1D317B;

   color: #FFFFFF;

   width: 100px;

   text-align: center;

   padding: 5px;

   float: right;

}

Der Unterschied hier besteht nur in der Eigenschaft float.
Gibt es die Möglichkeit, das irgendwie zu vereinfacchen?

Ein Beispiel, wie ich es mir ungefähr vorstelle:

markieren

Code:

			.btn {

   background-color: #1D317B;

   color: #FFFFFF;

   width: 100px;

   text-align: center;

   padding: 5px;

}

.btn_home|.btn {

   float: left;

}

.btn_contact|.btn {

   float: right;

}

Der senkrechte Strich "|" soll bedeuten, dass die Eigenschaften von .btn geerbt werden. Geht das irgendwie?

**Flocke**

Es könnte so gehen (bin mir aber nicht sicher):

markieren

Code:

			.btn {

   background-color: #1D317B;

   color: #FFFFFF;

   width: 100px;

   text-align: center;

   padding: 5px;

}

.btn_home {

   float: left;

}

.btn_contact {

   float: right;

}

Benutzung:

markieren

Code:

			<div class="btn btn_home"> ... </div>

<div class="btn btn_contact"> ... </div>

**Matze**

Hallo,

Tatsache das geht, herzlichen Dank. Nun wird der Code deutlich gekürzt und die Erweiterung vereinfacht.

**sakura**

Eine andere Lösung, wäre folgende:

markieren

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

   <title>Untitled</title>

   <style>

      .button {

         background-color: #1D317B; 

         color: #FFFFFF; 

         width: 100px; 

         text-align: center; 

         padding: 5px; 

      }

      #btn_home { 

         float: left; 

      } 

      #btn_contact { 

         float: right; 

      }

   </style>

</head>

<body>

   <input type="Button" id="btn_home" class="button" value="Home" />

   <input type="Button" id="btn_contact" class="button" value="Contact" />

</body>

</html>

...

**rayman**

geht nicht auch das?:

markieren

Code:

			.btn_home, .btm_contact {

   background-color: #1D317B;

   color: #FFFFFF;

   width: 100px;

   text-align: center;

   padding: 5px;

}

.btn_home {

   float: left;

}

.btn_contact {

   float: right;

}

Benutzung:

markieren

Code:

			<div class="btn_home"> ... </div>

<div class="btn_contact"> ... </div>

// edit, hatte doch glatt ein komma vergessen

**Matze**

Danke euch beiden.

@Sakura: Das wäre natürlich eine elegante Lösung, da man so noch gezielter die Attribute setzen kann, wobei der HTML-Quellcode etwas anwächst.

@rayman: Eine reine css-Lösung würde mir auch sehr gut gefallen, nur müsste ich, sobald ich eine weitere Klasse erstelle, den Namen dann der Klasse, die die Eigenschaften erbt, immer zu der vererbenden Klasse hinzufügen, was mir nicht gefällt.

**Elvis**

Zitat von Matze:

@Sakura: Das wäre natürlich eine elegante Lösung, da man so noch gezielter die Attribute setzen kann, wobei der HTML-Quellcode etwas anwächst.

Mieze hat sicher nur keine Lust beim testen noch eine 2. Datei anzulegen. Das _ist_ eine CSS-Lösung, wobei ich raymans Weg gegangen wäre. (Wie froh ich doch bin, dass ich mich mit so ekelhaftem Zeugs wie HTML, CSS, JS nicht beruflich befassen muss.

)

**sakura**

Zitat von Elvis:

Mieze hat sicher nur keine Lust beim testen noch eine 2. Datei anzulegen.

Stimmt

Zitat von Elvis:

Das _ist_ eine CSS-Lösung, wobei ich raymans Weg gegangen wäre. (Wie froh ich doch bin, dass ich mich mit so ekelhaftem Zeugs wie HTML, CSS, JS nicht beruflich befassen muss.

)

Raymans Weg ist zwar in kleinen Seiten gangbar, aber sobald Du anfängst zu dynamisieren wird der mehr Probleme als Vorteile bringen. Der von Flocke ist mir neu, den muss ich mal in Ruhe durchspielen, der hat Potenzial.

...

**alcaeus**

Moin,

zur Loesung von Flocke kann man noch folgendes hinzufuegen:

markieren

Code:

<div class="foo"><p class="bar">foobar</p></div>

Der CSS-Code koennte so aussehen:

markieren

Code:

			.foo

{

  background-color:red;

}

.foo p.bar

{

  color:blue;

}

Die CSS-Klasse "bar" erbt alle Eigenschaften von "foo", gilt aber nur fuer ein p-Element das innerhalb eines Elements der Klasse "foo" vorkommt

Greetz
alcaeus

**Matze**

Zitat von alcaeus:

Die CSS-Klasse "bar" erbt alle Eigenschaften von "foo", gilt aber nur fuer ein p-Element das innerhalb eines Elements der Klasse "foo" vorkommt

Das ist auch nicht schlecht, doch für meine Zwecke ungeeignet.

Sakuras Lösung schaue ich mir aber nochmals an, die ist glaub gar nicht übel, wobei die von Flocke gerade mein Favorit ist. *g*

CSS "objektorientiert"?

CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Re: CSS "objektorientiert"?

Forumregeln

Matze (Co-Admin) Registriert seit: 7. Jul 2003 Ort: Schwabenländle 14.929 Beiträge Turbo Delphi für Win32	#3 Re: CSS "objektorientiert"? 1. Mär 2006, 09:19 Hallo, Tatsache das geht, herzlichen Dank. Nun wird der Code deutlich gekürzt und die Erweiterung vereinfacht.
	Zitat