Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.07.2009 um 00:31 (UTC)    
Titel: Design RED / Alle Klassen
Antworten mit Zitat
Übersicht der "Klassen" im Design RED:



Die Größen im Design RED :

Header-Größe : 1000 x 178 Pixel
Rechte Boxen : 5 Stück
Breite Navigation: 179 Pixel
Textfeld-Breite : 480 Pixel
Breite Boxen : 195 Pixel
Breite Design : 955 Pixel

-----------------------------------------------------------------------------------------------------------------------------------------


Gewünschte Klassen mit den CSS-Anweisungen im Feld "Text über Design" einfügen.
Wie hier im Beispiel mit dem style-tag vorweg ,
dann folgen die gewünschten Klassen , mit gewünschten Anweisungen :

BEISPIEL für mehrere Klassen anpassen :
Zitat:

<style type="text/css">
<!--
td.Klassenname {
Hier CSS-Anweisung ;
Hier CSS-Anweisung; }

td.Klassenname {
Hier CSS-Anweisung ;
Hier CSS-Anweisung;
und noch eine CSS-Anweisung ; }

td.Klassenname {
Hier CSS Anweisung ;
Hier evt. noch eine CSS-Anweisung; }

-->
</style>


------------------------------------------------------------------------------------------------------------------------------------------

Ein Element unsichtbar machen:
Zitat:
td.Hier die Klasse { visibility:hidden; }


------------------------------------------------------------------------------------------------------------------------------------------

Grafik austauschen in einem Feld :
Zitat:
td.Hier die Klasse {
background-image:url(http://hier Eure Bild-URL);
background-color:#XXXXXX;}


------------------------------------------------------------------------------------------------------------------------------------------

Farbe ändern in einem Feld :
Zitat:
td.Hier die Klasse {
background-image:url();
background-color:#XXXXXX; }


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Beispiele für CSS-Anweisungen :

Wir können zum Beispiel jeder Klasse anweisen :

- die Textgröße : mit font-size: 13px;
- die Textfarbe : mit color: #000000;
- die Schriftart : mit font-family: arial;
- die Textausrichtung : mit text-align: left;
- die Fettschrift : mit font-weight:bold
- die Hintergrundfarbe : mit background-color: #F2F2F2;
- oder ein Hintergrundbild : mit background-image: url(Bild-URL);
- Hintergrundbild nicht wiederholen : mit background-repat: no-repat;

Hinweis :
Wenn wir eine Hintergrundfarbe einfügen möchten , müssen wir
das Original-Hintergrundbild ausblenden . Da bei background-image:url();
die Klammer leer bleibt , wird kein Bild angezeigt , stattdessen unsere
Wunschfarbe die wir mit background-color angewiesen haben .

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Neu : Der Design-Generator
Ohne CSS-Kentnisse das Design anpassen . Banner anklicken :



--------------------------------------------------------------------------------------------------------------------------------------------------


Fragen zum Design RED anpassen ?
Bitte Fragen in der Foren-Rubrik "CSS" stellen
HIER : http://www.homepage-baukasten.de/forum/viewforum.php?f=20
Bitte gebt im Titel immer eurer Design mit an Wink


Gruß Wolfgang
______________


Zuletzt bearbeitet von iceblue-test am 29.08.2009, 05:08, insgesamt 10-mal bearbeitet
↑
Beitrag05.08.2009 um 02:41 (UTC)    
Titel: Design RED : Alle Klassen im Design / Beispielcode
Antworten mit Zitat
Kompletter Beispiel-Code / Design RED :


Diese Klassen befinden sich im Design RED :
Alle Hintergrundgrafiken in diesen Klassen lassen sich durch
Wunschfarbe oder eigene Grafik ersetzen . Ihr dürft diesen
Beispiel-Code also nach belieben anpassen und frei verwenden Very Happy

Zitat:

<style type="text/css">
<!--

/* Header über Design */
td.edit_header {
background-color:#XXXXXX;
background-image:url(Bild-URL);}

/* Titel im Header entfernt mit : */
td.Stil3 {
display:none; }

/* roter Hintergrund links vom Design */
td.edit_links_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL);}

/*Hintergrund hinter Navi,Textfeld,rechte Box / 955 Pixel breit */
td.edit_main_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL);}

/* roter Streifen Design-Rahmen linke Seite */
td.edit_page_main_top {
background-color: #XXXXXX;
background-image:url(); }

/* grauer Hintergrund hinter Navigation / Breite 206 Pixel */
td.edit_page_main_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Streifen über Titel Navigation / Höhe 10 Pixel */
td.edit_links_bg_unten {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* roter Streifen über Titel Navigation / 202 x 4 Pixel */
td.edit_navi_top {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* rote Hintergrund hinter Navi-Buttons / Breite 202 Pixel */
td.edit_navi_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Hintergrund Navi-Titel / 202 x 23 Pixel */
td.edit_navhead {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* rote Streifen unter Navi-Titel / Höhe 4 Pixel */
td.edit_nav_klein {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Navi-Buttons / 202 x 28 Pixel */
td.edit_button_bg {
background-color: #XXXXXX;
background-image:url(Button-URL); }

/* Link im Navi-Button */
td.rednav {
color: #000000;
font-size: 13px;
font-family: arial;
text-decoration: none; }

/* rote Streifen unter Navi-Buttons / 202 x 4 Pixel */
td.nav_mini {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Streifen links der Navigation / Breite 4 Pixel */
td.edit_links_navi_left_spacer {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Hintergrund hinter Navigation / grau / Breite 202 Pixel */
td.edit_links_navi_container {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Hintergrund hinter Textfeld */
td.edit_page_main2 {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Streifen über Textfeld / 522 x 11 Pixel */
td.content_over {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Feld hinter Textfeld */
td.edit_content_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Rote Balken im Textfeld / Höhe 37 Pixel */
td.edit_content_header {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Titel über Textfeld (Schrift) */
td.Stil2 {
font-size: 12px;
font-familiy: arial;
color: #FFFFFF;}

/* Textfeld / Breite 510 Pixel */
td.cont {
color: #000000;
font-size: 13px;
font-family:arial;
text-align:left;
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Textfeld / weiße Balken unten im Textfeldbereich / 522 x 55 Pixel */
td.cont_bottom {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Hintergrund hinter rechten Boxen / Breite 221 */
td.edit_zeile {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* grauer Hintergrund hinter rechten Boxen / Breite 221 */
td.edit_zeile2 {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* roter Hintergrund hinter rechten Boxen / Breite 221 */
td.edit_zeile3 {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* dunkle Streifen über Titel rechte Box / Höhe 16 Pixel */
td.rb_over {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Hintergrund Titel rechte Box / 217 x 23 Pixel */
td.edit_rechts_header {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* weißer Hintergrund Rechte Box / Breite 217 Pixel */
td.edit_rechts_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Rechte Box / Rahmen oben / weiß-rot / 217 x 23 Pixel */
td.edit_rechts_header2 {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Rechte Box / Rahmen unten / weiß-rot / 217 x 19 Pixel */
td.rb_footer {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* roter Streifen unter rechter Box / 220 x 4 Pixel */
td.rb_bottom {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Feld unter rechter Box / Höhe 58 Pixel */
td.rb_bottom2 {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* weißer Rechter Aussenrand des Designs / Breite 3 Pixel */
td.rb_right_mini {
background-color: #XXXXXX;
background-image:url(Bild-URL); }


/* roter Hintergrund / rechts vom Design / 400 x 22 Pixel */
td.edit_rechts_bg_unten {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

/* Aussenrand unten vom Design / rot-weiß / 1000 x 25 Pixel */
td.edit_bottom_bg {
background-color: #XXXXXX;
background-image:url(Bild-URL); }

-->
</style>




Neu : Der Design-Generator
Ohne CSS-Kentnisse das Design anpassen . Banner anklicken :



--------------------------------------------------------------------------------------------------------------------------------------------------



Gruß Wolfgang
______________


Zuletzt bearbeitet von 24939 am 29.08.2009, 01:07, insgesamt 6-mal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.