mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:25 Benutzername: Passwort: Auto-Login

Thema: Hilfe bei Mouseover-Effekt vom 03.02.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Hilfe bei Mouseover-Effekt
Autor Nachricht
Legend300
Threadersteller

Dabei seit: 03.02.2011
Ort: Stuttgart
Alter: -
Geschlecht: Männlich
Verfasst Do 03.02.2011 22:41
Titel

Hilfe bei Mouseover-Effekt

Antworten mit Zitat Zum Seitenanfang

Hey Leute,

Ich brauche hilfe bei einem Mouseover(Rollover) Effekt für mein Portfolio. Bin derzeit bei diesem Punkt

http://img3.imagebanana.com/img/ixhvksii/Website1.jpg

Aussehend soll es jedoch so

http://img3.imagebanana.com/img/129v8tyt/website2.jpg

Kann mir einer helfen wie ich das so hinkriegen kann + die Ausrichtung. Ich bin derzeit am HTML und CSS lernen, deswegen weiß ich noch nicht alles. Würde mich sehr auf hilfe freuen *zwinker*

Mfg
  View user's profile Private Nachricht senden
alien

Dabei seit: 06.07.2006
Ort: aus der Phantasie
Alter: -
Geschlecht: Männlich
Verfasst Do 03.02.2011 22:53
Titel

Antworten mit Zitat Zum Seitenanfang

Aber sich als kompetenten Webdesigner schimpfen… *zwinker*

Ohne den entsprechenden Code kann dir keiner helfen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
jilalleinzuhaus

Dabei seit: 26.01.2007
Ort: Frankfurt am Main
Alter: -
Geschlecht: Weiblich
Verfasst Do 03.02.2011 23:16
Titel

Antworten mit Zitat Zum Seitenanfang

Hast du die Seite über Photoshop als HTML-Seite ausgegeben? Poste mal den HTML-Code für die Navi.
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 03.02.2011 23:26
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, mit CSS.
margin und padding sind dein Freund. Für die Transparenzen gibts opacity oder background: rgba(); / hsla();

Meinst du eigentlich, dass Adobe mit dem Logo einverstanden ist? Schaut schon relativ ähnlich aus… *zwinker*
Ansonsten siehe Antwort 1 – sowas finde ich nicht sonderlich ehrlich. Streich wenigstens die Kompetenz raus und belasse es dabei. Verheimlichen ist besser als Lügen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Legend300
Threadersteller

Dabei seit: 03.02.2011
Ort: Stuttgart
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.02.2011 00:21
Titel

Antworten mit Zitat Zum Seitenanfang

alien hat geschrieben:
Aber sich als kompetenten Webdesigner schimpfen… *zwinker*

Ohne den entsprechenden Code kann dir keiner helfen.


Code:
   <div id="wrapper">
       <div id="header">
               <h1><a href="./index.htm">Startseite - A.Allinger Mediengestaltung</a></h1>
               <ul id="menu">
                     <li class="home chosen"><a href="./index.htm">Home</a></li>
                    <li class="galerie"><a href="./galerie.htm">Galerie</a></li>
                    <li class="kunden"><a href="./kunden.htm">Kunden</a></li>
                    <li class="kontakt"><a href="./kontakt.htm">Kontakt</a></li>
               </ul>
        </div>


Der Code ?


alien hat geschrieben:
Ja, mit CSS.
margin und padding sind dein Freund. Für die Transparenzen gibts opacity oder background: rgba(); / hsla();

Meinst du eigentlich, dass Adobe mit dem Logo einverstanden ist? Schaut schon relativ ähnlich aus…
Ansonsten siehe Antwort 1 – sowas finde ich nicht sonderlich ehrlich. Streich wenigstens die Kompetenz raus und belasse es dabei. Verheimlichen ist besser als Lügen.


Adobe´s Logo habe ich bei der Gestaltung nicht im Hinterkopf gehabt. Ich denke ich Gestalte das Logo neu. *zwinker*

Und zur "Kompetenz". Ich Jobbe ab nächste Woche bei einer Werbeagentur wo ich neben der Schule viel lernen werde für das Studium ab September. Ich dachte mir eine Website würde nicht Schaden. Der Text ist auch nur Platzhalter. Ich glaube ich werde anstatt dem Willkommen Text, ein "Latest News" einfügen. Alles noch offen. *zwinker*
  View user's profile Private Nachricht senden
alien

Dabei seit: 06.07.2006
Ort: aus der Phantasie
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.02.2011 09:22
Titel

Antworten mit Zitat Zum Seitenanfang

Dein HTML ist nicht valide. Du musst noch den wrapper schließen.
Der Code? Naja, dein HTML ist nicht alles. Stylen tust du mit CSS. Also, wie wäre es noch dein CSS zu posten?

Ansonsten siehe Antwort 3. Margin und Padding sind dein Freund.
  View user's profile Private Nachricht senden
DesignKater

Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.02.2011 11:38
Titel

Antworten mit Zitat Zum Seitenanfang

Legend300 hat geschrieben:
Und zur "Kompetenz". Ich Jobbe ab nächste Woche bei einer Werbeagentur wo ich neben der Schule viel lernen werde für das Studium ab September. Ich dachte mir eine Website würde nicht Schaden. Der Text ist auch nur Platzhalter. Ich glaube ich werde anstatt dem Willkommen Text, ein "Latest News" einfügen. Alles noch offen. *zwinker*


Das Ding ist dass du einen falschen Eindruck von deinen Fähigkeiten vermittelst. Wenn du alles erst noch lernen musst, wozu dann jetzt schon die eigene Webseite mit der du ja offensichtlich Leistungen anbieten willst, die du garnicht in der Lage bist zu erbringen? Damit du eine hast? In meinen Augen ein völlig falscher Ansatz!
  View user's profile Private Nachricht senden
Legend300
Threadersteller

Dabei seit: 03.02.2011
Ort: Stuttgart
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.02.2011 14:19
Titel

Antworten mit Zitat Zum Seitenanfang

Das soll nur eine ÜBUNG sein um bei der Agentur auch etwas kleines Anpassen zu können. Sowas wie ein Portfolio schien mir eine geeignete Übung zu sein. Das habe ich alles an einem Tag erstellt. Also Design + Anpassung. Deswegen wird diese Seite sowieso nicht online gehen.

Und zum Code.

Hier die ganze HTML (Es ist Valide, habe nur vergessen den Close div zu kopieren)

Code:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>Startseite - A.Allinger Mediengestaltung</title>
   
   <meta name="keywords" content="Stichworte" />
   <meta name="copyright" content="Urheberrecht" />
   <meta name="author" content="Autor" />
   <meta name="description" content="Beschreibung" />
   <meta name="language" content="de-de" />
   
    <link rel="stylesheet" href="style/style.css" type="text/css" media="screen,projection" charset="utf-8" />
   
    <script type="text/javascript" src="./script/jquery.js" charset="uft-8"></script>
    <script type="text/javascript" src="./script/script.js" charset="uft-8"></script>
   
</head>
<body>
   <div id="wrapper">
       <div id="header">
               <h1><a href="./index.htm">Startseite - A.Allinger Mediengestaltung</a></h1>
               <ul id="menu">
                     <li class="home chosen"><a href="./index.htm">Home</a></li>
                    <li class="galerie"><a href="./galerie.htm">Galerie</a></li>
                    <li class="kunden"><a href="./kunden.htm">Kunden</a></li>
                    <li class="kontakt"><a href="./kontakt.htm">Kontakt</a></li>
               </ul>
        </div>
        <div id="content">
           <h2>Willkommen</h2>
            <p>
               Willkommen auf dem Portfolio von Adrian Allinger. Ich bin ein Webdesigner der ihnen mit Kreativität und Kompetenz zum Internetauftritt verhilft. Die Qualität ihres Produkts ist bei mir gewährleistet, da alles aus einer Hand komm            </p>
            <p>
            Gefallen ihnen meine Referenzen ? Oder haben Sie noch andere Fragen ? Sie könne mich gerne kontaktieren.
            </p>
            <ul class="home-gallery">
               <li>
                   <dl>
                       <dt>
                           <img src="./media/home/beispiel1.jpg" title="Beispiel 1" />
                        </dt>                       
                    </dl>
                </li>
                <li>
                   <dl>
                       <dt>
                           <img src="./media/home/beispiel2.jpg" title="Beispiel 2" />
                        </dt>                       
                    </dl>
                </li>
                <li>
                   <dl>
                       <dt>
                           <img src="./media/home/beispiel3.jpg" title="Beispiel 3" />
                        </dt>                       
                    </dl>
                </li>
            </ul>
        </div>
        <div id="footer">
           <a href=".impressum.htm"Impressum</a>
        </div>
    </div>
</body>
</html>


Und hier die CSS
Code:


/*-----------------------------------------------------*/
/*----------------------- Haupt -----------------------*/
/*-----------------------------------------------------*/


* {
   
   margin: 0;
   padding: 0;
   border: 0 none;
   
}

html {
      
   background: #272727 url(../layout/background.jpg);
      
}

body {
   
   padding: 112px 0 0 0;
   
}

#wrapper {
   
   width: 958px;
   margin: 0 auto;
   
}

#header {
   
   width: 958px;
   height: 108px;
   
}

#header h1 {
   
   width: 349px;
   height: 75px;
   
   padding: 0 0 0 0;
   
   float: left;
   
}


#header h1 a {
   
   width: 349px;
   height: 75px;
   
   background: transparent url(../layout/logo.png) no-repeat;
   
   text-indent: -5000px;
   
   display: block;
   overflow: hidden;
   
}

/*-----------------------------------------------------*/
/*--------------------- Schrift -----------------------*/
/*-----------------------------------------------------*/

body {
   
   color: #FFF;
   font-size: 100%;
   font-family: Cambria, Tahoma, sans-serif;
   
   
}

/*-----------------------------------------------------*/
/*----------------------- Teil ------------------------*/
/*-----------------------------------------------------*/

#menu {
   
   width: 537px;
   height: 103px;
   margin: 29px 0 0 0;
   float: left;
   list-style-type: none;
   
}

#menu li {
   
   height: 103px;
   float: left;
   
}

}
/*-----------------------------------------------------*/
/*---------------------- Detail -----------------------*/
/*-----------------------------------------------------*/


/*-----------------------------------------------------*/
/*--------------------- CSS-Hacks ---------------------*/
/*-----------------------------------------------------*/



margin und padding schön und gut. Wie ich den Mouseover Effekt hinbekomme weiß ich immer noch nicht.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Mouseover-Effekt im PDF?
CSS Mouseover-Effekt
Mouseover Effekt im Acrobat
mouseover-effekt auf textlink?
Mouseover-Effekt mit Flash möglich?
Flash-menu (mouseover-effekt)
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.