Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.07.2009 um 01:56 (UTC)    
Titel: Design Butterfly / Alle Klassen

Die "Klassen" im Design Butterfly

Kurze Einleitung:
Die Baukasten-Designs wurden mit Hilfe von Tabellen erstellt .
Diese Tabellen und Tabellenspalten haben im Quellcode "Namen" bekommen.
Das wären die Klassen im Design. Mit Hilfer dieser
Klassen und CSS-Anweisungen können wir die Felder im Design anpassen.
Und zwar (bis jetzt) bei den Designs : RED / BUTTERFLY / ICEBLUE

Hier mal die Übersicht der "Klassen" im Design Butterfly :



Die Maße im Design :
Header-Größe : 1000 x 158 Pixel
Breite der Navi : 234 Pixel
Breite Textfeld : 510 Pixel
Breite rechte Box: 180 Pixel
Breite Design : 1000 Pixel


Die CSS-Anweisungen:
- kommen in das Feld "Text über Design"
- beginnen am Anfang mit dem style-tag
- Ihr könnt beliebig viele Klassen anpassen
- jede Klasse kann beliebig viele Anweisungen bekommen
- nach der letzten Klasse (mit Anweisungen) wird der style-tag mit </style> geschlossen


Beispiel für das Einfügen mehrerer Klassen :

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 anpassen ?
Bitte Fragen die das Anpassen eines Designs betrifft 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



Gruss Wolle
______________


Zuletzt bearbeitet von iceblue-test am 29.08.2009, 02:19, insgesamt 8-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


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