Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Button in css fuktioniert bei einigen browser nicht

  1. #1
    HTML Newbie
    Registriert seit
    22.04.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Button in css fuktioniert bei einigen browser nicht

    Hallo Leute,
    ich habe da folgendes Problem.
    hab in css einen Button aufgebaut der eine Info enthalten, und bei einem Mausclick an der seite verschwinden soll.
    soweit so gut, aber unter den browsern IE, Safari 5.1 und Google Chrome reagiert der zusammengeschobene Button nicht und springt immer in die Ursprungsposition zurück. (unter Firefox macht er was er soll!)
    welchen Befehl muss ich wo eingeben, dass auch die anderen browser bedient werden?
    hoffe ich habe mich einigermassen verständlich ausgedrückt.
    (Javascript kommt nicht in Frage- da der Button auch bei ausgeschaltetem Java und Javascript laufen soll)
    hab mal ne testversion hochgeladen:
    http://web22206.server109.greatnet.de/test/test.html
    HTML-Code:
    <html lang="de">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    
    
    </head>
    <body>
            <style>
    
    .werwer ul {
        text-align: left;
        list-style-type: none;
        font-family: verdana;
        
        font-size: 10px;
    }
    .werwer ul li {
        float: right;
        margin: -8px;
        overflow: hidden;
    
    }
    .werwer ul li a {
        width: 600px;
        height: 300px;
        color: #fff;
        border-bottom: 0px;
        background: rgba(0,175,223,0.5);
        font-size: 14px;
        text-decoration: none;
        text-align: left;
        padding-left: 5px;
        padding-top: 10px;
        display: block;
        margin-top: 100px;
        text-indent: 40px;
    }
    .werwer ul li a:focus
    {
        padding-top: 110px;
        margin-top: 0px;
    
        text-indent: -100px;
    }
    .werwer ul li a.laupa:active
    {
        position: absolute; top: 20px; right: 0px; 
        background: rgba(166,43,57,0.5);
        color: black;
        width: 40px;
        height: 150px;
    }
    .werwer ul li a span {
        display: block;
    
    
        margin-top: 100px;
        font-weight: normal;
        text-indent: 5px;
        position: relative;
        opacity: 0;
    
       }
    .werwer ul li a:focus span ,
    .werwer ul li a:active span{
        opacity: 1;
        margin-top: -0px;
        -ms-transform: rotate(350deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 15px;
    
    
      
    }
    </style>
        <div class="werwer">
    <ul>
    
    <li><a class="laupa" href="#">test 
    <span>Stellenangebote</span></a></li>
    
    </ul>
    </div>
    
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    573
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Hallo,

    seit wann gehört der style-Bereich in den body-Bereich? Das kenne ich anders.

    Gruss

    MrMurphy

  3. #3
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Zitat Zitat von polldaube
    (unter Firefox macht er was er soll!)
    Es soll ein hellblaues Rechteck beim klick zu einem größeren Rechteck werden?
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    ganz einfach
    weils normalerweise funktioniert, ich keine möglichkeit habe externe links einzusetzen oder in den head zu packen
    der html bereich soll weg -später will ich das script alleine nutzen
    Gruss
    Polldaube

    - - - Aktualisiert - - -

    @Gastl
    ja fast (hellbaue fläche die sich zusammenschrumft auf einen schmalen seitenbalken) siehe meinen link
    gruß
    polldau
    Geändert von polldaube (22.04.2015 um 18:53 Uhr)

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    dann mach ma deinen cache leer, da siehste dnn auch im firefox, dass der button. ööhh also die blaue fläche wieder so wird, wie vorher...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Zitat Zitat von polldaube
    @Gastl
    ja siehe meinen link
    Ja und? Wann wird das Teil wieder klein? Es passiert nur 1x etwas. Wers braucht.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Zitat Zitat von polldaube Beitrag anzeigen
    ganz einfach
    weils normalerweise funktioniert, ich keine möglichkeit habe externe links einzusetzen oder in den head zu packen
    der html bereich soll weg -später will ich das script alleine nutzen
    Gruss
    Polldaube
    - Aktualisiert - - -
    Hm, Kkein HTML? Egal hier probiere mal.
    Code:
    <!DOCTYPE html>
    <html lang="de"><head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
    * {
     margin:0;
     padding:0;
     list-style:none;
     text-decoration:none;
     box-sizing:border-box;
    }
    
    p {
     float:right;
    }
    
    a {
     position:relative;
     float:left;
     width: 600px;
     height:300px;
     background: #eee;
    }
    
    a:active {
     width:300px;
     height:40px;
     margin-right:-130px;
     -webkit-transform: rotate(-360deg);
      transform: rotate(90deg);
    }
    
    a:active:after {
     content:"Stellenangebote";
     position:absolute;
     top:0;
     left:130px;
     right:0;
     bottom:0;
     padding:10px 20px;
     background:#f00;
     color:#fff;
    }
    </style>
    </head>
    <body>
    <p><a href="#">test </a></p>
    </body>
    </html>
    Ach, was soll das mal werden? Irgendwie Sinnfrei.
    Geändert von djheke (22.04.2015 um 21:05 Uhr)

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Hallo Leute,
    habe jetzt mal zum Verständniss die Ursprungsdatei hochgeladen, welche ja nur unter Firefox funktioniert.
    wie kann ich das CSS bearbeiten, damit der Krams überall läuft, ohne JS query zu benutzen?
    Danke im Vorraus
    http://web22206.server109.greatnet.de/test/test.html
    HTML-Code:
    <html>
    
        <head>
            <title></title>
        </head>
        <body>
    laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laberlaber laber laber laber laber laber laber laber laber laber laber laber
       <style>
    
    .werwer ul {
        text-align: left;
        list-style-type: none;
        font-family: Arial;
    
        font-size: 10px;
     
    }
    .werwer ul li {
        float: left;
        margin: 0px;
        overflow: hidden;
    
    }
    .werwer ul li a {
    position: absolute;
        right: 0px;
        top: -100px;
        width: 600px;
        height: 305px;
        color: #fff;
        margin-bottom: 100px; 
    border: 4px solid #cc0000;
    background: url(images/LS_Azubi.jpg) no-repeat right top ;
    
       
        
    
    
    
    
        font-size: 14px;
        text-decoration: none;
        
    
        text-align: left;
        padding-left: 0px;
        padding-top: 0px;
        display: block;
       
        margin-top: 100px;
      
        text-indent: 0px;
    
       }
    .werwer ul li a:focus
    .werwer ul li a:active
    
    
    
    {
        padding-top: 100px;
        margin-top: 100px;
        text-indent: -800px;
    
    
    }
    .werwer ul li a.link-4:focus
    
    
    
    {
        
    background:  #cccccc;
    
    
        color: black;
    width: 30px;
    height: 200px;
    }
    .werwer ul li a span {
        display: block;
    
    
        margin-top: 10px;
        font-weight: normal;
    
        text-indent: 0px;
        position: relative;
        opacity: 0;
    
    }
    
    .werwer ul li a:focus span
    {
        opacity: 1;
        margin-top: 24px;
       -ms-transform: rotate(350deg);
       -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    font-size: 20px;
    
    
      }
    </style>
      
      
     
        <div class="werwer">
    <ul>
    
    <li><a class="link-4" href="test.html"><span>Stellenangebote</span> 
      
      
      </a></li>
    
    </ul>    
         </div>  
        </body>
    </html>
    Geändert von polldaube (23.04.2015 um 16:19 Uhr)

  9. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    na aber sobald man einen eventuellen link auf der seite anklickt oder man versehentlich klickt, springt das moped doch direkt wieder auf.
    ohne javascript wirst du das nicht so einfach/bleibend hinbekommen.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    22.04.2015
    Beiträge
    5
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Button in css fuktioniert bei einigen browser nicht

    Hallo synaptic,
    hab gerade mit meinem chef geprochen und ihm gesagt, dass ohne javascript nix zu machen ist.
    werd also jetzt das teil mit javascript aufbauen.
    mit java (jquery) hab ich noch keine erfahrung- wie würde man sowas anfassen?
    danke im vorraus
    polldaube

Ähnliche Themen

  1. EXCEL / VBA USERFORM mit Web Browser - Gif aniemiert < möchte Command Button einfügen
    Von FREUNDEXCEL im Forum Forum für alle anderen Programmiersprachen
    Antworten: 3
    Letzter Beitrag: 01.05.2013, 23:01
  2. Button in allen Browser gleich
    Von Sylnois im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.01.2013, 14:57
  3. HTML-Formular mit CSS fuktioniert nicht!
    Von siggihoelzl im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.08.2008, 16:50
  4. Antworten: 5
    Letzter Beitrag: 16.02.2008, 02:50
  5. mehrere Bilder im Browser nacheinander mit Button anschauen
    Von Sabrina_S im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 08.02.2007, 15:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •