HTML/CSS div box in div box

03/01/2014 16:17 XChangX#1

Hey ich biete denjenigen, der mein Problem l�sen kann 10 e-gold.

Es ist bestimmt was ganz einfaches, bin noch ganz am Anfang (anf�nger). Es geht um eine Transparente Box in der ich etwas schreiben m�chte. Jedoch, wird die Schrift auch Transparent :D

Wie kann man das l�sen oder besser wie f�ge ich eine 2 div Box �ber die Transparente Box.Wird die 2 Box dann auch Transparent?

Habe das alles in einer Tabelle da ich Probleme mit dem zentrieren habe xD

HTML Code:

<center>
<table border="0" cellpadding="0" cellspacing="2">
 <tr>
  <td>
<div id="menu">
<div id="trans" "hover">
<br>
<br>
<br>
<div id="text">
<p><font face="Prestige Elite Std"><h1>Willkommen</h1></font>
xxxxxxxxxxxx</p>
</div> 
  </td>
 </tr>
</table>
</center>

Kleiner abschnitt

Code:

#trans
{
opacity:0.4;
filter:alpha(opacity=10);
display: block;
text align: center;
background-color:#0C0F04;
height: 300px;
color: #F4FBF2;
position: relative;
}

#hover
{
opacity:1.0;
filter:alpha(opacity=0);
}

#text
  {
  margin:30px 40px;
  font-weight:bold;
  color:#FAF6F3;
  opacity:7.0;
  filter:alpha(opacity=0)
  }

So habe ich es versucht, w�r sch�n wenn jemand es l�sen k�nnte. Ich denke, es ist was ganz kurzes ^^

Das mit dem hover, ist egal, da will ich sp�ter was machen.

Ich wei� nicht genau wo ich hier auf epvp fragen k�nnte, deshalb versuche ich es mal hier.

03/01/2014 18:23 Zunft#2

Quote:

Hinweis 2 - Nebeneffekte: Bitte, beachten Sie, dass wenn Sie einem Div Transparenz vergeben, so werden s�mtliche Inhalte, die im Div enthalten sind, mit dieser Transparenz gerendert. Das hei�t in diesem Beispiel, dass unseren schwarzen Rahmen auch nicht mehr schwarz, sondern grau wird je nach dem welchen Transparenzgrad mittels CSS eingesetzt ist. Auch Wenn Ihr Div Bilder enth�lt, so erhalten sie auch eine Transparenz. Um dies zu umgehen, sollten Sie folgende Schritte folgen:
Sie erstellen ein gro�es Div, was als style "position: relative" hat. Dies wird allen enthaltenen absolutpositionierten Divs zwingen, sich darin zu bewegen

Sie erstellen ein transparentes und absolut positioniertes Div mit den obigen CSS Anweisungen und geben es eine Position im obigen Container mittels "left" und "top"

Sie erstellen ein zweites Div, was nicht mehr transparent ist und einfach "zuf�llig" �ber dem transparenten Div per absolute Positionierung steht. Somit ist der Inhalt optisch drin, jedoch nicht programmiertechnisch. Nun �bernehmen Ihre Inhalte nichts von der Durchsichtigkeit.

[Only registered and activated users can see links. Click Here To Register...]

03/01/2014 18:27 XChangX#3

Quote:

Originally Posted by Zunft

[Only registered and activated users can see links. Click Here To Register...]

Danke f�r deine Antwort, ich werde es gleich ausprobieren. Wenn es funktioniert sende ich dir die 10egold sp�ter zu^^

Ich bekomme das irgendwie nicht hin, ist es m�glich, es in einem Beispiel zu zeigen? W�r ganz nett!

03/01/2014 18:53 unknwnx.#4

Du hast insgesamt 3 ge�ffnete Div Container, jedoch nur 1 wird geschlossen.
Btw. gew�hn dir an, mit einr�ckungen zu arbeiten, so unterlaufen dir derartige Fehler nicht.

Warum benutzt du �berhaupt eine Tabelle :o ?

So nun zu deinem Inhaltlichen Part .... folgendes funktioniert bei mir:

index.php

style.css

Im �brigen:

PHP Code:


			
opacity:1.0;
filter:alpha(opacity=0);

Opacity=1 und alpha(opacity=0) wiederspricht sich, bei einem sagst du, dass die Deckkraft 100% sein soll, beim anderen, dass die Deckkraft 0% sein soll.

03/01/2014 19:06 Zunft#5

HTML Code:

<div class="parent colorA">  
<p>Container A hat einen einfarbigen Hintergrund.</p>  
</div>  
  
<div class="parent opacity-wrapper" style="top: -130px; left: 150px;">  
  <div class="colorB opacity"></div>  
  <p>Container B hat einen alphatransparenten Hintergrund.</p>  
  <div class="child">Child-Container ohne Transparenz</div>  
</div>

Code:

.parent {   
  color: #fff;  
  height: 200px;  
  width: 50%;  
  padding: 20px;  
  margin-right: 10px;  
}  
  
.child {   
  background: #ff0;   
  color: #000;   
  height: 50px;   
  padding: 10px;  
}  
  
.colorA { background: #88a; }  
.colorB { background: #668; }  
  
  
/* partial opacity hack: configuration */  
.opacity {   
    opacity: 0.5;       /* modern browser */  
    -moz-opacity: 0.5;  /* older Mozilla browser */  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 in Standard Compliant Mode */  
    filter:alpha(opacity=50); /* IE5.x -7.0 */  
}   
  
/* partial opacity hack, part I: Don't change the following properties! */  
.opacity-wrapper,  
.opacity-wrapper * {  
    position:relative;  
}  
  
.opacity {   
    /* partial opacity hack, part II: Don't change the following properties! */  
    width: 100%;  
    height: 100%;  
    position:absolute;  
    top:0;  
    left:0;  
}   
  
/* partial opacity hack, part III: IE6 support */  
* html .opacity-wrapper {   
    overflow:hidden;  
}  
* html .opacity {   
    width: 2000px;   
    height: 2000px;  
}

03/01/2014 22:36 XChangX#6

danke euch beiden, ich werde mir demn�chst noch egold kaufen, bekommt dann auch beide die 10egold (erstmal zunft).

Problem wurde gel�st :)