tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
313
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 17.05.06 13:58 #1
    piti66 piti66 ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    421
    Hey,

    und zwar möchte ich einen banner bauen. Es soll erst ein normaler Banner 468*60 sein und wenn ich drauf gehe soll er größer werden und mehr Inhalt angezeigt werden. Will aber kein javascript benutzen! Weiß jemand wie man dass machen könnte!

    mfg

    Sebastian
     
  2. 17.05.06 14:03 #2
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Mit CSS....
    da ein Banner idR. verlinkt ist...kannst du die Abmaße dieses Links beim Überfahren über die Pseudoklasse a:hover vergrössern.

    Bsp:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

    <html>
<head>
<title>Test</title>
<style type="text/css">
<!--
a.banner{
  display:block;
  width:468px;
  height:60px;
  overflow:hidden;
}
a.banner:hover{
  overflow:visible;
}
-->
</style>
</head>
<body>
<a class="banner" href="#"><img width="1000" height="120" src="banner.gif"></a>
</body>
</html>
    ....das Banner ist eigentlich 1000x120 gross, sein Anzeigebereich wird aber auf 468x60 eingegrenzt....beim überfahren wird es dann über overflow:visible in seiner vollen Grösse angezeigt.
     
  3. 17.05.06 14:21 #3
    piti66 piti66 ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    421
    Hey sven,

    funtioniert richtig gut! Nur ist noich ein Problem! Die Schrift die drunter ist soll überdeckt werden und nicht mehr sichtbar sein bzw. nicht verschoben werden.

    mfg

    Sebastian
     
  4. 17.05.06 14:23 #4
    Avatar von Hektik
    Hektik Hektik ist offline Mitglied Brokat
    Registriert seit
    May 2004
    Ort
    Kleve (NRW)
    Beiträge
    300
    da hilft dir der z-index weiter

    Code :
    1
2
3

    a.banner:hover {
z-index: 99;
}
     
  5. 17.05.06 14:29 #5
    piti66 piti66 ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    421
    Sieht jetzt bei mir so aus:

    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <    html>
    <    head>
        <    title>Test</title>
        <    style type="text/css">
            a.banner{
                   border:0;
              display:block;
              width:468px;
              height:60px;
              overflow:hidden;
        }
            a.banner:hover{
              overflow:visible;
                   z-index: 99;
        }
        </    style>
    <    body>

    <    a class="banner" href="#"><img width="468" height="180" src="banner.jpg"></a>
    dsasf
    </body>
    </    html> 

    geht aber nicht der text wird immer noch verschoben!

    mfg

    Sebastian
     
  6. 17.05.06 14:32 #6
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Packe unter das Banner ein Platzhalter Element in der Ausgangsgrösse des Banners, und positioniere das Banner absolut darüber...
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

    <html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
  margin:0;
}
a.banner,div.dummie{
  display:block;
  width:468px;
  height:60px;
  overflow:hidden;
}
a.banner{
  position:absolute;
  top:0;
  left:0;
}
a.banner:hover{
  overflow:visible;
}
-->
</style>
</head>
<body>
<div class="dummie">&nbsp;</div>
<a class="banner" href="#"><img width="1000" height="120" src="banner.gif"></a>
text text text
</body>
</html>

    ....in der Ausgangsgrösse wird der Text angezeigt, beim Überfahren wird er verdeckt, ohne den Seiteninhalt zu verschieben.
     
  7. 17.05.06 14:36 #7
    piti66 piti66 ist offline Mitglied Brokat
    Registriert seit
    Feb 2005
    Beiträge
    421
    So geht danke sven! Hoffe das div-dummie war nicht für mich bestimmt!

    mfg

    Sebastian
     
  8. 17.05.06 14:49 #8
    Avatar von Sven Mintel
    Sven Mintel Sven Mintel ist offline Mitglied
    Registriert seit
    Aug 2003
    Beiträge
    18.238
    Blog-Einträge
    6
    Nö...keine Angst, das dummie hat nichts mit dumm zu tun

    ist halt nur so ein Name...wenn einem nichts besseres einfällt
     
« Frame austauschen | Select zu breit »

Ähnliche Themen

  1. Banner Problem
    Von Zwackmix im Forum Photoshop
    Antworten: 3
    Letzter Beitrag: 29.08.10, 19:38
  2. Flash Movie als Banner (verschiedene Banner --> wie gif)
    Von BSA im Forum Flash Plattform
    Antworten: 22
    Letzter Beitrag: 28.09.05, 12:27
  3. Problem mit Banner Rotator.
    Von SixxKiller im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 03.09.05, 18:27
  4. Banner-Hyperlink Problem
    Von KecDieHaie im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 27.10.04, 11:46
  5. [ImageReady] problem mit banner größe !
    Von Yafeuafula im Forum Photoshop
    Antworten: 15
    Letzter Beitrag: 14.05.03, 22:40