Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag10.07.2010 um 12:20 (UTC)    
Titel: Tutorial: Webtemplates im Homepage-Baukasten

Tutorial für die Anpassung eines kostenlosen Webtemplates in CSS für den Homepage-Baukasten.

Der Homepage-Baukasten bietet viele Möglichkeiten seine eigene Homepage gut und individuell zu gestalten. Doch viele Menschen empfinden eher eine Abneigung gegenüber Baukästen. Doch zum Glück gibt es den Homepage-Baukasten. Ich weiß selbst, dass Baukasten eigentlich ziemlich negativ klingt, aber er bietet auch Möglichkeiten für die professionelle Gestaltung einer eigenen Homepage.

Ich möchte nun die folgenden Schritte erklären, wie man sich selbst ein kostenloses Design für den Homepage-Baukasten zusammenstellen kann.

1) Auf der wohl beliebtesten Suchmaschine "Google" findet man viele Lösungen, wenn man zum Beispiel "Free Webtemplates CSS" eingibt. Wenn man sich also ein schickes Design ausgesucht hat, dann kann man das sogar kostenlos aus dem Internet herunterladen.

Hier einige Anbieter:
www.TemplateMo.com
www.FreeCSS.com
www.FreeCSSTemplates.org

2) Na toll - denkt der ein oder andere. Nun hab ich soetwas Komisches auf meinem PC und kann damit nichts anfangen. Doch als erstes sollte man die Datei öffnen und alle Dateien in einen Ordner entpacken/extrahieren.

3) Dann öffnet sich folglich der Ordner mit den heruntergeladenen Sachen. Unter anderem sollte man jetzt folgende Sachen im Ordner sehen:

- Eine Index Datei: Diese Datei kann man anklicken und sie öffnet das Design im Internet-Browser
- Eine Style Datei: Diese Datei ist unser wichtigstes Dokument.
- Einen Ordner mit "Images", also den Bildern des Designs

Zunächst trauen wir uns an das Style-Script heran. Dies ist der Code des Designs, an dem wir noch einige Änderungen vornehmen müssen.

3.1) Öffne das Style-Script mit einem normalen Editor/Works etc.

3.2) Nun findest du einen langen Code. Außerdem siehst du an einigen Stellen zum Beispiel in Klammern geschrieben (images/bg.jpg). An all diesen Stellen müssen nun die URL´s deiner Bilder hinein. Am besten lädst du alle Bilder aus dem Ordner "Images" im Homepage-Baukasten hoch, oder über einen externen Bilder-Upload-Dienst, allerdings ist bei solchen Diensten nie die Gewährleistung, dass die Bilder für immer dort bleiben und erreichbar sind.

3.3) Wenn du nun ein Bild hochgeladen hast, hast du auch eine Bild-URL aufrufen. Diese URL musst du in die Klammern deines Designs einfügen. Zum Beispiel in (images/bg.jpg) kommt dann rein: (http://meinbackgroundimage.jpg). Natürlich muss man vorher schauen, welches Bild man hochladen muss und ob in dem Style-Script eine "gif", eine "jpg", oder eine "png" Datei eingefügt werden muss. Oft gibt es die gleichen Bilder mehrmals, nur in einem anderen Format. Und wenn man da nur eine Kleinigkeit falsch macht, dauert es ganz schön lange, den Fehler hinterher zu finden.

4) Wenn du nun alle Bilder hochgeladen und in das Script eingefügt hast, dann kannst du deinen Code abspeichern, kopieren und im Homepage-Baukasten unter "CSS-Design"- "CSS-Code ohne Style Tags" einfügen.

5)
Wenn du nun deine Homepage aufrufen solltest, wird dir auffallen, dass doch noch einiges fehlt. Dies kommt nun.

5.1) In deinem Design-Ordner hast du auch eine "Index-Datei". Klicke auf die Datei und öffne sie mit deinem Internet-Browser. Am besten hierzu eignet sich der "Mozilla Firefox". Nun siehst du dein Design, das du allerdings ja für deine Homepage haben möchtest. Klicke im aufgerufenen Design einmal "Rechtsklick" - "Seitenquelltext anzeigen", in manchen Browsern, wie zum Beispiel "Opera" steht nur "Quelltext". Dort siehst du nun einen ganz langen Code, den du kopieren musst und im Homepage-Baukasten unter: "CSS-Design" - "Text über Design" einfügen musst, am Ende abspeichern.

5.2) Da wir das Design ja für den Baukasten anpassen wollen, müssen außerdem folgende Codes zusätzlich eingefügt werden.

Zum Einen muss dieser Code bei den Designeinstellungen im CSS Design "CSS-Code ohne Style Tags" eingefügt werden.

Code:
#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;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}


Außerdem müssen wir nun den Content vom Homepage-Baukasten in unser Design einfügen.

Dieser Code wird ebenfalls bei "CSS-Code ohne Style Tags" eingefügt.

Code:
#content {
position: absolute;
left: 50%;
top: 328px;
margin-left:-599px;
width: 660px;
padding:10px;
color: #000000;
font-size:13px;
font-family: Arial;
background-color:#transparent;
background-image:url();
border: 1px solid #000000;
height : 350px;
overflow:auto; }


Dieser Content ist nun so eigestellt, dass ein Scrollbalken erscheint, sobald der Text auf einer Seite länger ist, als dass Design. Die Werte, Farben und Abstäne müssen natürlich an das Design angepasst werden.

6) Die letzten Schritte. Ich empfehle jedem, der den Mozilla Firefox benutzt, sich das kostenlose Add-one "Write Area" zu holen und zu installieren. Es kann hier heruntergeladen bzw. installiert werden.

https://addons.mozilla.org/de/firefox/addon/6147

Eine Anleitung, was das genau ist, findet ihr unter:

http://www.homepage-baukasten.de/forum/viewtopic.php?t=102256

Wenn ihr das Add-one folglich installiert habt, ist der Rest eigentlich ein Kinderspiel.

Den Code, den ihr unter "CSS-Design" - "Text über Design" stehen habt, muss noch ein kleines bisschen bearbeitet werden. Das könnt ihr sehr erfolgreich mit dem gerade installierten Add-one machen. Klickt mit einem Rechtsklick auf "Edit in Write Area". Dort seht ihr euren Code nun verständlicher und ihr könnt den Text, der ja noch auf euerer Homepage zu sehen sein sollte, löschen, da wir gerade schon in Punkt 5.2. unseren eigenen Content/Seiteninhalt hinzugefügt haben. Wenn ihr also alles löscht, was überflüssig ist, sollte bei euch im Content auf eurer Homepage nur noch euer Inhalt zu sehen sein, was ihr mit dem Homepage-Baukasten Editor schreibt/geschrieben habt.

Und das war´s. Fertig ist das eigene Webtemplate für den Homepage-Baukasten.

Und so schwer war es doch nun wirklich nicht ?!

Kleiner Hinweis:
"Jedes Design und jedes Template ist verschieden. Es kann sein, dass es bei dem einen Design schneller funktioniert, bei dem anderen Design weniger schnell oder bei noch einem anderen Design gar nicht. Ich garantiere nicht, dass mein Tutorial 100%-ig funktionieren muss, da ich auch schon wenige Designs gehabt habe, bei denen es nicht ganz funktionierte, sei es die Anpassung des Contents vom Baukasten etc.

Aber nun - do it yourself !"

Theo Wink
______________
Theos Welt und Co. verabschiedet sich nach einer wunderschönen Zeit mit euch aus dem Homepage-Baukasten mit einem dicken Dankeschön an alle, die mich während meiner Baukasten Zeit so weit gebracht haben. Warum Theos Welt und Co. sich aus dem Baukasten verabschiedet, könnt ihr in meinem Promotion-Thread und auf der Startseite von TheosWelt lesen. HpBk-TemplateWorld ist davon nicht betroffen!!


Zuletzt bearbeitet von theoswelt am 10.07.2010, 13:22, insgesamt einmal bearbeitet
Beitrag10.07.2010 um 13:31 (UTC)    
Titel:

Schönes Tutorial werde ich gleich mal ausprobieren
Beitrag10.07.2010 um 14:50 (UTC)    
Titel:

cool .....ma schauen ob es klappt .....ich werde es sicher mal ausprobieren ..Smile

dankeschön

LG Sabine
______________
LG Sabine

Beitrag15.07.2010 um 03:08 (UTC)    
Titel:

Echt gutes Tutorial, aber Anfänger werden Probleme mit dem Test über bzw unter dem Design haben, deswegen noch ne kleine Ergänzung von mir, ab Punkt 5.1:

In dem Design steht auch ein Beispiel Text alles was im Quell Code darüber steht kommt bei Text über dem design rein un alles was darunter steht bei Text unter dem design rein Very Happy
Beitrag16.07.2010 um 11:04 (UTC)    
Titel:

Sher schön. Vielleicht lässt sich das in den "Baukasten Tutorials"-Ordner verschieben?

LG
Tom
______________
Beitrag17.07.2010 um 16:37 (UTC)    
Titel:

Ja, ich fände es sehr schön, wenn man es in den Bereich Design-Tutorials verschieben könnte, oder in eine andere Ecke.

Habe mir mit diesem Tutorial sehr viel Mühe gegeben und es war auch sehr zeitaufwendig. Wäre schön, wenn jemand vom Team mal etwas hierzu sagen könnte.

LG
Theo Very Happy
______________
Theos Welt und Co. verabschiedet sich nach einer wunderschönen Zeit mit euch aus dem Homepage-Baukasten mit einem dicken Dankeschön an alle, die mich während meiner Baukasten Zeit so weit gebracht haben. Warum Theos Welt und Co. sich aus dem Baukasten verabschiedet, könnt ihr in meinem Promotion-Thread und auf der Startseite von TheosWelt lesen. HpBk-TemplateWorld ist davon nicht betroffen!!
Beitrag07.05.2012 um 10:02 (UTC)    
Titel:

Ich hab ein problem, denn ihr auch sehen könnt falls ihr auf die website von mir geht:
http://co-scirocco.de.tl Bei jedem link taucht keine neue Seite auf.
Immer nur die Startseite.
Ist das normal?
An den Code hängt es nicht.[/u]
Beitrag07.05.2012 um 11:35 (UTC)    
Titel:

co-scirocco hat Folgendes geschrieben:
An den Code hängt es nicht.[/u]

Doch.

Du hast (unter anderem) folgenden Code bei Text über dem Design eingefügt:
Zitat:
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Home</a></li>
<li><a href="#">The Gamer</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Das blaue sind deine Menüpunkte, und bei dem roten ist angegeben, wohin die Links führen.
Steht dort ein #, springt das Bild lediglich nach oben Wink

Übrigens: Du hast noch das komplette HTML-Grundgerüst im Code stehen, das hat da nichts verloren!

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag28.06.2012 um 12:24 (UTC)    
Titel:

Also ich habe damit ein problem ich habe alles so gemacht wie es da stand und seht selbst was los ist http://grasshopperdesign.de.tl/ (Ich habe noch keine Bilder eingesetzt)

Unten auf der Hp das muss weg, kann mir bitte jemand helfen, kann sein das ich das content nicht richtig angepasst habe


Text über dem Design:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Web site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Web site" />
    <meta name="description" content="Site description here" />
    <meta name="keywords" content="keywords here" />
    <meta name="language" content="en" />
    <meta name="subject" content="Site subject here" />
    <meta name="robots" content="All" />
    <meta name="copyright" content="Your company" />
    <meta name="abstract" content="Site description here" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/custom.js"></script>
<script type="text/javascript" language="javascript" src="js/addon.js"></script>
  </head>
  <body>
    <div id="top">
      <div class="overlay"></div>
    </div> 
    <div id="wrapper">
      <div class="overlay"></div> 
      <div class="border-top"></div> 
      <div class="content">
        <div id="container">
          <div class="hd">
            <div id="container-top"></div> 
            <div id="banner"></div> 
            <div id="hmenu-wpr">
              <ul id="hmenu" class="sf-menu sf-js-enabled sf-shadow">
                <li class="current" style="border:none">
                  <a class="toplvl sf-with-ul" href="#">Home</a>
                </li>
                <li>
                  <a href="#" class="toplvl">Products</a> 
                  <ul>
                    <li>
                      <a href="#">menu item</a>
                    </li>
                    <li class="current">
                      <a href="#">menu item</a> 
                      <ul>
                        <li class="current">
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">menu item</a> 
                      <ul>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">menu item</a> 
                      <ul>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="toplvl" href="#">Services</a> 
                  <ul>
                    <li>
                      <a href="#">menu item</a>
                    </li>
                    <li class="current">
                      <a href="#">menu item</a> 
                      <ul>
                        <li class="current">
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">menu item</a> 
                      <ul>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">menu item</a> 
                      <ul>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                        <li>
                          <a href="#">menu item</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a class="toplvl" href="#">About Us</a>
                </li>
              </ul>
            </div>
          </div> 
          <div class="bd">
            <div id="page">
              <!-- SIDEBAR  --> 
              <div id="sidebar">
                <div class="content">
                  <div class="sidebox1">
                    <h2>Side Box Menu</h2> 
                    <div class="vmenu">
                      <ul>
                        <li>
                          <a href="#">Category 1</a>
                        </li>
                        <li>
                          <a href="#">Category 2</a>
                        </li>
                        <li>
                          <a href="#">Category 3</a>
                        </li>
                        <li>
                          <a href="#">Category 4</a>
                        </li>
                        <li>
                          <a href="#">Category 5</a>
                        </li>
                      </ul>
                    </div>
                  </div> 
                  <div>
                    <img src="images/business-man-1.png" style="width:100%" />
                  </div> 
                  <div class="sidebox1">
                    <h2>Side Box Heading</h2> 
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
                  </div>
                </div>
              </div> 
              <!-- END SIDEBAR  --> 
              <!-- MAIN COLUMN --> 
              <div id="main">
                <div class="content">
                  <h1>Welcome</h1> 
                  <h3>To our Website</h3> 
                  <p>
                    <img src="images/bizwoman-1.png" style="float:right;margin-left:20px" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
                  </p> 
                  <h2 style="margin-top:35px;">Heading h2</h2> 
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p> 
                  <p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p> 
                  <div style="margin-top:25px;">
                    <!-- TO REMOVE --> 
                    <h3>LICENSE</h3> 
                    <p>This template is provided for free. You are free to use it, share it, redistribute it, modify it in any way you want as long as you
                      <strong>keep a visible link back to doTemplate.com</strong> in the footer.
                    </p>
                  </div>
                </div>
              </div> 
              <!-- END MAIN --> 
              <!-- SIDEBAR 2  --> 
              <div id="sidebar2">
                <div class="content">
                  <div class="sidebox2">
                    <h2>Sidebar Bloc</h2> 
                    <div class="vmenu">
                      <ul>
                        <li>
                          <a href="#">Lorem Ipsum</a>
                        </li>
                        <li>
                          <a href="#">Suspendisse</a>
                        </li>
                        <li>
                          <a href="#">Maecenas</a>
                        </li>
                        <li>
                          <a href="#">Sed non risus</a>
                        </li>
                        <li>
                          <a href="#">Consectetuer</a>
                        </li>
                      </ul>
                    </div>
                  </div> 
                  <div class="sidebox2">
                    <h2>Cross browser</h2> 
                    <p>This Website template is compatible with 99% of Web browsers used on the market: Internet Explorer including ie6, Firefox, Chrome, Safari and Opera.</p> 
                    <div style="margin-top:20px">
                      <img src="images/cross-browser.png" style="width:100%" />
                    </div> 
                    <p style="margin-top:20px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
                  </div>
                </div>
              </div> 
              <!-- END SIDEBAR 2  --> 
              <div class="clear" style="height:60px"></div>
            </div>
          </div> 
          <div class="ft">
            <div id="footer">
              <div class="content">
                <!--
Keep this footer link UNCHANGED AND VISIBLE or make a 10 dollars donation at www.dotemplate.com/#donate to remove it.
--> 
                <p>
                  <a href="http://www.dotemplate.com">Free templates</a>
                </p>
              </div>
            </div> 
            <div id="container-bottom"></div>
          </div>
        </div>
      </div>
    </div> 
    <div class="clear"></div>
  </body>
</html>




CSS-Code
ohne Style Tags:


Code:
/*
Theme Name: doTemplate custom theme
Theme URI: http://www.dotemplate.com
Author: doTemplate - Thierry Ruiz
Author URI: http://www.dotemplate.com
Description: Generated template created with doTemplate online editor
Version: 1.0
License: GNU General Public License
License URI:
Tags: custom-background, custom-colors, custom-header, custom-menu
*/



/*
----------------------------------------------------------------------------------------

Copyright 2007-2012 - Thierry Ruiz - www.dotemplate.com - All rights reserved.

THIS TEMPLATE IS FREE FOR PERSONAL USE ONLY AS LONG AS YOU KEEP THE EXACT LINK TO WWW.DOTEMPLATE.COM IN THE FOOTER.

FOR COMMERCIAL USE OR FOR REMOVE THE DOTEMPLATE LINK, MAKE A 10 DOLLARS DONATION at www.dotemplate.com/#donate

----------------------------------------------------------------------------------------
*/


/* CSS reset 3.2.0 Copyright (c) Yahoo. */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
   margin:0;
   padding:0;
}

table{
   border-spacing:0;
   border-collapse:collapse;
}

fieldset,img{
   border:0;
}

address,caption,cite,code,dfn,em,strong,th,var{
   font-style:normal;
   font-weight:normal;
}

li{
   list-style:none;
}

caption,th{
   text-align:left;
}

h1,h2,h3,h4,h5,h6{
   font-size:100%;
   font-weight:normal;
}

q:before,q:after{
   content:'';
}

abbr,acronym{
   font-variant:normal;
   border:0;
}

sup{
   vertical-align:text-top;
}

sub{
   vertical-align:text-bottom;
}

input,textarea,select{
   font-size:inherit;
   font-family:inherit;
   font-weight:inherit;
}

legend{
   color:#000;
}

a img{
   border:none;
}

.clear{
   clear:both;
   height:0;
   visibility:hidden;
   width:0;
   overflow:hidden;
   display:block;
}

html{
   overflow-Y:scroll;
   margin:0 0 0 -1px;
}

body{
   width:100%;
   display:table;
}

#top{
   position:relative;
   height:20px;
   width:100%;
   background-color:#141414;
   background-image2:url('#000000' );
   background-position:center top;
   background-repeat:repeat-x;
   background-image:url('images/css/top-bg.png');
}

#top .overlay{
   background-image:none;
}

#wrapper{
   width:100%;
   background-color:#000000;
   background-position:center top;
   background-repeat:repeat-x;
   background-image:url('images/css/wrapper-bg.png');
}

#wrapper .overlay{
   position:absolute;
   height:500px;
   width:1400px;
   background-color:transparent;
   margin-left:-700.0px;
   left:50%;
   background-repeat:no-repeat;
   background-image:url('images/css/wrapper-img.png');
   background-position:center top;
}

#wrapper .border-top{
   position:absolute;
   height:25px;
   width:100%;
   background-color:transparent;
   background-repeat:repeat-x;
   background-image:url('images/css/wrapper-borderTop.png');
   background-position:center top;
}

#container{
   position:relative;
   width:1100px;
   margin:0 auto;
}

#container .hd{
   height:400px;
   width:100%;
   background-color:transparent;
   margin:0 auto;
   background-image:url('images/css/container-hd.png');
   background-position:center top;
}

#container-top{
   position:relative;
   height:50px;
   width:960px;
}

#banner{
   position:relative;
   height:300px;
   width:960px;
   background-color:transparent;
   margin:0 auto;
   background-position:center top;
   background-image:url('images/css/banner.png');
}

#hmenu-wpr{
   height:50px;
   width:958px;
   margin:0 auto;
}

ul#hmenu{
   list-style-type:none;
   height:50px;
   font:11px Helvetica,sans-serif;
   text-transform:uppercase;
   width:958px;
   margin:0 auto;
   padding:0;
}

ul#hmenu li a, ul#hmenu li a:visited{
   line-height:24px;
   color:#ffffff;
}

ul#hmenu li a.toplvl, ul#hmenu li a.toplvl:visited{
   line-height:50px;
   color:#FFFFFF;
   font-weight:bold;
   padding:0 70px;
}

ul#hmenu li a.toplvl:hover, ul#hmenu li.current a.toplvl{
   color:#ffffff;
   background-color:transparent;
   background-image:url('images/css/hmenu-sel.png');
   background-position:left top;
   background-repeat:repeat-x;
}

.sf-menu,.sf-menu *{
   list-style:none;
}

.sf-menu{
   line-height:1.0;
   margin-bottom:1em;
   float:left;
}

.sf-menu ul{
   position:absolute;
   width:150px;
   top:-999em;
}

#hmenu .sf-menu ul{
   height:50px;
}

.sf-menu ul li{
   width:100%;
}

.sf-menu li:hover{
   visibility:inherit;
}

.sf-menu li{
   position:relative;
   background-color:transparent;
   float:left;
}

.sf-menu a{
   position:relative;
   text-decoration:none;
   display:block;
}

.sf-menu li:hover ul,.sf-menu li.sfHover ul{
   left:0;
   z-index:99;
   top:50px;
}

#hmenu .sf-menu li:hover ul,#hmenu .sf-menu li.sfHover ul{
   top:50px;
}

ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{
   top:-999em;
}

ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{
   /* match ul width */top:0;
   left:150px;
}

ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{
   top:-999em;
}

ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{
   /* match ul width */top:0;
   left:150px;
}

.sf-menu ul li a{
   padding:.75em 1em;
}

.sf-menu li li{
   background:#005F0F;
}

.sf-menu li li li{
   background:#005F0F;
}

.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
   background:#005505;
   outline:0;
}

.sf-menu a.sf-with-ul{
   padding-right:2.25em;
   min-width:1px;
}

.sf-sub-indicator{
   position:absolute;
   text-indent:-999em;
   height:10px;
   /* IE6 only */width:10px;
   background:url('images/css/hmenu-arrows.png') no-repeat 0px 0px;
   overflow:hidden;
   display:block;
   right:.75em;
   top:1.05em;
}

a > .sf-sub-indicator{
   top:12px;
}

a.toplvl > .sf-sub-indicator{
   /* give all except IE6 the correct values */top:22.0px;
   background-position:0 -10px;
}

a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator{
   background-position:0px -100px;
}

.sf-menu ul .sf-sub-indicator{
   background-position:-10px 0;
}

.sf-menu ul a > .sf-sub-indicator{
   background-position:0 0;
}

.sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator{
   background-position:-10px 0;
}

.sf-shadow ul{
   -wwebkit-border-top-right-radius:17px;
   box-shadow:5px 5px 5px #CCC;
   -wwebkit-border-bottom-left-radius:17px;
   -mmoz-border-radius-topright:17px;
   -webkit-box-shadow:5px 5px 5px #CCC;
   background:url('../images/shadow.png') no-repeat bottom right;
   border:1px solid #AAA;
   ppadding:0 8px 9px 0;
   -mmoz-border-radius-bottomleft:17px;
   -moz-box-shadow:5px 5px 10px #AAA;
}

.sf-shadow ul.sf-shadow-off{
   background:transparent;
}

#container .bd{
   position:relative;
   width:100%;
   background-color:transparent;
   margin:0 auto;
   background-position:center top;
   background-repeat:repeat-y;
   background-image:url('images/css/container-bd.png');
}

#page{
   position:relative;
   width:958px;
   margin:0 auto;
}

#main{
   position:relative;
   line-height:20px;
   letter-spacing:normal;
   color:#000000;
   text-transform:normal;
   font-size:13px;
   font-style:normal;
   width:518px;
   margin-left:0px;
   font-family:Helvetica, Arial, sans-serif;
   font-weight:normal;
   float:left;
}

#main .content{
   position:relative;
   margin:20px 15px;
}

#main p a:link, #main p a:visited{
   color:#1597A4;
   text-decoration:none;
}

#main p a:hover{
   color:#ffa500;
}

#main h1{
   letter-spacing:-1px;
   font-style:normal;
   background-color:transparent;
   font-weight:normal;
   padding:0px;
   color:#000000;
   text-transform:none;
   font-size:30px;
   margin:15px 0 15px 0;
   font-family:Helvetica, Arial, sans-serif;
   border:0;
   text-shadow:none;
   background-image:none;
   background-repeat:no-repeat;
}

#main h2{
   letter-spacing:-1px;
   font-style:normal;
   background-color:transparent;
   font-weight:normal;
   padding:0px;
   color:#000000;
   text-transform:none;
   font-size:18px;
   margin:10px 0 10px 0;
   font-family:Helvetica, Arial, sans-serif;
   border:0;
   text-shadow:none;
   background-image:none;
   background-repeat:no-repeat;
}

#main h3{
   letter-spacing:1px;
   font-style:normal;
   background-color:transparent;
   font-weight:bold;
   padding:0px;
   color:#000000;
   text-transform:none;
   font-size:14px;
   margin:5px 0;
   font-family:'Trebuchet MS', sans-serif;
   border:0;
   text-shadow:none;
   background-image:none;
   background-repeat:no-repeat;
}

#main .content p{
   text-align:justify;
}

#main h1:first-child{
   margin:0px 0 15px 0;
}

#sidebar{
   position:relative;
   width:220px;
   float:left;
}

#sidebar .content{
   position:relative;
   margin:0 10px;
}

#sidebar2{
   position:relative;
   width:220px;
   margin-left:0px;
   float:left;
}

#sidebar2 .content{
   position:relative;
   margin:0 10px;
}

#page a:link, #page a:visited{
   text-decoration:none;
}

#page a:hover{
   text-decoration:underline;
}

#container .ft{
   position:relative;
   height:180px;
   width:100%;
   background-color:transparent;
   margin:0 auto;
   background-position:center top;
   background-repeat:repeat-y;
   background-image:url('images/css/container-ft.png');
}

#footer{
   position:relative;
   letter-spacing:normal;
   width:960px;
   font-style:normal;
   background-color:transparent;
   font-weight:normal;
   line-height:20px;
   height:100px;
   color:#404040;
   text-transform:normal;
   font-size:12px;
   font-family:Helvetica, Arial, sans-serif;
   margin:0 auto;
   background-image:none;
}

#footer .content{
   position:relative;
   text-align:center;
   width:100%;
   margin-top:20px;
   float:left;
}

#footer p a:link, #footer p a:visited{
   color:#008404;
   text-decoration:none;
}

#footer p a:hover{
   color:#00EE00;
}

#container-bottom{
   position:relative;
   height:80px;
   width:960px;
   margin:0 auto;
}

.sidebox1{
   letter-spacing:normal;
   font-style:normal;
   background-color:transparent;
   font-weight:normal;
   padding:0px;
   line-height:20px;
   color:#000000;
   text-transform:normal;
   font-size:12px;
   font-family:Helvetica, Arial, sans-serif;
   margin:20px 0px 20px 0px;
   border:0;
   background-position:center top;
   background-repeat:no-repeat;
   background-image:none;
}

.sidebox1 p a:link, .sidebox1 p a:visited{
   color:#005b00;
   text-decoration:none;
}

.sidebox1 p a:hover{
   color:#00EE00;
}

.sidebox1 h2{
   letter-spacing:1px;
   font-style:normal;
   background-color:transparent;
   margin-bottom:15px;
   font-weight:bold;
   padding:5px;
   line-height:18px;
   color:#FFFFFF;
   text-transform:none;
   font-size:14px;
   font-family:Arial, sans-serif;
   border:1px solid #1e1e1e;
   text-shadow:0 -1px #000000;
   background-image:url('images/css/sidebox1-h2-bg.png');
   background-repeat:repeat-x;
   background-position:center top;
}

.sidebox1 .vmenu ul{
   text-align:left;
   text-decoration:none;
   margin:7px 0px 8px 0px;
   list-style:none;
   border-top:1px solid #a5a5a5;
   padding:0;
}

.sidebox1 .vmenu ul li{
   border-bottom:1px solid #a5a5a5;
   margin:0;
   list-style:none;
   padding:6px 0 6px 5px;
}

.sidebox1 .vmenu ul li a:link, .sidebox1 .vmenu ul li a:visited{
   letter-spacing:normal;
   color:#000000;
   text-transform:normal;
   font-style:normal;
   font-size:12px;
   font-family:Helvetica, Arial, sans-serif;
   text-decoration:none;
   font-weight:normal;
}

.sidebox1 .vmenu ul li a:hover{
}

.sidebox1 p{
   text-align:justify;
}

.sidebox2{
   letter-spacing:normal;
   font-style:normal;
   background-color:transparent;
   font-weight:normal;
   padding:0px;
   line-height:20px;
   color:#000000;
   text-transform:normal;
   font-size:12px;
   font-family:Helvetica, Arial, sans-serif;
   margin:20px 0px 20px 0px;
   border:0;
   background-position:center top;
   background-repeat:no-repeat;
   background-image:none;
}

.sidebox2 p a:link, .sidebox2 p a:visited{
   color:#0000EE;
   text-decoration:none;
}

.sidebox2 p a:hover{
   color:#00EE00;
}

.sidebox2 h2{
   letter-spacing:1px;
   font-style:normal;
   background-color:transparent;
   margin-bottom:15px;
   font-weight:bold;
   padding:5px;
   line-height:18px;
   color:#FFFFFF;
   text-transform:none;
   font-size:14px;
   font-family:Arial, sans-serif;
   border:1px solid #1e1e1e;
   text-shadow:0 -1px #000000;
   background-image:url('images/css/sidebox2-h2-bg.png');
   background-repeat:repeat-x;
   background-position:center top;
}

.sidebox2 .vmenu ul{
   text-align:left;
   text-decoration:none;
   margin:7px 0px 8px 0px;
   list-style:none;
   border-top:1px solid #a5a5a5;
   padding:0;
}

.sidebox2 .vmenu ul li{
   border-bottom:1px solid #a5a5a5;
   margin:0;
   list-style:none;
   padding:6px 0 6px 5px;
}

.sidebox2 .vmenu ul li a:link, .sidebox2 .vmenu ul li a:visited{
   letter-spacing:normal;
   color:#000000;
   text-transform:normal;
   font-style:normal;
   font-size:12px;
   font-family:Helvetica, Arial, sans-serif;
   text-decoration:none;
   font-weight:normal;
}

.sidebox2 .vmenu ul li a:hover{
}

.sidebox2 p{
   text-align:justify;
}




#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;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#content {
position: absolute;
left: 50%;
top: 328px;
margin-left:-599px;
width: 660px;
padding:10px;
color: #000000;
font-size:13px;
font-family: Arial;
background-color:#transparent;
background-image:url();
border: 1px solid #000000;
height : 350px;
overflow:auto; }
[/code]
Beitrag16.08.2012 um 08:36 (UTC)    
Titel: Danke

Eine super Anleitung... bei meiner Hp hat sie mir sehr geholfen...
Beiträge der letzten Zeit anzeigen:   


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