Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   CSS "objektorientiert"? (https://www.delphipraxis.net/64235-css-objektorientiert.html)

Matze 1. Mär 2006 07:51
CSS "objektorientiert"?
 
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:

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 1. Mär 2006 08:15
Re: CSS "objektorientiert"?
 
Es könnte so gehen (bin mir aber nicht sicher):
Code:
.btn {
   background-color: #1D317B;
   color: #FFFFFF;
   width: 100px;
   text-align: center;
   padding: 5px;
}

.btn_home {
   float: left;
}

.btn_contact {
   float: right;
}
Benutzung:
Code:
<div class="btn btn_home"> ... </div>
<div class="btn btn_contact"> ... </div>

Matze 1. Mär 2006 08:19
Re: CSS "objektorientiert"?
 
Hallo,

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

sakura 1. Mär 2006 08:22
Re: CSS "objektorientiert"?
 
Eine andere Lösung, wäre folgende:
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>
...:cat:...

rayman 1. Mär 2006 08:33
Re: CSS "objektorientiert"?
 
geht nicht auch das?:

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:
Code:
<div class="btn_home"> ... </div>
<div class="btn_contact"> ... </div>
// edit, hatte doch glatt ein komma vergessen :oops:

Matze 1. Mär 2006 08:53
Re: CSS "objektorientiert"?
 
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 1. Mär 2006 08:57
Re: CSS "objektorientiert"?
 
Zitat:
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 1. Mär 2006 09:00
Re: CSS "objektorientiert"?
 
Zitat:
Zitat von Elvis
Mieze hat sicher nur keine Lust beim testen noch eine 2. Datei anzulegen.
Stimmt :mrgreen:
Zitat:
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. :)

...:cat:...

alcaeus 1. Mär 2006 10:37
Re: CSS "objektorientiert"?
 
Moin,

zur Loesung von Flocke kann man noch folgendes hinzufuegen:
Code:
<div class="foo"><p class="bar">foobar</p></div>
Der CSS-Code koennte so aussehen:
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 1. Mär 2006 17:32
Re: CSS "objektorientiert"?
 
Zitat:
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*


Alle Zeitangaben in WEZ +1. Es ist jetzt 04:39 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz