Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15

Thema: farbmanagement in css - ids o.. fr farben vergeben?

  1. #1
    HTML Newbie
    Registriert seit
    15.09.2005
    Beitrge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard farbmanagement in css - ids o.. fr farben vergeben?

    Hallo Forum,
    suche eine Mglichkeit das Farbmanagement meiner HP zu vereinfachen.
    Im Moment sieht es so aus, dass ich in meiner css datei, Klassen anlege die meinetwegen so aussehen:
    Code:
    /*3  MENU 2, level 2, active state (ACT) */
    TD#menu_2 DIV.e2_hl {
      font-size: 10px;
      font-weight:bold;
      padding-left:15px;
      padding-right:15px;
      padding-top: 2px;
      padding-bottom: 2px;
      background-color: #eeeeee;
    da es in dieser Datei nicht nur eine Klasse gibt sondern einige mehr aber nur zwei oder drei Farben, ist es sehr aufwendig immer alle Klassen zu suchen wenn aus - #eeeeee; - meinetwegen - #ff0022 - werden soll.

    Ich suche nun eine Mglichkeit die es mir erlaubt alle Farben mit einem Befehl zu ndern.
    Mglicherweise geht es mit einer Art ID-Vergabe, die wie folgt lauten knnte:

    ID-1 = #eeeeee

    der Code dazu wrde dann so aussehen:
    Code:
    /*3  MENU 2, level 2, active state (ACT) */
    TD#menu_2 DIV.e2_hl {
      font-size: 10px;
      font-weight:bold;
      padding-left:15px;
      padding-right:15px;
      padding-top: 2px;
      padding-bottom: 2px;
      background-color: 1;
    Wenn ich dann die ID so vernder

    ID-1 = #ff0022

    wrde sich natrlich in allen Klassen die Farbe auf einen Streich ndern.

    Lange Erklrung - kurze Frage

    Gibt es so etwas?

    Bin fr alle Anregungen wie immer sehr dankbar

    Gru

    Harry
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist lter als 90 Tage. Die darin enthaltenen Informationen sind mglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Gromeister(in)
    Registriert seit
    27.09.2005
    Beitrge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    was ?

    rck mal deinen ganzen css code rber !

    und am besten auch den html teil oder zumindest n teil damit man sich vorstellen kann was du erreichen willst
    lieber mal hier http://de.selfhtml.org nachgucken

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    15.09.2005
    Beitrge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo
    danke das du dich mit meinem Problem beschftigen willst
    komme leider gerade nicht an meinen Code ran.
    Die Seite erstelle ich mit Typo3 deswegen wrde der html Code denke ich nicht viel bringen.

    Noch mal ganz kurz.

    Ich mchte fr bestimmt Farben einen Platzhalter einsetzen z.B Farbe1
    ich mchte festlegen das Farbe1 in meinem Fall Farbe - #eeff33 ist.

    Also erscheint berall dort wo ich den Platzhalter "Farbe1" eingesetzt habe die oben genannt farbe.

    Wenn ich nun die Farbe in meinem Platzhalter in farbe #1166ee ndere soll natrlich berall wo mein Platzhalter "Farbe1" eingesetzt ist nun die neu Farbe angezeigt werde.

    In Programmiersprachen nennt man das glaube ich auch variablen festlegen.

    Wenn ich wieder auf meinen CSS code zugreifen kann und mein Problem immer noch nicht gelst ist poste ich den Code noch.

    Die Variante die Farbe durch Strg+F zu ersetzen ist mir auch schon in den Sinn gekommen finde ich aber eigentlich nicht sehr komfortabel.

    Wie gesagt bin fr jede Hilfe dankbar

    Gru
    Harry

  4. #4
    Gromeister(in)
    Registriert seit
    27.09.2005
    Beitrge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    du kannst doch einfach ne klasse erstellen die das was du willst beinhaltet und die berall wo du willst einfgen
    lieber mal hier http://de.selfhtml.org nachgucken

  5. #5
    Gast

    Standard

    Klar, aber wenn ich in allen Klassen die Farben bestimme ist es doch sehr aufwendig diese nachher zu ndern.
    Nehmen wir an ich habe ein Layout mit den Farben Blau und Gelb.
    Blau ist die berschrift, der Rahmen der 1.Navigation, der Text in der 2.Navigation, der Unterstrich beim Mausover effekt der links, die Schriftfarbe beim Highlighten der 1.Navigation, die Schriftfarbe der Fusszeile ..... bla bla bla
    Gelb ist die Schriftfarbe der 1.Navigation, der Hintergrund der Contenttabelle, der Rahmen der Tabelle in der 2.Navigation....usw.
    Du siehst das die Farben doch in vielen kleinen Elementen festgelegt werden mssen.
    Wenn ich mir jetzt berlege das mein Farblayout nicht mehr Blau - Gelb ist sonder Grn - Rot sein soll muss ich ja alle Element suchen in denen die Farbe Blau eingetragen ist sie mit der Farbe Grn austauschen.
    Es wre doch viel einfacher wenn ich an einer bestimmten stelle definiere, dass 1 = Blau und 2=Gelb ist, dann kann ich bei einem Farbwechsel einfach die Definition in 1=Grn und 2=Rot ist.
    Ich hoffe das ist jetzt verstndlich.
    Gru
    Mario

  6. #6
    Gromeister(in)
    Registriert seit
    27.09.2005
    Beitrge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    du scheinst das prinzip nicht verstanden zu haben du weist doch wie man style sheets zentran definiert oder ?
    also im head :
    Code:
    <head>
    <style type="text/css">
    rot.&#123;background-color&#58;red;&#125;
    blau.&#123;background-color&#58;blue;&#125;</style>
    </head>
    
    <body>
    
    <div class="rot">rotes div </div>
    <div class="blau">blaues div </div>
    wertvolle lektre ber css und html http://de.selfhtml.org
    lieber mal hier http://de.selfhtml.org nachgucken

  7. #7
    Gast

    Standard

    Hi,
    ich poste hier mal eine alte css von mir.
    wie gesagt ne alte css, mitlerweile sind sie einwenig aufgerumter und strukturierter.
    Code:
    div &#123;
    	font-family&#58; Geneva, Arial, Helvetica, sans-serif;
    	color&#58; #000000;
    	font-size&#58; 11px;
    	background-repeat&#58; no-repeat;
    &#125;
    
    /* Standardlinks */
     a&#58;link &#123; color&#58;#000000; text-decoration&#58;none; &#125;
     a&#58;visited &#123; color&#58;#000000; text-decoration&#58;none; &#125;
     a&#58;hover &#123; color&#58;#777777; &#125;
     a&#58;active &#123; color&#58;#FF0000; &#125;
    
    /* Links ebene 1 */
    
    a.e1&#58;link, a.e1&#58;visited, a.e1&#58;active &#123;
    	color&#58; #000000;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-right&#58; 10px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-right&#58; 1px;
    	border-left&#58; 1px;
    &#125;
    
    a.e1&#58;hover &#123;
    	color&#58; #40403A;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-right&#58; 10px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-right&#58; 1px;
    	border-left&#58; 1px;
    &#125;
    
    .e1_hl &#123;
    	color&#58; #000000;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-right&#58; 10px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-bottom&#58; 1px solid #ffffff;
    	
    	
    &#125;
     
     
     /*  links ebene 2  */
     
     a.e2&#58;link, a.e2&#58;visited, a.e2&#58;active &#123;
    	color&#58; #000000;
    	background-color&#58; #FFCB11;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFCB11;
    	border-right&#58; 1px solid #FFCB11;
    	border-left&#58; 1px solid #FFCB11;
    &#125;
    
    a.e2&#58;hover &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFB504;
    	border-right&#58; 1px solid #FFB504;
    	border-left&#58; 1px solid #FFB504;
    &#125;
    
    .e2_hl &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFFFFF;
    	border-right&#58; 1px solid #FFFFFF;
    	border-left&#58; 1px solid #FFFFFF;
    &#125;
    
    
    
     a.e2left&#58;link, a.e2left&#58;visited, a.e2left&#58;active &#123;
    	color&#58; #000000;
    	background-color&#58; #FFCB11;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFCB11;
    	border-right&#58; 1px solid #FFCB11;
    	border-left&#58; 1px solid #FFCB11;
    
    &#125;
    a.e2left&#58;hover &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFB504;
    	border-right&#58; 1px solid #FFB504;
    &#125;
    .e2left_hl &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 4px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-top&#58; 1px solid #FFFFFF;
    	border-right&#58; 1px solid #FFFFFF;
    &#125;
    
      
    div.e2 &#123;
    	background-color&#58; #FFC910;
    	border&#58; 1px solid #FFFFFF;
    &#125;
    
    
    /*  links ebene 3  */
    
    div.e3 &#123;
    
    	
    &#125;
    
    a.e3&#58;link, a.e3&#58;visited, a.e3&#58;active &#123;
    	color&#58; #000000;
    	background-color&#58; #FFFFCC;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 2px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 2px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	
    &#125;
    
    a.e3&#58;hover &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 2px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 2px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    
    	
    &#125;
     
    
    .e3_hl &#123;
    	color&#58; #40403A;
    	background-color&#58; #FFB504;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 2px;
    	padding-right&#58; 10px;
    	padding-bottom&#58; 2px;
    	padding-left&#58; 10px;
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    
    	
    &#125;
    td.e3&#123;
    	color&#58; #40403A;
    	background-color&#58; #FEE781;
    	display&#58; block;
    	font-weight&#58; normal;
    	padding-top&#58; 2px;
    	
    	padding-bottom&#58; 2px;
    	
    	text-align&#58; center;
    	text-decoration&#58; none;
    	font-size&#58; 11px;
    	border-right&#58; 1px solid #FFB504;
    	border-left&#58; 1px solid #FFB504;
    &#125;
    /* texfeld*/
    
    div.tf1 &#123;
    	background-image&#58; url&#40;../bilder/textfeld.jpg&#41;;
    	
    &#125;
    td.tf1 &#123;
    	color&#58; #333333;
    	padding-top&#58; 20px;
    	padding-right&#58; 30px;
    	padding-bottom&#58; 4px;
    	padding-left&#58; 25px;
    	font-size&#58; 11px;
    	
    	
    &#125;
    
    /* aktuelles */
    td.nle1 &#123;
    	padding-top&#58; 2px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 2px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    &#125;
    
    td.nle2 &#123;
    	padding-top&#58; 4px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 10px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    &#125;
    td.nle3 &#123;
    	
    	padding-right&#58;10px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    	background-color&#58; #777777;
    &#125;
    td.nle4 &#123;
    	padding-top&#58; 3px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 0px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    &#125;
    	
    a.nle2&#58;hover &#123;
    	color&#58; #B48003;
    	text-decoration&#58; none;
    	
    &#125;
    
    /* shortcut */
    td.she1 &#123;
    	padding-top&#58; 2px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 2px;
    	padding-left&#58; 10px;
    	vertical-align&#58; middle;
    	font-weight&#58; bold;
    	text-align&#58; center;
    	color&#58; #FFFFCC;
    	background-color&#58; #FFB504;
    
    
    
    
    
    &#125;
    
    td.she2oben &#123;
    	padding-top&#58; 3px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 3px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    &#125;
    
    td.she2 &#123;
    	padding-top&#58; 3px;
    	padding-right&#58;10px;
    	padding-bottom&#58; 3px;
    	padding-left&#58; 10px;
    	vertical-align&#58; top;
    	border-top&#58; 1px dotted #FFB504;
    
    &#125;
    	
    a.she2&#58;hover &#123;
    	color&#58; #FFB504;
    	text-decoration&#58; none;
    	
    &#125;
    
    
    /* Zusatzoptionen */
    
    .dick-rot &#123;
    	font-size&#58; large;
    	color&#58; #FF0000;
    &#125;
    .beispiel &#123;
    	font-size&#58; 9px;
    &#125;
    .klein-grau &#123;
    	font-size&#58; 10px;
    	color&#58; #666666;
    &#125;
    
    .klein-grau-rechts &#123;
    	font-size&#58; 10px;
    	color&#58; #666666;
    	text-align&#58; right;
    
    &#125;
    
    
    /* tabellen*/
    
    .tdkopf &#123;
    	font-size&#58; 12px;
    	font-weight&#58; bold;
    &#125;
    
    .tde2 &#123;
    	font-weight&#58; bold;
    	padding-left&#58; 10px;
    	padding-top&#58; 5px;
    	padding-bottom&#58; 2px;
    	padding-right&#58; 20px;
    &#125;
    
    .tde3 &#123;
    	padding-left&#58; 10px;
    	padding-top&#58; 5px;
    	padding-bottom&#58; 2px;
    	padding-right&#58; 20px;
    &#125;
    
    .tde4 &#123;
    	padding-top&#58; 2px;
    	padding-bottom&#58; 2px;
    	padding-right&#58; 20px;
    	vertical-align&#58; bottom;
    &#125;
    
    
    
    /* Tabellenoption	 */
    table &#123;
        font-family&#58; Geneva, Arial, Helvetica, sans-serif;
    	color&#58; #000000;
    	font-size&#58; 11px;
    	&#125;
    
    .hintergrund &#123;
    	background-repeat&#58; no-repeat;
    &#125;
    
    .mittel-grau &#123;
    	font-size&#58; 10px;
    	color&#58; #333333;
    
    &#125;
    
    .gross-schwarz &#123;
    	font-size&#58; 13px;
    	font-weight&#58; bold;
    &#125;
    
    .zeile &#123;
    	line-height&#58; 19px;
    &#125;
    
    .formular &#123;
    	border&#58; thick none;
    	padding&#58; 2px;
    &#125;
    
    
    .off &#123;
    	background&#58; #FFFFFF;
    	border&#58; 1px solid #acabaa;
    &#125;
    
    
    .on &#123;
    	color&#58;777777;
    	background&#58; #FFCC00;
    	border&#58; 1px solid #acabaa;
    &#125;
    .tabellemiite &#123;
    	vertical-align&#58; middle;
    &#125;
    
    .strasse &#123;
    	font-size&#58; 10px;
    	display&#58; block;
    	font-weight&#58; bold;
    	background-color&#58; #FFFFCC;
    	padding-right&#58; 3px;
    	padding-left&#58; 3px;
    	border&#58; 1px solid #dddddd;
    &#125;
    
    .feld &#123;
    	font-size&#58; 11px;
    	background-color&#58; #FFFFCC;
    	padding-left&#58; 10px;
    	padding-top&#58; 1px;
    	padding-bottom&#58; 1px;
    	border&#58; 1px solid #777777;
    &#125;
    
    /* Potthoff CSS	 */
    
    .ph1 &#123;
    	font-size&#58; 17px;
    	padding-top&#58; 1px;
    	padding-bottom&#58; 1px;
    	font-weight&#58; bold;
    	text-align&#58; center;
    
    
    &#125;	
    
    .ph2 &#123;
    	font-size&#58; 11px;
    	padding-top&#58; 1px;
    	padding-bottom&#58; 1px;
    	padding-left&#58; 7px;
    	font-weight&#58; bold;
    
    &#125;	
    
    .ph3 &#123;
    	font-size&#58; 11px;
    	padding-top&#58; 1px;
    	padding-bottom&#58; 1px;
    	padding-left&#58; 15px;
    &#125;
    langes teil ich wei warscheinlich auch nicht ganz so wie es ein Profie macht aber stell diir mal vor ich will jetzt die Farbe #FFCB11 in #EE22AC ndern. Was mach ich dann?

  8. #8
    Meister(in)
    Registriert seit
    20.10.2005
    Beitrge
    460
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    wre es nicht einfacher irgendwie die ganze seite mit dem php befehl
    Code:
    $quelltext = ereg_replace&#40;"Farbe1","#eeff33,$quelltext&#41;;
    echo ($quelltext)
    zu durchsuchen und dann Farbe1 durch #eeff33 ersetzen?
    Weiss nich obs get, nur so ne spontane eingebung, glaube aber das das schwer umzusetzen wre mit Typo3..
    mfG Sleeme


  9. #9
    Gromeister(in)
    Registriert seit
    25.07.2005
    Beitrge
    638
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also im Prinzip ein einfaches suche-ersetze ...
    Dieser Beitrag wurde maschinell erstellt und ist auch ohne Unterschrift gltig!
    Satellitenbilder und Luftaufnahmen weltweit
    Ausflugsziele und Freizeit-Tipps aus Rheinland-Pfalz


  10. #10
    Gast

    Standard

    hi
    meine css dateien fr typo3 sehen auch ein wenig anders aus. wie gesagt ist eine ziemlich alte css datei.
    php ist leider garnicht mein ding.
    Wie oben beschrieben ist mein suchen und ersetzen Befehl Strg+F finde ich aber nicht besoders kofortabel. deswegen bin ich ja auf der suche nach ner einfacheren variante. strg+f ist zwar gut und schn nervt aber nach ner weile wenn man viel ausprobieren will.

hnliche Themen

  1. TS2 Channel zu vergeben
    Von SIS im Forum Sponsor gesucht !
    Antworten: 5
    Letzter Beitrag: 07.12.2007, 16:44
  2. Wir vergeben kostenlose TS Server!
    Von CodlDeath im Forum Sponsor gesucht !
    Antworten: 4
    Letzter Beitrag: 13.07.2007, 14:03
  3. Wir vergeben TS2 u. GS
    Von Gameserver-Sponsor im Forum Sponsor gesucht !
    Antworten: 4
    Letzter Beitrag: 13.04.2007, 20:34
  4. Refs in HTML vergeben
    Von ansi-c.com im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2006, 01:14
  5. Anker in PHP vergeben
    Von ansi-c.com im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 26.03.2006, 20:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhnge hochladen: Nein
  • Beitrge bearbeiten: Nein
  •