Avatar for Username

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

Dieses Thema wurde archiviert. Bitte stellen Sie eine neue Frage, wenn Sie Hilfe benötigen.

Firefox 5.0 box element hiding

  • 1 Antwort
  • 1 hat dieses Problem
  • 4 Aufrufe
  • Letzte Antwort von the-edmeister

Zachary1234
Zachary1234
more options

I wish to use the following so that the black square a1 appears to be "inside" a2, and the borders of a2 cut off the two protuding corders of a1. I also wish to keep the current body background color.

<style type="text/css"> a1.rotate1 { -moz-transform: rotate(45deg); /* -webkit-transform: rotate(45deg); */ /* -o-transform: rotate(45deg); */ display: block; width: 100px; height: 100px; border: 1px solid black; top: 500px; left: 500px; background-color: black; /* -ms-transform-origin: 0% 0%;*/ /* -ms-transform: rotate(45deg);*/ } a2.outer { /* -moz-transform: rotate(45deg); */ /* -webkit-transform: rotate(45deg); */ /* -o-transform: rotate(45deg); */ display: block; width: 400px; height: 100px; border: 1px solid black; padding-left: 200px; /* -ms-transform-origin: 0% 0%;*/ /* -ms-transform: rotate(45deg);*/ } </style>




<a2 class='outer'><a1 class='rotate1'>Here is some content!</a1></a2>

-Is it possible to acheive this using only two box elements, or do I have to introduce 2 more elements simply to cover the corners, with higher z-index values and with transparency?

Do I use overflow,clear,visibility or other? How do I do so?

I wish to use the following so that the black square a1 appears to be "inside" a2, and the borders of a2 cut off the two protuding corders of a1. I also wish to keep the current body background color. <html> <body> <head> <style type='text/css'> a1.rotate1 { -moz-transform: rotate(45deg); /* -webkit-transform: rotate(45deg); */ /* -o-transform: rotate(45deg); */ display: block; width: 100px; height: 100px; border: 1px solid black; top: 500px; left: 500px; background-color: black; /* -ms-transform-origin: 0% 0%;*/ /* -ms-transform: rotate(45deg);*/ } a2.outer { /* -moz-transform: rotate(45deg); */ /* -webkit-transform: rotate(45deg); */ /* -o-transform: rotate(45deg); */ display: block; width: 400px; height: 100px; border: 1px solid black; padding-left: 200px; /* -ms-transform-origin: 0% 0%;*/ /* -ms-transform: rotate(45deg);*/ } </style> </head> <br/> <br/> <br/> <br/> <br/> <a2 class='outer'><a1 class='rotate1'>Here is some content!</a1></a2> </b> </body> </html> -Is it possible to acheive this using only two box elements, or do I have to introduce 2 more elements simply to cover the corners, with higher z-index values and with transparency? Do I use overflow,clear,visibility or other? How do I do so?

Alle Antworten (1)

the-edmeister
the-edmeister
  • Moderator
more options

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox.
http://forums.mozillazine.org/viewforum.php?f=25
You'll need to register and login to be able to post in that forum.