✔ Eigenartiger opactly Effekt

Status
Nicht offen für weitere Antworten.
son gohan

son gohan

Erfahrenes Mitglied
Hallo,

ich habe irgendwie keine Ahnung wieso der opactly Effekt bei der folgenden Konstruktion nicht geht, kann mir mal jemand auf die Sprünge helfen. Vielen Dank.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Kostenlos Telefonieren, günstig telefonieren</title>
<meta name="title" content="Kostenlos Telefonieren, günstig telefonieren">
</head>
<body bgcolor="#9F0000">

<div style="background-color: #2F2F2F;filter: alpha(opacity=80);-moz-opacity:0.6;" align="left">

<p>Möchten Sie auch <span style="color:#FFFF00;font-weight:bold;">kostenlos telefonieren</span> 24 Stunden am Tag
7 tage in der Woche so oft sie wollen und soviel Sie wollen für <span style="color:#FFFF00;font-weight:bold;">0,00 Cent</span> !</p>
<ul style="list-style-type:square;" >
<li><span style="color:#FFFF00;font-weight:bold;">Günstig ins Ausland / Mobilfunknetze</span> <br>
ACN bietet Ihnen absolut preiswerte Gebühren für Telefonate ins Mobilnetz und ins Ausland (je nach Anbieter und Tarif bis zu 7 Cent pro Minute günstiger!) </li>
<p></p>
<li><span style="color:#FFFF00;font-weight:bold;">Kostenloser Support</span><br>
Eine kostenlose 0800 Service-Telefonnummer steht jedem Kunden für Telefonate mit dem Anbieter ACN zur Verfügung. </li>
<p></p>
<li><span style="color:#FFFF00;font-weight:bold;">Überblick behalten</span><br>
Auf Wunsch erhalten Sie kostenlos einen detaillierten Einzelverbindungsnachweis in gekürzter oder vollständiger Form.</li>
<p></p>
<li><span style="color:#FFFF00;font-weight:bold;">Keine Vertragslaufzeit</span><br>
Sie gehen keine Vertragslaufzeit ein und können mit einer dreiwöchigen Frist zum Ende jedes Kalendermonats Ihren Tarif beenden.</li>
 <p></p>
<li><span style="color:#FFFF00;font-weight:bold;">Einfach und bequem</span><br>
Sie sparen sich das lästige Suchen und Vorwählen von Call-by-Call-Nummern vor Ihren Anrufen.</li>
</ul>

</div>

</BODY>
</HTML>

Gruß
feh
 
Probier mal folgendes:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<title>Kostenlos Telefonieren, günstig telefonieren</title>
	<style type="text/css">
		body {
			color:				#fff;
			background-color:		#9f0000;
		}
		strong {
			color:				#ff0;
			font-weight:			bolder;
		}
		ul {
			margin:				0.5em 1em 0.5em 2em;
			padding:			0;
		}
		ul.square {
			list-style-type:		square;
		}
		li {
			margin-bottom:			0.5em;
		}
		li p {
			margin:				0;
		}
		.section {
			padding:			0.25em 1em;
			background-color:		#2f2f2f;
			filter:				alpha(opacity=80);
			-moz-opacity:			0.7;
		}
	</style>
</head>


<body>

<div class="section">
	<p>Möchten Sie auch <strong>kostenlos telefonieren</strong> 24 Stunden am Tag 7 tage in der Woche so oft sie wollen und soviel Sie wollen für <strong>0,00 Cent</strong>?</p>
	<ul class="square">
		<li><strong>Günstig ins Ausland / Mobilfunknetze</strong>
			<p>ACN bietet Ihnen absolut preiswerte Gebühren für Telefonate ins Mobilnetz und ins Ausland (je nach Anbieter und Tarif bis zu 7 Cent pro Minute günstiger).</p></li>
		<li><strong>Kostenloser Support</strong>
			<p>Eine kostenlose 0800 Service-Telefonnummer steht jedem Kunden für Telefonate mit dem Anbieter ACN zur Verfügung.</p></li>
		<li><strong>Überblick behalten</strong>
			<p>Auf Wunsch erhalten Sie kostenlos einen detaillierten Einzelverbindungsnachweis in gekürzter oder vollständiger Form.</p></li>
		<li><strong>Keine Vertragslaufzeit</strong>
			<p>Sie gehen keine Vertragslaufzeit ein und können mit einer dreiwöchigen Frist zum Ende jedes Kalendermonats Ihren Tarif beenden.</p></li>
		<li><strong>Einfach und bequem</strong>
			<p>Sie sparen sich das lästige Suchen und Vorwählen von Call-by-Call-Nummern vor Ihren Anrufen.</p></li>
	</ul>
</div>

</body>
</html>
 
Hallo Gumbo,
leider tut sich auch bei deiner Variante nichts. Der Hintergrund in meiner Seite ist Rot und der Inhalt in dem div Tag mit Text hat kein opacty Effekt.

Ich find das so seltsam sowas von seltsam?
 
Hallo,

erweitere den CSS-Code für das DIV um position:absolute - dann klappt's auch mit dem opacity-Effekt, wenn gleich man ihn bei einem farbigen Seitenhintergrund gar nicht erkennen kann ;)
Code: 
<div style="position:absolute;background-color:#2F2F2F;filter:alpha(opacity=80);-moz-opacity:0.8;text-align:left;">
bzw. für Gumbo's Demo:
Code: 
.section {
position: absolute;
padding: 0.25em 1em;
background-color: #2f2f2f;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}

greez, maik.l
 
Zuletzt bearbeitet von einem Moderator:
Hallo maik,

das ist ja fantastisch, da wäre bsetimmt niemand drauf gekommen.

Aber jetzt habe ich noch eine Frage.

Nach dem eigentlichen div Tag das ich jetzt mit dem Effekt versehen habe, kommt noch ein normales div Tag mit Text. Das Tag ist jetzt aber wegen dem positin:absolut Attribut zu weit oben.

Wie kann ich es schaffen, das jetzt das nachfolgende Tag aber unter dem Tag mit dem position:absolut und opactly Attribut wieder steht?

Ich habe es mit Leerzeilen und clear both versucht aber es geht nicht.

Ich könnte höchstens dem nachfolgenden Tag eine feste größe geben, damit es von oben den nötigen Absatnd bekommt, das klappte auch bei meinen Versuchen.

aber mich würde troztdem interissieren ob es nicht vielleicht einfacher geht. Zumal ich auch Probleme habe damit, ein Tag mit dem position:absolute Attribut mittig zu bekommen.

Ich kann mich aber auch da an einen guten Trick von dir erinnern mit - Angaben usw.

Viele Grüße
feh
:)
 
Hallo,

musste erstmal scharf nachdenken, was du wohl mit - Angaben meinst ;-]

Okay, sicherlich das hier:

CSS-Code:
Code: 
div.content
{
position: relative;
left: 50%;
width: 600px;
margin-left: -300px; /* negative Hälfte von width:600px = zentriertes DIV */
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
border: 1px solid #506b84;
background-color: #001122;
}

div.opacity
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
}
HTML-Code:
Code: 
<div class="content opacity">
   zentriertes DIV mit opacity-Effekt 
</div>
<div class="content"> 
   zentriertes DIV ohne opacity-Effekt 
</div>
greez, maik.l
 
Zuletzt bearbeitet von einem Moderator:
Hallo maik,

dank dir, das past alles genau. Aber sag mal seit wann kann man den die Zuweisung einer Klasse so zusammenfassen:
HTML: 
<div class="content opacity">

im head CSS Code steht jeweils für beide div Tags .opacity und .content getrennt für sich und du fast Sie einfach zusammen. Das ist wohl wieder einmal so ein kleiner Trick den ich nie verstehen werde und deswegen immer wieder Probleme bekomme.:)
 
Hallo feh,

das Zusammenfassen von CSS-Klassen ist eigentlich kein Trick, sondern eine gängige CSS-Technik, denn alternativ zu den zwei CSS-Klassen funktioniert ja auch diese Methodik:

CSS-Code:
Code: 
div.content
{
position: relative;
left: 50%;
width: 600px;
margin-left: -300px; /* neg. Hälfte von width:600px = zentriertes DIV */
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
border: 1px solid #506b84;
background-color: #001122;
}
HTML-Code:
Code: 
<div class="content" style="filter:alpha(opacity=80);-moz-opacity:0.8;">
   zentriertes DIV mit opacity-Effekt 
</div>
<div class="content"> 
   zentriertes DIV ohne opacity-Effekt 
</div>
Resumé: das Kombinieren der CSS-Klassen im Attribut class= ist die logische Konsequenz, alle speziellen CSS-Eigenschaften für ein Element ebenfalls im zentralen Style-Sheet (HEAD oder CSS-Datei) zu notieren - wie z.B. bei umfangreichen Webprojekten mit einheitlichem Seitenlayout. ;-]

greez, maik.l
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück