Kopfzeile Transparent gestalten

Hallo zusammen,

ich arbeite derzeit an einem kleinen Projekt in der Firma. Ich entwickle eine Intranet-Homepage und bin das erste mal mit Programmierung beschäftigt.
Der Anfang war recht Zeitaufwändig und nicht immer so leicht Habe es aber schon recht gut hinbekommen. Ich nutze dafür das Programm Visual Studio 2010.

Jetzt zu meiner Frage

Weiß jemand vielleicht wie ich in die Kopf- und Fußzeile eine transparenz hinein bekomme damit das ein bisschen weicher zu dem Hintergrund aussieht?

Ich habe mal ein Screenshot angefügt mit einer Seite.


Danke und Gruß
Chris

Der Screenshot funktioniert nicht ...

Mit Deckkraft einer Grafik arbeiten?

Hatte ausversehen den falschen

Den können sich die Dortmunder am Samstag ja wieder zurückholen. Ich wünsche mir zumindest einen schönen, hohen Heimsieg

Haha ich auch Corristo
Die Bayern mussten ja bereits Lehrgeld zahlen am Wochenende

Arbeitest du denn mit CSS ?

@Corristo123;

Die Grafik ist da - der Gag weg.

Ja ich habe Style Sheets erstellt

Einen kleinen Ratgeber in Sachen "CSS-Transparenz" gibt's hier.

Das versuch ich mal, danke

Dann einfach

0.7 oder so einfügen.

wie du Lust hat.

http://theupload.co.de/web/test_opacity.html

Hier ein kleines Beispiel.

Gruß

Melde mich später nochmal
Danke vorerst


Edit: Also der Befehl "opacity: x.x;" funktioniert. Habe ihn an verschiedenen stellen eingebaut um das mal zu testen.
Die Stelle um die Kopfzeile Transparent zu machen leider noch nicht^^

Hallo zusammen,

sorry für den Doppelpost, aber ich wollte nicht extra wieder einen Thread für diese Frage aufmachen.

Und zwar hätte ich anschließend noch eine Frage, wobei ihr mir vielleicht einen kleinen Tipp geben könnt!?

Die Intranet-Homepage ist so aufgebaut das jedes Gebiet einen anders farbigen Background bekommt. Das funktioniert auch, leider nur im Firefox
Im IE nimmt er nur das Rot wie oben auf dem Bild, und zwar durchegehend für alle Seiten^^

Wie geht man da am besten vor um das auch auf anderen Browsern ans Laufen zu bekommen?


Danke und Gruß
Chris

Wie hast du denn der Kopfzeile je nach Abteilung eine andere Klasse (class) oder ID vergeben? Ein wenig Quelltext wäre nett .

Okay also das wäre meine Startseite:

<%@ Page Title="Startseite" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="default.aspx.vb" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="head">
<style type="text/css">
body {
color: white; background-image:url(intranet_background_red.jpg);
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}

h1 {
font-size: 1.0em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: transparent;
border: transparent;
}

ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: none;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: white; background-color: transparent;
}
ul#Navigation a:visited {
color: #DEDEDE; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}

div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: transparent; border: none;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}

div#Inhalt {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
div#Inhalt1 {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt1 {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */

}
p#Fusszeile {
clear: both;
font-size: 0.9em; color: White;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #000000; opacity: 0.6; border: none;
}




</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h1> Startseite </h1>

<ul id="Navigation">
<li><a href="einfuehrung.htm">Einkauf</a></li>
<li><a href="mehrspaltige.htm">Vertrieb</a></li>
<li><a href="fixbereiche.htm">EDV</a></li>
<li><a href="einfuehrung.htm">Personalabteilung</a></li>
<li><a href="navigationsleisten.htm">Geschäftsführung</a></li>
<li><a href="http://aris/aris">ARIS Platform</a></li>
</ul>

<div id="Info">
<h2>RSS-Feeds</h2>
<p>Ist eine seit dem Anfang des Jahres 2000 kontinuierlich weiterentwickelte Familie
von Formaten für die einfache und strukturierte Veröffentlichung von Änderungen auf Websites
(z. B. News-Seiten, Blogs, Audio-/Video-Logs etc.) in einem standardisierten Format (XML).
RSS-Dienste werden in der Regel in Form spezieller Service-Websites (sogenannter RSS-Channels)
angeboten. Ein RSS-Channel versorgt den Adressaten oft, ähnlich einem Nachrichtenticker,
mit kurzen Informationsblöcken.</p>
<p>Mit klick auf den darunter befindlichen Button, besteht die Möglichkeit, diese RSS- Feeds
direkt auf Ihren Desktop zu holen.</p>
<a href="rss.xml">
<img src="nachrichten.jpg"
alt="Home" style="height: 52px; margin-left: 10px; width: 151px;"></img></a>
&nbsp;</div>

<br /><br />
<div id="Inhalt">

<object height="350" align="middle" width="600"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
id="banner">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="screenmode" value="default" /> <embed height="350" align="middle" width="600" src="test.swf" quality="high" screenmode="default" bgcolor="#000033" showdisplay="1" autorewind="0" showstatusbar="1" showcontrols="1" name="banner" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object><br /><br /><br />
</div>

<div id="Inhalt1">
<asp:BulletedList ID="BulletedList1" style="font-size: small; font-style: normal; font-family: Calibri; margin-left: 17px;"
class="style1" runat="server" Width="614px">
<asp:ListItem>IT Service - bestehend aus Überwachung, Patchmanagement, Helpdesk und Vor-Ort-Service</asp:ListItem>
<asp:ListItem>erfahrene IT-Projektleiter</asp:ListItem>
<asp:ListItem>Komplette Hardware- und Softwarebeschaffung</asp:ListItem>
<asp:ListItem>Consulting im Bereich IT-Sicherheit - Firewall, Antivirus, Backup, VPN, etc.</asp:ListItem>
<asp:ListItem>Komplette Unterstützung bei Fragen der Telefonanlage</asp:ListItem>
<asp:ListItem>Schulungen - Microsoft / SAP usw.</asp:ListItem>
<asp:ListItem>freundliche, kompetente und gepflegte Servicemitarbeiter im Computer-Service.</asp:ListItem>
</asp:BulletedList>
</div>

<p id="Fusszeile">Adresse</p>


</asp:Content>


--------------------------------------------------------------------------------------------------------------------

Das wäre jetzt die Seite über SAP:
Hier sollte der Hintergrund eigentlich ein dunkles Lila sein. In Firefox ist das auch so, nur im IE nicht.


<%@ Page Title="SAP" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="sap.aspx.vb" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="head">
<style type="text/css">
body {
color: white; background-image:url(intranet_background_purple.jpg);
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}

h1 {
font-size: 1.0em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: transparent;
border: transparent;
}

ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0 0 1.2em; padding: 0;
border: none;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: white; background-color: transparent;
}
ul#Navigation a:visited {
color: #DEDEDE; background-color: #eee;
}
ul#Navigation a:hover {
color: black; background-color: white;
}
ul#Navigation a:active {
color: white; background-color: gray;
}

div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: transparent; border: none;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}

div#Inhalt {
margin: 0 12em 1em 16em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}

p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #000000; border: none;
}





</style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h1> SAP </h1>

<ul id="Navigation">
<li><a href="solutionmanager.aspx">Solution Manager</a></li>
<li><a href="c11_entwicklung.aspx">C11 Entwicklungssystem</a></li>
<li><a href="c30_test.aspx">C30 Testsystem</a></li>
<li><a href="c22_produktiv.aspx">C22 Produktivsystem</a></li>
<li><a href="bwt.aspx">BWT Business Warehouse Testsystem</a></li>
<li><a href="bwp.aspx">BWP Business Warehouse Production</a></li>
</ul>

<div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div>

<div id="Inhalt">
<p>3-spaltiges Layout mit Kopf- und Fußzeile</p>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit ausgezeichnet
und kann genauso gut wie ein über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in als Hintergrundbild definiert
oder über eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>

<p id="Fusszeile">Adresse</p>


<br />
<br />
</asp:Content>



Ich hoffe du fühlst dich jetzt nicht erschlagen!

Danke!

Eigentlich dürfte der Code zumindest fürs Hintergrundbild richtig sein ...

Bist du dir sicher, dass es zu keinem CSS-Konflikt zwischen den Bereichen kommt? Wird die Seite wie gewünscht in Opera und Chrome angezeigt? Hast du beim IE schon einmal auf F5 zur Aktualisierung des Caches gedrückt?

Hi,

also es kommt kein Fehler.
Chrome und Opera intepretieren das ebenfalls richtig
Haha nur der blöde IE nicht^^

Und3rtak3r schrieb:

Chrome und Opera intepretieren das ebenfalls richtig
Haha nur der blöde IE nicht^^

Zum Vergrößern anklicken....

Was ja nichts neues ist. Der IE ist gerne mal etwas eigenwillig.

Vielleicht hilft Dir das:
http://www.quirksmode.org/css/opacity.html

Hallo conglom-o,

danke für den Beitrag

Hast du veilleicht noch eine Idee zu dem anderen Problem?
Ich weiß schon warum ich den scheiß IE nicht mag^^
Alle anderen Browser machen was ICH will, nur der nicht!