Button in css fuktioniert bei einigen browser nicht

polldaube

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

<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>

Alles anzeigen

MrMurphy

Hallo,

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

Gruss

MrMurphy

Gastl

Zitat von polldaube

(unter Firefox macht er was er soll!)

Es soll ein hellblaues Rechteck beim klick zu einem größeren Rechteck werden?

polldaube

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

synaptic

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...

Gastl

Zitat von polldaube

Gastl
ja siehe meinen link

Ja und? Wann wird das Teil wieder klein? Es passiert nur 1x etwas. Wers braucht.

djheke

Zitat von polldaube

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.

HTML

<!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>

Alles anzeigen

Ach, was soll das mal werden? Irgendwie Sinnfrei.

polldaube

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

<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>

Alles anzeigen

synaptic

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.

polldaube

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

djheke

Das Pseudoelement :target könnte helfen. Manche nehmen auch das Inputfeld vom Typ Radio und :checked.

Aber JS wird schon sinnvoller sein.

Hier mal ein einfaches CSS3 Beispiel.
http://www.gipspferd.de/forumhilfe/stellenangebot/

polldaube

hallo djheke,
das ist ja genau, das was ich mir zusammengeschraubt, und nicht zum laufen gebracht habe.
supergeil!!!!
danke polldaube

synaptic

djheke, das is ja grundlegend schon cool mit css.
aber was mich da echt stört is dass der scrollbalken erscheint und dass es im ie8 gar nicht läuft.
im ie9 is die animation nicht schön bzw nicht vorhanden.

für ne private webseite oder für geringe ansprüche is des schon nice, aber geschäftlich leider so nicht nutzbar

djheke

Wenn's geschäftlich ist - Finger weg!
War ja nur so'ne Idee. Was mich stört, ist dass bei der a:target Variante ein leeres Element verwendet wird und bei der input:checket Variante ein Formelement ohne Formular verwendet wird. Beides für mich ein nogo. Aber zum Spielen und experimentieren ist es ok.
Übrigens, für den IE kann man sich ja noch was einfallen lasen.

@edit das mit dem Scrollbalken war mir garnicht aufgefallen. Hab es korregiert, aber ohne Animation. Ging so auf die Schnelle nicht.

Tags