HTML/CSS div box in div box

~~XChangX~~ · 03/01/2014, 16:17

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

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.

Zunft · 03/01/2014, 18:23

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.

~~XChangX~~ · 03/01/2014, 18:27

Quote:

Originally Posted by Zunft

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!

unknwnx. · 03/01/2014, 18:53

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

?

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.

Zunft · 03/01/2014, 19:06

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

So

~~XChangX~~ · 03/01/2014, 22:36

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

Problem wurde gelöst