Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj03.07.2009, 14:18 (UTC)    
Mesaj konusu: Bunu Çevirebilecek

Baukasten-Design "CSS" :
Hier möchte ich Euch in wenigen Schritten erklären,
wie Ihr das Baukasten-Design "CSS" frei gestalten könnt.

Diese Beschreibung ist nur eine von vielen Möglichkeiten !

- einloggen in die Homepage
- auf "Design einstellen"
- wählt dort das Design "CSS" aus
- Eure Seiten-Inhalte werden übernommen
- Inhalt Eurer "rechten Boxen" werden nicht übernommen
- diesen müsstet Ihr Euch kopieren und im neuen Design einfügen


Schritt 1 : entfernen unnötiger Klassen
Wir entfernen zunächst all die Klassen, die wir nicht benötigen:

- auf "Design einstellen"
- auf "Erweiterte Einstellungen"
- ganz unten das Feld "css ohne style-tags"

- ohne "style-tags" heisst:
- kein <style type="text/css"> vor dem CSS-Code
- kein </style> am Ende des CSS-Codes

- füge das Feld "css ohne style-tags" ein :

#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}

Mit #Hier die Klasse {display: none;} entfernen wir Klassen.


Schritt 2 : Linkformatierung
Du kannst mit dieser CSS-Anweisung für alle verlinkten Texte auf Deiner Homepage die Größe und Farbe bestimmen.

- füge ein im Feld "css ohne style-tags"
- zwischen vorigem Code und diesem Code füge eine Leerzeile ein
- das erleichtert Dir zwischen allen Codes die Übersicht


a{ color:#4A9AF6; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:active { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:visited { color: #4A9AF6; font-size: 13px; text-decoration: none;}

Erklärung:

a = Link
a:hover = wenn die Maus auf den Link fährt
a:link = noch nicht besuchter Link
a:active = gerade angeklickter Link
a:visited = bereits besuchte Seiten

Du kannst gewünschte Farben und Größen im Code ändern / anpassen.


Schritt 3 : Der Hintergrund

- zwischen diesem und vorigem Code eine Leerzeile einfügen
- es erleichtert Dir die Übersicht
- füge ein im Feld "css ohne style-tags"

body { background-color:#000000;} *{ padding: 0; margin: 0; } #Mein_Bild { margin: 0 auto; width: 980px; height:500px; background-image:url(HIER DEINE BILD-URL);}

Erklärung:

background-color:#000000; = Hintergrundfarbe (hier schwarz)

#Mein_Bild = hier fügst Du Dein Hintergrundbild ein
Bei background-image:url(HIER Bild-URL); die Bild-Adresse einfügen.

Das Hintergrundbild sollte ca. 980 x 500 Pixel gross sein
Für dieses Beispiel muss das Design selbst nicht gescrollt werden.
Scrollbar sind alle Felder auf dem Design-Bild.

WICHTIG :

Die Klasse #Mein_Bild haben wir erfunden
Wenn wir Klassen erstellen, die nicht im Baukasten vorkommen, können wir sie erst sehen, wenn wir im Feld "Text über Design" einfügen:
<div id="Hier Klassen-Name"> </div>


In das Feld Text über Design" füge noch ein:

<div id="Mein_Bild"></div>

Dieses muss im Feld ganz oben eingefügt werden.
Das Feld "Text über Design" muss mit dem Code beginnen !
Nun kannst Du das Bild für Dein Design sehen.



Schritt 4 : Header (oben) platzieren
Im Design "CSS" hat der Header die Klasse #header_container.

Wer keinen Header benötigt:
fügt nur ein : #header_container{display:none;}

- Du möchtest das Header-Feld oben ?
- einfügen im Feld "css ohne style-tags"


#header_container { position: absolute; left: 50%; margin-left:-490px; width: 980px; height:70px; background-color:#343434; background-image:url(); color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;}

Erklärung:

- margin-left: = Abstand des Headers vom linken Rand
- width: = Breite des Headers
- height: = Höhe des Headers
- background-color = Hintergrundfarbe Header
- background-image:url(); = Hintergrundbild (URL) in Klammer einfügen
- wenn Du ein Bild einfügen möchtest, gleiche Breite wie der Header hat !
- color:#000000; = Textfarbe im Header, wenn Text hinein soll
- font-size:13px; = Textgrösse
- border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe


Schritt 5 : Textfeld platzieren
Im Design "CSS" hat das Textfeld die Klasse #content.

- füge ein im Feld "css ohne style-tags"


#content { position: absolute; left: 50%; top: 140px; margin-left:-320px; width: 590px; height: 380px; padding:10px; color: #F2F2F2; font-size:13px; background-color:#343434; background-image:url(); border: 1px solid #FFFFFF; overflow:auto;}

Erklärung:

- top: = Abstand Textfeld von oben
- margin-left: = Abstand Textfeld vom linken Bildschirmrand
- padding:10px; = Inhalt 10 Pixel Abstand zu Seitenrändern
- width: = Breite des Textfelds
- height: = Höhe des Textfelds
- background-color = Hintergrundfarbe Textfeld
- background-image:url(); = Hintergrundbild (URL) in Klammer einfügen
- wenn Du ein Bild einfügen möchtest, gleiche Breite wie das Textfeld hat !
- color:#000000; = Textfarbe im Textfeld
- font-size:13px; = Textgrösse
- border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe
- overflow:auto;} = erzeugt ein scrollbares Textfeld

Bei background-color: kannst Du statt Farbe auch transparent einfügen,
damit das Hintergrundbild zu sehen ist !


Schritt 6 : Einfügen der "rechten Box"
Im Design "CSS" hat die "Box" die Klasse #sidebar_container.


Wer keine rechte Box benötigt:
fügt nur ein : #sidebar_container{display:none;}

- Du möchtest die rechte Box einfügen ?
- füge ein im Feld "css ohne style-tags"

#sidebar_container{ position: absolute; left: 50%; top:140px; margin-left: 300px; width: 190px; height: 400px; background-color:#343434; background-image:url; border:1px solid #FFFFFF; color:#000000; overflow:auto;}

Erklärung:

- top: = Abstand der Box von oben
- margin-left: = Abstand Box vom linken Rand
- width: = Breite der Box
- height: = Höhe der Box
- background-color = Hintergrundfarbe Box
- background-image:url(); = Hintergrundbild (URL) in Klammer einfügen
- wenn Du ein Bild einfügst, gleiche Breite wie Deine Box bekommt
- color:#000000; = Textfarbe in der Box
- font-size:13px; = Textgrösse in rechter Box
- border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe
- overflow:auto;} = erzeugt ein scrollbares Feld

Bei background-color: kannst Du statt Farbe auch transparent einfügen,
damit das Hintergrundbild zu sehen ist !


Schritt 7 : Die Navigation
Im Design "CSS" hat die "Navi" die Klasse #nav_container
die Navi-Buttons die Klasse li.nav_element a
der "Hover-Effekt" die Klasse li.nav_element a:hover

- füge ein im Feld "css ohne style-tags"

#nav_container{ position: absolute; left: 50%; top:140px; margin-left: -490px; width: 160px; height:400px; border:1px solid #FFFFFF; overflow:auto;} ul#nav{ width: 130px; padding: 0px; margin: 0px;} li.nav_element{ list-style-type: none; position: relative; padding:5px; width: 115px;} li.nav_element a{ display: block; width: 115px; padding:4px; font-weight: bold; text-decoration: none; text-align: left; color:#F2F2F2; background-color:#343434; background-image:url(HIER BUTTON-URL_1); border: 2px solid #000000;} li.nav_element a:hover{ color: #000000; background-color:#C9C9C9; background-image:url(HIER BUTTON-URL_2);}

Das Navi-Feld #nav_container platzierst Du
mit den Werten top und margin-left

Das overflow:auto; erzeugt eine scrollbare Navi ab 400 Pixel höhe.
Wenn NICHT gewünscht, bei #nav_container löschen:
- height:400px;
- overflow:auto;


Die "Navi-Buttons" kannst Du anpassen bei:

- #li.nav_element a
- und bei #li.nav_element a:hover
- hover = Wenn die Maus über einen Button fährt
- Eigene Button einfügen bei "background-image:url(HIER Button-URL);"

Wenn Deine "Navi-Buttons" breiter sollen,
dann bitte das width (Breite) auch ändern bei :

- #nav_container
- ul#nav
- li.nav_element
- li.nav_element a



Schritt 8 : Der Besucherzähler
Im Design "CSS" hat der Besucherzähler die Klasse #counter.

Um den Counter sehen zu können, bei "Extras editieren" den Counter aktivieren. Wähle dort bitte aus : "Hits NICHT anzeigen"

Beachte bitte:
Wenn Du im Extra "Counter" längeren Text vor und nach dem Zähler einfügst, musst du hier im Code das width (Breite) eventuell erhöhen, damit der ganze Text in 1 Zeile passt.

- zwischen diesem und vorigem Code eine Leerzeile einfügen
- es erleichtert Dir die Übersicht
- füge ein im Feld "css ohne style-tags"

#counter { position: absolute; left: 50%; top:30px; margin-left: 300px; width: 150px; height:20px; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;}

Erklärung:

- top: = Abstand Counter von oben
- margin-left: = Abstand des Counters vom linken Rand
- width: = Breite des Counters
- height: = Höhe des Counters
- background-color = Hintergrundfarbe Counter
- color:#FFFFFF; = Textfarbe des Counters (weiss)
- font-size:13px; = Textgrösse
- border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe
Mesaj03.07.2009, 14:25 (UTC)    
Mesaj konusu:

Google translate den çevirebilirsiniz..

Almanca-> Türkçe Wink
______________
BİR BEDAVA-SİTEM KLASİĞİ... MİSTANBUL.TR.GG.
Mesaj03.07.2009, 19:03 (UTC)    
Mesaj konusu:

Siteyi Çevirmeyi Denedim Almanca Wink
Mesaj04.07.2009, 09:00 (UTC)    
Mesaj konusu:

Modüler Tasarım "CSS":
Burada birkaç adım anlatmak isterseniz,
sizin modüler tasarım "CSS" can serbestçe gibi.

Bu açıklama sadece bir imkanı biridir!

- Siteye giriş yapın
- "Tasarım ayarlamak için
- Sonra Tasarımı "CSS" seçim
- Sayfanızın içeriğini transfer olacak
Sizin "doğru kutuları" nin - İçeriği kabul edilmez
- Müsstet bir kopyasını ve yeni tasarım yapıştırmak


1. Adım: gereksiz sınıflar Kaldır
İlk olarak tüm sınıflar bu gerekmez kaldırabilir olacaktır:

- "Tasarım ayarlamak için
- "Gelişmiş Ayarlar"
- Alt kutunun "herhangi bir CSS stil etiketleri olmadan"

- Hayır "style-tags" anlamına gelir:
- Hayır <style CSS kodu type="text/css"> önce
- Hayır </ stil CSS kodlarının sonuna> 'i

- "Bir CSS stil etiketleri" olmayan bir alan ekle:

# ExtraDiv1 (display: none;) # extraDiv2 (display: none;) # extraDiv3 (display: none;) # extraDiv4 (display: none;) # extraDiv5 (display: none;) # extraDiv6 (display: none;) # pre_header (display: none;) # post_header (display: none;) # pre_content (display: none;) # nav_heading (display: none;) div.header (display: none;) h1 # başlık (display: none;) h2 # başlık aralığı (display: none;)

Ile # İşte sınıf (display: none;) biz sınıf kaldırın.


2. Adım: biçimlendirme Bağlantı
Uzak web sitenize boyutunu ve rengini tüm bağlantılı yazılarda bu CSS beyanı ile alabilirsiniz.

- "CSS stil etiketleri olmadan" bir alan ekle
Son kodu ve bu kodu - arasında boş bir ekleme
- Sen daha kolay tüm kodları arasında Genel bunu yapma


a (color: # 4A9AF6; text-decoration: none; font-size: 13px;) a: sallanmak (color: # 4A9AF6; font-size: 13px; text-decoration: none;) a: bağlantı (color: # 4A9AF6 ; font-size: 13px; text-decoration: none;) a: etkin (color: # 4A9AF6; font-size: 13px; text-decoration: none;) a: (renkli ziyaret: # 4A9AF6; font-size: 13px ; text-decoration: none;)

Açıklama:

a = Bağlantı
a: = Eğer bağlantıyı fare duraksamak gidiyor
a: link = bağlantı henüz ziyaret
a: Etkin = sadece linkini tıkladıysanız
a: ziyaret = önce ziyaret sayfaları

Sen kodunu değiştirmek de renkleri ve boyutları olabilir / uyum.


3. Adım: arka plan

Bu ve son kodu - arasında boş bir satır eklemek için
- Bu bakış size yardımcı olur
- "CSS stil etiketleri olmadan" bir alan ekle

vücut (background-color: # 000000;) * (padding: 0; margin: 0Wink # Mein_Bild (margin: 0 otomatik; width: 980px; height: 500px; background-image: () burada GÖRÜNTÜ URL url; )

Açıklama:

background-color: # 000000; = arka plan rengi (burada siyah)

# = Mein_Bild burada kendi arka plan görüntüsü eklemek
Arka plan için resim: (resim URL'si BURAYA) url; resim adresi eklemek için kullanılır.

Arka plan görüntü boyutu yaklaşık 980 x 500 piksel olmalıdır
Bu örnek için, tasarım scrolled olamaz.
Tasarım görüntü üzerinde kaydırma tüm alanları doldurun.

ÖNEMLİ:

Sınıf # Mein_Bild biz icat var
Bir modüler, sadece biz alanına "metin tasarımı" eklemek: görebilirsiniz oluşmaz yapmak sınıfları oluşturmak
<div id="Hier Klassen-Name"> </ p>


Tasarım üzerindeki metin kutusuna "başka bir ekleyin:

<div id="Mein_Bild"> </ p>

Bu alan üstündeki takılı olması gerekir.
Alanında "metin tasarımı" kodu ile başlamalıdır!
Artık, tasarım görüldü resim kullanabilirsiniz.



4. Adım: başlık () üst sırada
Tasarım "olarak CSS", the # başlık sınıf header_container.

Eğer başlıklar gerek yoktur:
tek: # header_container ekler (display: none;)

- Sen üstündeki başlık kutusu istiyor musunuz?
- Takın alanına "CSS stil etiketleri olmadan"


# Header_container (konum: mutlak; Sol:% 50; margin-left:-490px; width: 980px; height: 70px; background-color: # 343434; background-image: url (); color: # FFFFFF; font-size : 13px; border: 1px solid # FFFFFF;)

Açıklama:

- Marj-left: sol kenarından başlığının = mesafe
- Genişlik: başlığının = genişlik
- Yükseklik: başlığının = yükseklik
Başlığı - Arka Plan-color = arka plan rengi
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
If you want - resim eklemek için, aynı genişlik olarak başlık var!
- Renk: # 000000; başlığında = Metin rengi eğer metin in ise
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # FFFFFF = çerçeve / kare kalınlığı / Renk


5. Adım: metin kutusuna Yeri
CSS ", metin kutusuna, sınıf # içerik Tasarımı" yazın.

- "CSS stil etiketleri olmadan" bir alan ekle


# Içerik (konum: mutlak; Sol:% 50; top: 140px; margin-left:-320px; width: 590px; height: 380px; padding: 10px; color: # F2F2F2; font-size: 13px; background-color: # 343434; background-image: (); border: 1px solid # FFFFFF; overflow: otomatik;) url'si

Açıklama:

- Üst: Üst metin kutusundan = mesafe
- Marj-left: ekranın sol kenarından = mesafe metin kutusuna
Sayfa kenarlarına kimden - Dolgu: 10px; içerik = 10 piksel mesafe
- Genişlik: metin = genişlik kutusu
- Yükseklik: Metin kutusunun = yükseklik
Metin - Arka Plan-color = arka plan rengi kutusu
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
If you want - resim eklemek için, metin kutusuna aynı genişlik vardır!
- Renk: # 000000; metin kutusuna = Metin rengi
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # C9C9C9 = çerçeve / kare kalınlığı / Renk
- Overflow: otomatik;) = bir kaydırma metin kutusu görünür oluşturur

Arka plan için renk: de şeffaf bir renk eklemek yerleştirebilirsiniz
görülmesi gereken, böylece arka plan görüntü!


6. Adım: Sağ kutusu ekle
CSS ", yani" kutusu "sınıf # sidebar_container Tasarımı" yazın.


Bunlar hiçbir sağ Kasası ile gerektirir:
tek: # sidebar_container ekler (display: none;)

- Doğru kutusu eklemek istediğiniz?
- "CSS stil etiketleri olmadan" bir alan ekle

# Sidebar_container (konum: mutlak; Sol:% 50; top: 140px; margin-left: 300px; width: 190px; height: 400px; background-color: # 343434; background-image: url; border: 1px solid # FFFFFF; color: # 000000; overflow: otomatik;)

Açıklama:

- En: kutunun üst kısmındaki = mesafe
- Marj-left: kutusunun sol kenarından = mesafe
- Genişlik: kutunun = genişlik
- Yükseklik: kutunun = yükseklik
- Arka Plan-color = arka plan rengi kutusu
- Artalan görüntüsü: url (); parantez içinde = Arkaplan Resmi (URL) eklemek
- Eğer bir görüntü eklemek, aynı genişlikte için kutu olarak alır
- Renk: # 000000; kutuya = Metin rengi
- Yazı-size: 13px; doğru kutusuna = metin boyutunu
- Sınır: 1px solid # C9C9C9 = çerçeve / kare kalınlığı / Renk
- Overflow: otomatik;) = görünür bir kaydırma kutusu oluşturur

Arka plan için renk: de şeffaf bir renk eklemek yerleştirebilirsiniz
görülmesi gereken, böylece arka plan görüntü!


Adım 7: Gezinme
Tasarım "olarak CSS", yani "Navi" Sınıf # nav_container
Gezinme düğmeleri bir sınıf li.nav_element
the duraksamak etkisi "kategorisinde bir li.nav_element: sallanmak

- "CSS stil etiketleri olmadan" bir alan ekle

# Nav_container (konum: mutlak; Sol:% 50; top: 140px; margin-left:-490px; width: 160px; height: 400px; border: 1px solid # FFFFFF; overflow: otomatik;) # nav ül (genişlik: 130px ; padding: 0px; margin: 0px;) li.nav_element (list-style-type: none; konum: göreli; padding: 5px; width: 115px;) bir (ekran: engellemek; width: 115px li.nav_element; padding: 4px; font-weight: bold; text-decoration: none; text-align: left; color: # F2F2F2; background-color: # 343434; background-image: () BURAYA DÜĞME-URL_1 url; border: 2px solid # 000000 Wink bir li.nav_element: sallanmak (color: # 000000; background-color: # C9C9C9; background-image: (BURAYA DÜĞME-URL_2) url;)

NAVI-Alan # nav_container Place du
değerleri üst ve kenar ile sol

Büyük: otomatik; 400 piksel bir kaydırılabilir Navi yükseklik oluşturur.
İsterseniz değil, # nav_container Sil'i:
- Yükseklik: 400px;
- Overflow: otomatik;


Bu "navigasyon butonları" size özelleştirebilirsiniz:

- # Li.nav_element bir
- Ve bir li.nav_element #: sallanmak
- Eğer bir buton üzerinden = duraksamak fare çalışır
- "Background-image: için (URL HERE düğmesi) URL kendi düğmesine ekle;"

Eğer "navigasyon düğmeleri", geniş kapsamlı olmalı
sonra) da değiştirmek genişliği (genişlik istiyoruz:

- # Nav_container
- # Nav ül
- Li.nav_element
- Li.nav_element bir



Adım 8: ziyaretçi sayacı
Tasarım "olarak CSS", ziyaretçi sayacı sınıf sayacı #.

Sayacı görmek için, "Ekstra at düzenlemek" için sayaç etkinleştirmek bir yer için. Lütfen oradan: "gösterme Hit DO" seçmek

Lütfen dikkat:
Eğer ekstra in öncesi ve metre eklemek sonra uzun metin olduğunuzda, siz) artırabilir, bu nedenle genişliği (ışın bu kodu gerekir 1 satırı uygun olarak, tüm metin.

Bu ve son kodu - arasında boş bir satır eklemek için
- Bu bakış size yardımcı olur
- "CSS stil etiketleri olmadan" bir alan ekle

# (Konum: mutlak; Sol:% 50; top: 30px; margin-left: 300px; width: 150px; height: 20px; color: # FFFFFF; font-size: 13px; border: 1px solid # FFFFFF;) sayacı

Açıklama:

- En üst kimden Sayısı = mesafe
- Marj-left: sol kenarına gelen karşı = mesafe
- Genişlik: sayaç ve = genişlik
- Yükseklik: sayaç ve = yükseklik
- Arka Plan-color = arka plan rengi Sayısı
- Renk: # FFFFFF; ve (beyaz) karşı = Metin rengi
- Yazı-size: 13px; = metin boyutunu
- Sınır: 1px solid # FFFFFF = çerçeve / kare kalınlığı / Renk
______________
Mesaj04.07.2009, 09:02 (UTC)    
Mesaj konusu:

Saolun !
Mesaj04.07.2009, 09:19 (UTC)    
Mesaj konusu:

Google Translatenin yaptığı hata sonucu genel çevirmeler yalnış çıkabiliyor.

Buyüzden önemli çevirilerinizi hemencevir.com gibi sitelerden tekrar tekrar yapabilirsiniz...

İyi Günler..

Burak
______________
BİR YERİN ADINA DENİLİNCE TÜRKLÜK ÜLKESİ ,GÖZÜM BAYRAK ARAR , KULAĞIM EZAN SESİ...


Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu