Welches Theme? Transparenz & Menü Links, vertikal?

Longdong

Hi Leute,
ich hab mal eine Frage, mein Ziel ist es eine Seite zu basteln die so ähnlich aussieht wie diese:
http://www.gigacer.it/
leider scheint es mir unmöglich die Menüleiste nach links zu verschieben, geschweige denn das ganze vertikal auszurichten bzw transparent zu machen.
über jede Hilfe freue ich mich
So Far LongDong

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sunfeeling

Wenn ich dich richtig verstehe möchtest du ein Theme erstellen, welches dem von http://www.gigacer.it/ ähnelt ?
So schwer wie es aussieht ist es gar nicht.

HTML

<HTML>


    <HEAD>
        <TITLE>WPDE - Beispielseite</TITLE>
        <LINK rel="stylesheet" href="style.css" type="text/css"/>
    </HEAD>
    
    <BODY>


        <!-- Div Container Complete -->
        <div id="complete" class="complete">
    
            
        
        </div>
        <!-- Div Container Complete -->
    
    </BODY>
    
</HTML>

Alles anzeigen

Code

body{


    background-image: -webkit-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -o-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -ms-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -moz-linear-gradient(top, gray 0%, #FFF 60%);


    margin: 0px;
    padding: 0px;
    
}


#complete{


    background-color: transparent;
    width: 1000px;
    height: 1000px;
    opacity: 1;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 1px 0px 10px 0px #666666;
    border: 1px solid #666666;


}

Alles anzeigen

Damit hast du schon einmal ein HTML Grundgerüst. Das Menu ist nichts Weiteres als eine Liste mit HTML TAGS <UL>'s und <LI>'s, die mit Javascript / JQuery bei Focus / Hover angesprochen werden und nach rechts verschoben werden.
Wenn du noch fragen hast kann ich dir gerne helfen ;)

pixselig

mit css3 ist da auch kein js mehr nötig ;) (ok, ist dann nicht ganz crossbrowser, aber ie nutzer brauchen eh keine animationen)

Longdong

Hallo,
danke für die Antworten,
wo muss ich denn den Code eintragen? Habe das Motion Theme.
Danke

Uwe_EF

Zitat

Habe das Motion Theme

Das hattest du vergessen zu erwähnen. Was dir Sunfeeling vorschlug war, eine Theme zu erstellen das dem von dir gewünschten ähnelt, nicht ein bereits bestehendes so anzupassen, dass es wie dein Beispiel aussieht...

Longdong

ahhh ok, danke, ich denke aber ein Theme zu erstellen ist kein großes Kunstwerk oder?

Uwe_EF

Nein, gar nicht. Profunde Kenntnisse in CSS, PHP, HTML und jScript vorausgesetzt ist das ein Kinderspiel, wie du an Sunfeelings Beispiel sehen kannst...

Uwe_EF

Zitat von Sunfeeling

Code

background-image: -ms-linear-gradient(top, gray 0%, #FFF 60%);

Aber nicht mit dem IE9...

[Edit]
In dem Zusammenhang: http://ie.microsoft.com/testdrive/Grap…er/Default.html

oneworld

Hallo,
ich muss Ihnen danken, weil die Fragen und die Antworten die dringender Bedarf. Ich habe noch nicht IE9 benutzt.

Posthumun

Zitat von Sunfeeling

Wenn ich dich richtig verstehe möchtest du ein Theme erstellen, welches dem hier http://www.gigacer.it/ ähnelt ?
So schwer wie es aussieht ist es gar nicht.

HTML

<HTML>


    <HEAD>
        <TITLE>WPDE - Beispielseite</TITLE>
        <LINK rel="stylesheet" href="style.css" type="text/css"/>
    </HEAD>
    
    <BODY>


        <!-- Div Container Complete -->
        <div id="complete" class="complete">
    
            
        
        </div>
        <!-- Div Container Complete -->
    
    </BODY>
    
</HTML>

Alles anzeigen

Code

body{


    background-image: -webkit-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -o-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -ms-linear-gradient(top, gray 0%, #FFF 60%);
    background-image: -moz-linear-gradient(top, gray 0%, #FFF 60%);


    margin: 0px;
    padding: 0px;
    
}


#complete{


    background-color: transparent;
    width: 1000px;
    height: 1000px;
    opacity: 1;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 1px 0px 10px 0px #666666;
    border: 1px solid #666666;


}

Alles anzeigen

Damit hast du schon einmal ein HTML Grundgerüst. Das Menu ist nichts Weiteres als eine Liste mit HTML TAGS <UL>'s und <LI>'s, die mit Javascript / JQuery bei Focus / Hover angesprochen werden und nach rechts verschoben werden.
Wenn du noch fragen hast kann ich dir gerne helfen ;)

Wow ist ja wirklich sehr einfach. Nice. Hätte ich nicht gedacht. Werde mich auch mal an sowas probieren...

pixselig

Das was Sunfeeling geposted hat ist kein Theme-Ansatz sondern der Ansatz einer statischen HTML-Seite. Bischen mehr ist da schon noch nötig ;)

Uwe_EF

Sei nicht so kleinlich... ;)

Longdong

So, nochmal danke für die Tipps,
Hab jetzt das Template überarbeitet und mein Menü macht das was es soll, jedoch hab ich noch 2 Fragen:
1. Wenn ich ne Font auf mein Server lege, sie in der CSS definiere und dann abrufe, wird sie nicht angezeigt, warum?
2. wie bekomme ich den hover so smoth wie auf der verlinkten Seite in Post#1 ?
hier mal meine Seite:
http://www.dataxcom.de/wp/